Silverlight 初始化動畫

來源:互聯網
上載者:User
Silverlight

在 Silverlight 託管 API 中,用戶端要求在執行個體化應用程式之前將在清單中引用的程式集下載並載入到應用程式的 AppDomain 中。此外,您的應用程式設計可能要預先載入某些資源並且確保這些資源在應用程式可供互動前可用,即使這意味著在下載完成前不顯示該應用程式。啟動顯示畫面是一個初始的內容地區,可在其他內容仍在載入時向使用者顯示。

 

本主題包括下列各節。

  • 啟動顯示畫面使用方式
  • Silverlight 的 JavaScript API
  • 預設啟動顯示畫面體驗
  • 應用程式項目中的基本啟動顯示畫面
  • 啟動顯示畫面使用方式詳述
  • 使用 OnSourceDownloadComplete
  • 相關主題

啟動顯示畫面使用方式

可用於構造 Silverlight 啟動顯示畫面的功能集旨在處理以下情況,但並不僅限於這些方面:

  • 顯示下載進度

  • 顯示動畫,即使不必使用它們來顯示下載進度

  • 提供品牌,這可以包括文本、向量圖形甚至視頻

  • 顯示產品資訊,例如免責聲明

在本主題的相關節中將進一步論述這些使用方式。一般而言,可用的功能集與可用於 Silverlight 的 JavaScript API 的功能集相同,並且還有一些專門支援啟動顯示畫面功能的特定 API。

如果您的主要源內容也在使用 JavaScript API,則您將無法高效地使用此啟動顯示畫面模型。這是因為啟動顯示畫面模型依賴於來自載入的託管 AppDomain 的通知,該通知用作停止顯示 SplashScreenSource 和開始顯示 Source 的訊號。您可以通過以下序列類比相同的明顯轉換行為:

  1. 載入作為"啟動顯示畫面"的初始 Source XAML 頁。

  2. 使用 Downloader 開始下載主要源 XAML 頁和任何初始資源,例如頁面要求的映像或視頻。

  3. 一旦每個 Downloader 為所有內容都引發 Completed 後,已變更位元於 HTML DOM 層級的實際 Source 值,這將卸載"啟動顯示畫面"並載入您的主要內容。這一轉換在此時是瞬時的,因為所需的每個元素都已預先載入到瀏覽器緩衝中。

Silverlight 的 JavaScript API

如果您以前針對 Silverlight 1.0 進行了開發,則可能已對 Silverlight 的 JavaScript API 十分熟悉。如果您以前未針對 Silverlight 1.0 進行過開發,請參見 Silverlight 的 JavaScript API。Silverlight 的 JavaScript API 與針對 HTML DOM 的編程十分相似,並且實際上是在主機的指令碼引擎中執行的,就像針對 DOM 的指令碼一樣,但 Silverlight API 擴充到在 XAML 頁作為 Silverlight 外掛程式的內容載入時建立的對象樹中。這使您可以處理針對特定對象的事件,設定屬性值,以及在運行時替換對象樹的部分等。

預設啟動顯示畫面體驗

在託管 API 下為 Silverlight 定義的預設體驗是:超出某一時間閾值(約為 0.5 秒)的任何載入都將在內容地區中顯示基於 XAML 的動畫。顯示該預設動畫和初始化序列的 XAML 被寫入程式碼到 Silverlight 外掛程式中。

為了替換預設啟動顯示畫面,您為在 HTML 中定義 object 元素的 Silverlight 外掛程式的 splashScreenSource 參數提供一個值。

應用程式項目中的基本啟動顯示畫面

在 Silverlight 中對於啟動顯示畫面的基本支援在 Silverlight 外掛程式基本代碼層級定義。這將向處於 COM 或 NPAPI 控制項模型(取決於特定的瀏覽器)中的瀏覽器宿主公開,並且一般通過執行個體化 Silverlight 外掛程式的 object 元素向 HTML DOM 和 HTML 公開。

Silverlight 外掛程式的以下 params 選項專門用於啟動顯示畫面支援:

參數

說明

SplashScreenSource

設定為啟動顯示畫面提供視覺效果的 XAML 頁的 URI。此頁在 JavaScript API 下作為初始 Silverlight 內容載入。

OnSourceDownloadProgressChanged

設定正在下載 Source 期間對以增量方式調用的事件處理常式的名稱。

OnSourceDownloadComplete

設定在 Source 下載完成後立即調用的事件處理常式的名稱。

