上一篇博客使用了Timer來實現圖片的切換，@lindexi_gd討論了一下性能，我本人其實對性能這一方面不太熟，但我覺得還是有必要考慮一下，那麽今天我們使用幀動畫開實現以下

新建項目，添加一個Button和Image

在Page裏定義資源

 <Storyboard x:Key="std" x:Name="std" RepeatBehavior="Forever" AutoReverse="True">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="
 
image" Storyboard.TargetProperty="Source">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="Resources/teemo_1.png" />
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Resources/teemo_2.png"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="Resources/teemo_3.png
 
"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="Resources/teemo_4.png"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Resources/teemo_5.png"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="Resources/teemo_6.png"/>
                <DiscreteObjectKeyFrame KeyTime="
 
0:0:0.7" Value="Resources/teemo_7.png"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="Resources/teemo_8.png"/>
                                                                 
            </ObjectAnimationUsingKeyFrames>
            
        </Storyboard>

然後給Button添加點擊事件

處理點擊事件 播放動畫

private void Button_Click(object sender, RoutedEventArgs e)
        {
            //
            std.Begin();
        }

然後看看幀率

如果我們用Task去卡住UI線程的話，動畫就會停止

private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            Task.Delay(1000).Wait();
        }

這樣我們可知幀動畫其實是運行在UI線程上的

然後我有新建了另一個故事板

直接把每個幀的的Value屬性變為BitmapImage對象

        <BitmapImage x:Key="key1" UriSource="Resources/teemo_1.png"/>
        <BitmapImage x:Key="key2" UriSource="Resources/teemo_2.png"/>
        <BitmapImage x:Key="key3" UriSource="Resources/teemo_3.png"/>
        <BitmapImage x:Key="key4" UriSource="Resources/teemo_4.png"/>
        <BitmapImage x:Key="key5" UriSource="Resources/teemo_5.png"/>
        <BitmapImage x:Key="key6" UriSource="Resources/teemo_6.png"/>
        <BitmapImage x:Key="key7" UriSource="Resources/teemo_7.png"/>
        <BitmapImage x:Key="key8" UriSource="Resources/teemo_8.png"/>
        <Storyboard x:Key="std2" x:Name="std2" RepeatBehavior="Forever" AutoReverse="True">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image2" Storyboard.TargetProperty="Source">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{StaticResource key1}" />
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{StaticResource key2}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{StaticResource key3}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource key4}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{StaticResource key5}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{StaticResource key6}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{StaticResource key7}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{StaticResource key8}"/>
            </ObjectAnimationUsingKeyFrames>

        </Storyboard>

點擊按鈕開始故事板

 private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            std2.Begin();
        }

再來看看效果

同樣，如果卡住UI的話，動畫肯定是不會運行的

那麽我們再來看看用Timer實現的幀率

從幀率上來看，第一種方式很明顯幀率高很多，穩定在60左右，第二種和Timer實現的一樣，幀率在9左右，我看不懂這個，但第一種方式的實現總給我一種圖片在閃的感覺，期望有大手子指點一下。

@lindexi_gd

gayhub地址：https://github.com/hei12138/LOLSecond

新手，寫的不好的地方請多指教

歡迎交流[email protected]

uwp 圖片切換動畫 使用幀動畫