uwp 图片切换动画 使用帧动画

Posted 2020-11-08 lonelyxmas

原文:uwp 图片切换动画 使用帧动画

上一篇博客使用了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]