如果您為 OnSourceDownloadProgressChanged 或 OnSourceDownloadComplete 指定了一個處理常式,則引用的函數必須在運行時可用於瀏覽器指令碼引擎。通常,這是通過在單獨的 JavaScript 檔案中定義該函數實現的。然後,您為承載定義 object 元素的 Silverlight 外掛程式的 HTML 頁包括指令碼。在以下參考主題中提供針對事件處理常式原型的文檔:OnSourceDownloadProgressChanged、OnSourceDownloadComplete。

用於 SplashScreenSource 的 XAML 頁應可從某一 Web 服務器擷取。此 XAML 頁提供給 Silverlight 用戶端瀏覽器宿主,就像提供映像或託管 XAP 包之類的其他內容一樣。應該對您的 Web 服務器進行配置,以便 .xaml 副檔名和用於 XAML 的相應 MIME 類型允許作為提供的內容。

啟動顯示畫面具有安全注意事項,因為它們涉及跨 API 模式的轉換,以及 HTML 頁內的 Silverlight 初始化。為使這些轉換更安全,您必須從相同的域提供啟動顯示畫面進程的所有三個元素(宿主 HTML 頁、啟動顯示畫面 XAML、在啟動顯示畫面顯示時正下載的 XAP 包)。您可以選擇通過 HTTPS 提供這些元素,但如果您這樣做了,則必須將所有元素都作為 HTTPS 提供。

啟動顯示畫面源必須是 XAML 檔案。將 XAP 指定為啟動顯示畫面源將會建置錯誤。

在如何:定義簡單的 Silverlight 啟動顯示畫面主題中介紹了定義和打包一個簡單的 Silverlight 啟動顯示畫面的基本過程。

啟動顯示畫面使用方式詳述

下載進度

用於啟動顯示畫面的一個常見情形就是顯示可視進度列指示器。對於許多使用者而言,最基本和最熟悉的進度列指示器是進度列。典型的進度列設計顯示一個水平延伸的矩形地區,該地區最初顯示為白色或空。在下載或操作進行中時,這個空地區逐漸被更深顏色的欄填充,並且只要更深顏色的欄完全填充該矩形,進度即完成。有時候,這一視覺效果通過顯示數字百分比的文本地區來實現。

在 Silverlight 啟動顯示畫面模型中,確定下載進度的方法是通過從 OnSourceDownloadProgressChanged 處理常式的事件數目據內讀取 Progress 屬性的值。

儘管進度列在視覺外觀上可能與動畫類似,但通常不需要使用 Silverlight 動畫 API 來產生進度列。您只需通過在 OnSourceDownloadProgressChanged 的每次迭代時使用 Progress 的某個因子來更新某個屬性。

例如,以下 XAML 定義此類進度列的一個簡單版本:

複製
<Canvas Background="Black" Width="302" Height="52">  <Rectangle Canvas.Left="1" Canvas.Top="1" Width="300" Height="30" Fill="White"/>  <Rectangle x:Name="progressBarFill" Canvas.Left="1" Canvas.Top="1" Height="30" Fill="Blue"/></Canvas>

為了產生可視進度,您通過在處理常式中設定 progressBarFill 的寬度,在每次迭代時重設填充欄的值。progress 是介於 0 和 1 之間的值,因此您將其用作相對於進度列地區的可能總寬度的因子。

複製
function onProgressChanged(sender, eventArgs){    var slPlugin = sender.getHost();    slPlugin.content.findName("progressBarFill").width = eventArgs.progress * 300;}

動畫不是必需的,因為 Silverlight 呈現系統會檢測到對象樹中運行時更改的屬性值並相應重繪視覺效果。

動畫

用於啟動顯示畫面的另一個常見情形就是顯示迴圈動畫。迴圈動畫用於向使用者指示應用程式和瀏覽器仍在運行並且能夠呈現更新,還指示未發生任何意外(瀏覽器崩潰、串連錯誤等)。

對於這些動畫類型,總的動畫期間是不確定的,因為其目的是為了在使用者等待下載完成這一時間段中運行動畫。因此,要使用的動畫的最佳類型是具有自然迴圈行為並具有 Forever 運行時的動畫。在整個 XAML 頁被卸載後該動畫將"停止",並且 Silverlight 外掛程式將從下載完成包中載入內容。

通常可以完全在 XAML 中編寫動畫。若要運行動畫,可以在 XAML 標記中使用 Storyboard 的 EventTrigger 包容,以便在首次載入動畫時運行該動畫。或者,您可以在 JavaScript API 下在根項目上處理 Loaded 之類的物件存留期事件,從某一 Resources 集合檢索相關的 Storyboard,並且對 Storyboard 調用 Storyboard.Begin 以開始動畫。

