动画帧速率

  通常，为用户界面应用动画，只不过是创建并配置正确的动画和故事版对象。但在其他情况下，特别是同时发生多个动画时，可能更加需要关注性能。WPF试图保持以60帧/秒的速度进行动画，可以确保从开始到结束得到平滑流畅的动画。帧速率越低，会发生抖动现象。帧速率越高，占用的CPU也就越高。通过TimeLine.DesiredFrameRate属性可以进行调整，下面是例子：

      首先先把页面做出来：

 

定义一个事件触发器，通过SourceName属性关联button，给按钮添加一个点击事件，然后再通过Timeline.DesiredFrameRate属性设置帧速率，在故事版Storyboard中定义了两个动画，一个是图片离顶部的距离从0到300，持续时间为10秒，另一个是图片离底部的距离从0到464，持续时间为10秒。

 

改变帧速率，图片的移动也会改变：

 

全部代码：<Window.Triggers>

        <!--定义一个事件触发器，通过SourceName属性关联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="464" Duration="0:0:10" ></DoubleAnimation>

                    </Storyboard>

                </BeginStoryboard>

            </EventTrigger.Actions>

        </EventTrigger>

    </Window.Triggers>

       

    <Grid ShowGridLines="False">

        <Grid.RowDefinitions>

            <RowDefinition Height="4*"></RowDefinition>

            <RowDefinition></RowDefinition>

            <RowDefinition></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition></ColumnDefinition>

            <ColumnDefinition></ColumnDefinition>

        </Grid.ColumnDefinitions>

 

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

            <Image  Name="ellipse" Height="30" Width="30" Source="Images/1.gif"></Image>

        </Canvas>

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

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

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

    </Grid>