[WP8.1UI控制項編程]Windows Phone動畫配置的選擇

標籤：c   style   class   blog   code   java   

8.1 動畫配置的選擇

    Windows Phone的動畫實現方式有線性插值動畫（3種類型）、關鍵禎動畫（4種類型）和基於幀動畫，甚至還有定時器動畫，然後動畫所改變的UI元素屬性可以是普通的UI元素屬性，變換特效屬性和三維特效屬性，面對著這麼多的選擇，我們要實現一個動畫效果該怎麼去思考動畫實現的思路以及怎麼選擇實現的技術呢？那麼我們這小節會先講解與動畫效能相關的知識，然後再講解怎麼去選擇動畫的實現方案。

8.1.1 畫面播放速率

    畫面播放速率是用於測量顯示幀數的量度，測量單位為“每秒顯示幀數”（Frame per Second，FPS，幀率）或“赫茲”，是指每秒鐘重新整理的畫面的幀數，也可以理解為圖形處理器每秒鐘能夠重新整理幾次。由於人類眼睛的特殊生理結構，如果所看畫面之幀率高於每秒約10-12幀的時候，就會認為是連貫的。對於動畫而言，畫面播放速率常用于衡量動畫的流暢度，畫面播放速率的數字越大表示動畫的流暢度越高。在實現Windows Phone動畫的時候，我們是不能夠直接指定動畫的畫面播放速率的，動畫的畫面播放速率是由系統自動分配的，當手機的效能越好，程式的效能越好，那麼動畫的畫面播放速率就越大，反之就越小。所以要判斷一個動畫是否能夠流暢地運行，我們需要關注動畫的畫面播放速率指標是否足夠高。

    在Windows Phone裡面雖然不能夠直接設定動畫的畫面播放速率，但是可以測量出來。當在Windows Phone模擬器中運行應用時，可以使用畫面播放速率計數器來監控應用的效能和動畫的效率，模擬器的8.1所示，每一個畫面播放速率計數器的作用如表8.1所示。當然畫面播放速率計數器也一樣可以在手機上進行顯示，在真實的 Windows Phone 手機上測試這些計數器非常重要，因為模擬器的效能和在真實的手機上是有很大區別的。對於每個計數器的值都有建議閾值和上限閾值，如表8.2所示，當計數器在紅色值閾值區間表明存在潛在效能問題，這就需要引起重視，你的動畫的實現方案可能有較大的問題，需要進行最佳化。

表8.2 建議的幀和填充速率

計數器	紅色閾值*	建議值	上限閾值
構圖線程畫面播放速率	30 幀/秒	45 幀/秒	60 幀/秒
UI 線程畫面播放速率	15 幀/秒	30 幀/秒	60 幀/秒
螢幕填充速率	>3	<= 2.5	3.0

 

    那麼畫面播放速率計數器是可以在代碼中啟用或禁用的，當你在Visual Studio中建立 Windows Phone應用項目時，預設情況下會在檔案 App.xaml.cs 中添加啟用畫面播放速率計數器的代碼。代碼如下所示：

    if (System.Diagnostics.Debugger.IsAttached)

    {

        this.DebugSettings.EnableFrameRateCounter = true;

    }

    上面的代碼錶示當啟動Debug狀態調試應用程式的時候將會啟用畫面播放速率計數器。其中Application.Current.Host.Settings.EnableFrameRateCounter = true表示啟用畫面播放速率計數器，設定為false則禁用畫面播放速率計數器。

8.1.2 UI線程和構圖線程

    Windows Phone的圖形線程結構針對手機進行了最佳化，除了UI線程之外，Windows Phone 還支援構圖線程。若要掌握怎麼去選擇最優的動畫實現方案，那麼需要理解Windows Phone 中UI線程和構圖線程，這對做動畫的最佳化是非常重要的。

    （1）UI 線程

    UI 線程是Windows Phone中的主線程，UI線程的主要任務是從 XAML 中分析並建立對象、在第一次繪製視覺效果時，將繪製所有視覺效果以及處理每幀回調並執行其他使用者代碼。在應用程式裡面維護輕量級的UI線程是保障應用程式流程暢啟動並執行前提，同時這對於動畫的實現也是一樣的道理，盡量避免佔用UI線程。

    （2）構圖線程

    構圖線程可以處理某些在UI上的工作，從而分擔了UI線程的部分工作，提高Windows Phone應用的效能。在Windows Phone上，構圖線程的工作是，它合并圖形紋理並將其傳遞到 GPU 以供繪製，手機上的 GPU 將在稱為自動緩衝的進程中，自動緩衝並處理運行在構圖線程上的動畫。構圖線程處理與變換特效（RenderTransform）和三維特效（Projection）屬性關聯的動畫，如針對於ScaleTransform、TranslateTransform、RotateTransform和PlaneProjection的屬性改變的Storyboard動畫都是完全運行在構圖線程上的。另外，Opacity 和 Clip 屬性設定也由構圖線程處理。但是，如果使用 OpacityMask或非矩形剪輯，則這些操作將被傳遞到 UI 線程。

    （3）動畫和線程

    從構圖線程的作用可以知道StoryBoard動畫由構圖線程進行處理，那麼這種動畫的處理方式最為理想，因為構圖線程會將這些動畫傳遞到GPU進行處理。如果需要在動畫中使用到UI線程，如改變UI元素的With屬性等，那麼就需要給動畫相應的Animation對象的EnableDependentAnimation屬性設定為True，它表示動畫是否需要依賴UI線程來運行。此外，如果 CPU 超負荷，則構圖線程可能比UI線程啟動並執行更頻繁。但是，有時Storyboard動畫無法實現你的動畫效果的時候，你可以選擇在代碼中驅動動畫，如採用基於幀動畫。這些動畫按幀進行處理，每幀回調都在UI線程上進行處理，動畫的更新速度與UI線程處理動畫的速度相當，並且根據應用中發生的其他動作，動畫顯示的流暢性可能低於在構圖線程上啟動並執行動畫。另外，當使用基於幀動畫在代碼中更新動畫時，UI元素不會像在Storyboard動畫中更新一樣，自動進行緩衝，這又加重了UI線程的負擔。