有關如何編寫動畫以及動畫的一般工作方式的更多資訊,請參見動畫概述。請注意,動畫概述主題主要是為託管 API 的使用者編寫的,可能沒有適合 JavaScript API 情形的程式碼範例或特定資訊。請閱讀這一概述來加深概念上的理解。在概述中提供的某些 XAML 樣本可能很有用,只需執行少量工作(例如刪除 x:Class 之類的託管 API 細節)便可以利用這些樣本。然後,您可以根據需要從 Silverlight 的 JavaScript API 參考的以下主題中瞭解更多資訊:

  • ColorAnimation

  • DoubleAnimation

  • PointAnimation

  • Storyboard

  • Resources

  • EventTrigger

您還可以通過將非線性插補用於位置和速度,使用主要畫面格動畫來用於更精細微調的動畫。它們可用於啟動顯示畫面中非常簡單的物理類比,例如回力球。有關更多資訊,請參見主要畫面格動畫。就強調 XAML 樣本的託管編程和可能的應用而言,適用同樣的條件。另請參見 Silverlight 的 JavaScript API 參考中的下列主題:

  • ColorAnimationUsingKeyFrames

  • DoubleAnimationUsingKeyFrames

  • PointAnimationUsingKeyFrames

  • KeySpline

品牌

在許多應用程式模型中,傳統的啟動顯示畫面只顯示單個較大的位元影像,並且可能顯示進度列指示器作為使用者介面的較小部分。此類啟動顯示畫面的一般目標是反白產品品牌資訊。沒有什麼可以妨礙您為 Silverlight 啟動顯示畫面採用此方法。在最簡單的層級上,您的啟動顯示畫面 XAML 可以只由顯示位元影像的單個 Image 元素構成。不過,這可能不是理想方法;因為如果位元影像較大,映像源將以非同步方式下載,所以您的啟動顯示畫面在顯示前可能會稍微延遲。

充分利用 Silverlight 的強大功能的一個更好方法是將您的啟動顯示畫面編寫為向量圖形。您可以使用在路徑標記文法主題中描述的路徑在某些情況下匯入現有向量資訊。或者,您可以使用產生與 Silverlight 相容的 XAML 標記的設計工具,例如 Microsoft Expression Design。此外,您可以整合由此類工具在設計時產生的任何動畫,或者通過將固定向量圖形集的某些屬性作為目標並使用示範圖板對它們進行動畫處理,在以後將動畫添加到圖形。

產品資訊

您的啟動顯示畫面可能要顯示主要包含文本的地區。為了簡化本地化,您可能要將文本保持在內容的向量圖形部分之外。JavaScript API 不像託管 API 那樣具有成熟的本地化架構,但即便如此,它仍可用於在整個標記中將本地化需求隔離到某些控制項。

在您為某一啟動顯示畫面顯示文本時,將被限制在可用於 JavaScript API 的文本元素上。對於唯讀文本有兩種可能的技術:TextBlock 或 Glyphs。

TextBlock 可能是更輕量級的技術,特別是在您只是針對拉丁字母地區性時。您將 TextBlock 內容指定為一個字串。在 TextBlock 內,您可以進行一些基本的文字格式設定設定,例如調整大小、應用顏色或畫筆以及使用 LineBreak 進行塊級格式設定。如果您想要使用在 TextBlock 中描述的預設字型之外的其他字型,則必須下載該字型;請參見 SetFontSource。

Glyphs 是更通用的技術,因為您可以提供劃分了子集的字型以及 UnicodeString,這便於使用遠東字型和字串。唯一的複雜因素就是您需要可產生劃���了子集的字型和相容的 Unicode 索引/字串的工具。在 Glyphs 中描述了使用來自 Microsoft Word 的 XPS 輸出的技術。

使用 OnSourceDownloadComplete

引發 OnSourceDownloadComplete 之時也就是啟動顯示畫面 XAML 被卸載之時,此時準備載入包。因此,執行影響 Silverlight 對象樹的任何操作通常並無意義。而是可使用 OnSourceDownloadComplete 作為提示來在周圍 HTML 中更新使用者介面,或者可以更改您在 Silverlight 內容地區之上呈現的任何 HTML 重疊(如果您使用該技術)。

如果是從宿主 HTML 引用跨域源,則從不調用 OnSourceDownloadComplete 或 OnSourceDownloadProgressChanged 的處理常式。因此您只能顯示不確定的啟動顯示畫面。在此情況下,宿主 HTML 可能希望為 OnLoad 分配處理常式,因為這是在載入源 XAP 後用於重設狀態的最佳可用物件存留期事件。

請參見

參考Silverlight 外掛程式對象參考 概念應用程式和編程模型 Silverlight 的 JavaScript API Silverlight 的 JavaScript API 參考

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.