动画性能和帧率

开发工具与关键技术： Visual Studio 2017、C#语言
作者：邓李庆
撰写时间： 2019年8月06日
下面给大家讲一下动画性能和帧率，帧率在我的生活中很常见了，比如：手机、电影、电视、CRT显示器、液晶显示器、3D显示器等等。在生活中帧率是以帧率称为单位的位图图像连续出现在显示器上的频率（速率）。该术语同样适用于胶片和摄像机，计算机图形和动作捕捉系统。简单来说，帧率就是摄像机每秒所拍摄图片的数量。帧速率也可以称为帧频率。
每秒的帧数或者说帧率表示图形处理器处理场时每秒钟能够更新的次数。高的帧率可以得到更流畅、更逼真的动画。一般来说30帧数就是可以接受的，但是将性能提升到60帧数则可以明显提升交互感和逼真感，但是一般来是超过75帧数一般就不容易察觉到有明显的流畅度提升了如果帧率超过屏幕刷新率只会浪费图形处理的能力，因为监视器不能以这么快的速度更新，这样超过刷新率的帧率就浪费掉了。
刷新频率：既屏幕刷新的速度、刷新频率越低，图像闪烁、停顿和抖动的就越厉害，眼睛疲劳得就越快。
通常，为用户界面应用动画，只不过是创建并配置正确的动画故事板对象。但在其他情况下，特别是同时发生多个动画时，可能更加需要关注性能。WPF试图保持以60帧/秒的速度进行动画，可以确保从开始到结束得到平滑流畅的动画。帧率越低，会发生抖动现象。帧速率越高，占用的CPU也就越高通过TimeLine DesiredFrameRate属性进行调整。
看XSML代码：

 <Window.Triggers>
        <!--定义一个事件触发器，通过SouceName属性关联button-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_start">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <!--通过Timeline.DesiredFrameRate属性设置帧速率-->
                    <Storyboard Storyboard.TargetName="ellipse" Timeline.DesiredFrameRate="{Binding ElementName=txtBox1,Path=Text}">
                        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="0" To="300" Duration="0:0:10"></DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="250" Duration="0:0:10"></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>

    <Grid ShowGridLines="False">
        <Grid.RowDefinitions>
            <RowDefinition Height="5*"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Canvas ClipToBounds="True" Grid.Row="0" Height="320" Background="Beige" Margin="0,0,-1.4,-3.2" Grid.RowSpan="3" Grid.ColumnSpan="2">
            <Ellipse Name="ellipse" Fill="Red" Width="10" Height="10"></Ellipse>
        </Canvas>
        <Label Content="帧速率：" FontSize="16" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,10.057,146.6,4.543" Grid.Row="1" Grid.ColumnSpan="2"/>
        <TextBox Name="txtBox1" Text="1" Width="60" Height="30" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0.2,9.714,0,5.543" Grid.Column="1" Grid.Row="1"/>
        <Button Name="btn_start" Grid.Row="2" Grid.ColumnSpan="2" Width="200" Content="点击动画" FontSize="20" Margin="44,0.457,49.6,9.8"/>
    </Grid>
</Window>

效果图：