WPF动画的性能和帧率

想必大家都知道，动画的平滑顺畅是由帧率所决定的，而帧率消耗的则是电脑的CPU，帧率越高则消耗的CPU越高，相反，帧率越低占用的CPU则越低。

当帧率太低时，动画就会不太平滑流畅并且会发生抖动现象。

而帧率如果太高，占用电脑CPU也就越高。

因此，要想一个动画变得比较完美，则要使这个动画的帧率刚刚好。

帧率可以通过TimeLine.DesiredFrameRate这个属性进行调整

 

在WPF动画中通常为用户界面的应用动画，只不过是创建并配置正确的动画和故事版对象。但在其他情况下，特别是同时发生多个动画时，可能更加需要关注性能。而在WPF中当保持以60帧/秒的速度进行动画时，便可以确保从开始到结束得到平滑流畅的动画：

<Window.Triggers>

    <!--首先定义一个事件触发器，通过SourceName属性关联button-->

    <EventTrigger RoutedEvent="Button.Click" SourceName="btn_start">

        <EventTrigger.Actions>

            <BeginStoryboard>

                <!--通过Timeline.DesiredFrameRate属性设置帧速率-->

                <Storyboard Storyboard.TargetName="ellipse" Timeline.DesiredFrameRate="{Binding ElementName=textBox1,Path=Text}">

                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="0" To="300" Duration="0:0:10"/>

                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="250" Duration="0:0:10"/>

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger.Actions>

    </EventTrigger>

</Window.Triggers>



以下为XAML的页面代码：



<Grid ShowGridLines="False">

    <Grid.RowDefinitions>

        <RowDefinition Height="5"/>

        <RowDefinition/>

        <RowDefinition/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition/>

        <ColumnDefinition/>

    </Grid.ColumnDefinitions>

        

    <Canvas ClipToBounds="True" Grid.Row="0" Grid.ColumnSpan="2" Height="320" Background="Azure">

        <Ellipse Name="ellipse" Fill="Violet" Width="10" Height="10"/>

    </Canvas>



    <Label Grid.Row="1" Content="帧速率:" FontSize="20" HorizontalAlignment="Right" VerticalAlignment="Center"/>

    <TextBox Name="textBox1" Text="1" Width="60" Height="30" FontSize="20" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center"/>

    <Button Name="btn_start" Grid.Row="2" Grid.ColumnSpan="2" Content="点击动画" Width="200" Height="60" FontSize="20" />

</Grid>

以下为一个例子可以看到帧率大小的不同效果：

 

运行显示如上：

默认帧速率为1，这时点击“点击动画”按钮便可看到淡紫色的点向下以大约45°的角缓动。

当帧速率为1（最小值）时，可看到十分明显的抖动不平滑现象，而当帧率越来越高时，抖动越来越小，动画越来越流畅。