8.1.3 選擇最優的動畫配置

    上一章我們講解了很多的動畫的變成知識，這些都是Windows Phone動畫編程的根基，正所謂萬變不離其宗，無論你要實現的動畫懂麼複雜，都離不開這些基礎知識。當我們要去實現一個動畫效果的時候，首先需要去思考動畫中的每個組成元素，思考它們的變化情況，想一下要改變UI元素的什麼屬性來實現動畫的效果，想一下用什麼動畫類型來實現。當你已經想到了有多種方案可以實現這個動畫效果的時候，你可以從兩個方面去衡量你的實現方案，一方面是從效能效率方面，這就涉及到前面所講的動畫的畫面播放速率，UI線程和構圖線程相關的知識；另一方面是從動畫實現的複雜度方面，比如要實現一個很複雜圖形的形狀變化的動畫，你可以直接用Path圖形來繪製出這個圖形，然後設計Path圖形的點運動的動畫，也可以用多張類似的圖片做圖片切換的動畫，如果圖片切換的動畫效果能達到你所想要的效果，那麼就建議使用圖片切換這種簡單的方式來實現。

    在Windows Phone中有多種實現動畫的方案，關於這些方案的選擇有下面的一些建議。

    （1）可以用變換特效屬性或者三維特效屬性實現的動畫，應該盡量採用變換特效屬性或者三維特效屬性作為動畫改變的屬性去實現動畫。因為變換特效屬性或者三維特效屬性是通過構圖線程對UI元素產生作用的，不會阻塞UI線程也不會重新調用UI的布局系統。

    （2）可以使用線性插值動畫/主要畫面格動畫來實現的動畫就採用線性插值動畫/主要畫面格動畫去實現，因為線性插值動畫/主要畫面格動畫是最優的動畫實現方式，它們本身也是在構圖線程上啟動並執行。

    （3）當使用線性插值動畫/主要畫面格動畫無法實現的動畫效果的時候應該採用基於幀動畫來實現，而不是自訂定時器來實現動畫，基於幀動畫比定時器動畫更勝一籌，它可以根據裝置和應用程式的情況動態地跳幀調用的頻率。

    下面我們通過一個例子來示範用兩種不同的方法來實現一個相同的動畫效果，所實現的動畫效果是讓矩形的高度慢慢地變成原來的兩倍，第一種方式是用線性插值動畫對矩形的Height屬性進行動畫處理，第二種方式也是用線性插值動畫，但是針對的動畫目標屬性是ScaleTransform的ScaleY屬性，然後我們用一個按鈕點擊事件阻塞UI線程2秒鐘，可以看到針對Height屬性的動畫會暫停2秒鐘再繼續運行，而針對ScaleTransform的ScaleY屬性不會受UI線程阻塞的影響。範例程式碼如下所示：

代碼清單8-1：兩種動畫的對UI線程的影響（原始碼：第8章\Examples_8_1）

MainPage.xaml檔案主要代碼------------------------------------------------------------------------------------------------------------------    < Page.Resources>        <Storyboard x:Name="heightStoryboard">            <!--針對Height屬性的動畫-->            <DoubleAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Height" RepeatBehavior="Forever" EnableDependentAnimation="True" From="100" To="200" Duration="0:0:2">                    </DoubleAnimation>        </Storyboard>        <Storyboard x:Name="scaleTransformStoryboard">            <!--針對ScaleTransform的ScaleY屬性的動畫-->            <DoubleAnimation Storyboard.TargetName="scaleTransform1" Storyboard.TargetProperty="ScaleY"  RepeatBehavior="Forever" From="1" To="2" Duration="0:0:2">            </DoubleAnimation>        </Storyboard>    </ Page.Resources>    <StackPanel>        <Button Content="阻塞UI線程" Click="Button_Click_1"></Button>        <Button x:Name="heightAnimationButton" Content="Height屬性動畫"  Click="heightAnimationButton_Click_1"></Button>        <Button x:Name="scaleTransformAnimationButton" Content="ScaleTransform屬性動畫"  Click="scaleTransformAnimationButton_Click_1"></Button>        <Rectangle Height="100" Fill="Blue" x:Name="rectangle1">            <Rectangle.RenderTransform>                <ScaleTransform x:Name="scaleTransform1" ></ScaleTransform>            </Rectangle.RenderTransform>        </Rectangle>    </StackPanel>

MainPage.xaml.cs檔案主要代碼------------------------------------------------------------------------------------------------------------------    private void Button_Click_1(object sender, RoutedEventArgs e)    {        // 阻塞UI線程2秒鐘        Task.Delay(2000).Wait();    }    private void heightAnimationButton_Click_1(object sender, RoutedEventArgs e)    {        // 播放改變高度屬性的動畫，高度有100變成200        scaleTransformStoryboard.Stop();        heightStoryboard.Begin();    }    private void scaleTransformAnimationButton_Click_1(object sender, RoutedEventArgs e)    {        // 播放改變變換屬性的動畫，舉行沿著X軸放大2倍        heightStoryboard.Stop();        scaleTransformStoryboard.Begin();    }

原始碼下載：http://vdisk.weibo.com/s/zt_pyrfNHoezI