windows phone：动画

基于帧与基于时间

动画的执行速度可以是显示屏的视频硬件刷新率，也可以是时钟时间。因为视频显示屏刷新一次称为一帧，所以根据刷新频率的不同，动画可分为基于帧的动画和基于时间的动画。下面的示例可以看到这两种动画的差异：

xaml文件片段如下：

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0"
                       Text="Frame-Based"
                       FontSize="{StaticResource PhoneFontSizeLarge}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       RenderTransformOrigin="0.5 0.5">
                <TextBlock.RenderTransform>
                    <RotateTransform x:Name="rotate1" />
                </TextBlock.RenderTransform>
            </TextBlock>

            <TextBlock Grid.Row="1"
                       Text="Time-Based"
                       FontSize="{StaticResource PhoneFontSizeLarge}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       RenderTransformOrigin="0.5 0.5">
                <TextBlock.RenderTransform>
                    <RotateTransform x:Name="rotate2" />
                </TextBlock.RenderTransform>
            </TextBlock>

            <Button Grid.Row="2"
                    Content="Hang for 5 seconds"
                    HorizontalAlignment="Center"
                    Click="OnButtonClick" />
    </Grid>
    </Grid>

代码文件片段如下：

    public partial class MainPage : PhoneApplicationPage
    {
        DateTime startTime;

        public MainPage()
        {
            InitializeComponent();

            startTime = DateTime.Now;
            CompositionTarget.Rendering += OnCompositionTargetRendering;
        }

        void OnCompositionTargetRendering(object sender, EventArgs args)
        {
            //基于帧

            rotate1.Angle = (rotate1.Angle + 0.2) % 360;

            // 基于时间

            TimeSpan elapsedTime = DateTime.Now - startTime;
            rotate2.Angle = (elapsedTime.TotalMinutes * 360) % 360;
        }

        void OnButtonClick(object sender, RoutedEventArgs args)
        {
            Thread.Sleep(5000);
        }
    运行程序后，两个文本都能正常地旋转且速度也大致相同，当你按下按钮时，两个文本都停止旋转，但当动画再次启动时，基于帧的动画从停止的地方继续运行，而基于时间的动画则会向前跨越，就像从未发生过延迟一样。到底使用哪种方法来执行动画最终取决于应用程序本身。