Windows Store App 插值动画

插值动画支持DoubleAnimation、ColorAnimation和PointAnimation类型的动画。其中比较常用的是DoubleAnimation动画，它可以用来控制界面元素的Double类型属性值的动态变化，从而使元素在界面上呈现我们期望的动画效果。ColorAnimation和PointAnimation动画与DoubleAnimation动画类似，通过改变元素的Color类型和Point类型的属性值就可以实现这两种动画。下面首先介绍一下上述动画对象的一些共有属性。

q  Duration，指定一次完整的动画周期，Duration 属性值的格式是“小时：分钟：秒”。

q  AutoReverse，指定时间线在达到Duration属性指定的终点后是否倒退。如果将此动画属性设置为True，动画会从终止状态向起始状态反向播放。

q  RepeatBehavior，指定动画的播放次数，如果该属性值为Forever，说明动画从一开始时就无限次重复地播放。

接下来以DoubleAnimation动画为例，通过改变椭圆的不透明度产生亮暗交替变换的动画效果。

在一个打开的Windows 应用商店项目中新建一个空白页，并命名为DoubleAnimationPage，双击打开此页面的DoubleAnimationPage.xaml文件，在原有的Grid元素中添加如下代码。

<StackPanel>

    <StackPanel.Resources>

        <Storyboard  x:Name="storyboard">

            <DoubleAnimation

                Storyboard.TargetProperty="Opacity"

                Storyboard.TargetName="ellipse"

                From="1"

                To="0"

                AutoReverse="True"

                RepeatBehavior="Forever"

                Duration="0:0:2">

            </DoubleAnimation>

        </Storyboard>

    </StackPanel.Resources>

</StackPanel>

<Ellipse x:Name="ellipse" Fill="White"

PointerPressed="Animation_Begin" Height="200" Width="300" Margin="200,100,200,100"/>        

以上代码在StackPanel元素的资源字典StackPanel.Resources中添加一个作为动画资源的Storyboard元素，并命名为storyboard，以便在后台文件中调用storyboard对象的Begin方法启动动画。然后在Storyboard 元素中添加一个DoubleAnimation动画，并设置DoubleAnimation动画控制的属性为Opacity。接着设置From属性的值为1、To属性的值为0，表示Opacity属性的值会从1变到0，即产生由亮变暗的动画效果。然后分别设置动画对象DoubleAnimation的AutoReverse和RepeatBehavior属性值为True和Forever，这样动画就可以无限次的正反交替播放。完成了Storyboard元素相关属性的设置之后，下面继续在原有的Grid元素中添加一个名为“ellipse”的Ellipse元素作为动画目标，为Ellipse元素的PointerPressed事件定义一个名为“Animation_Begin”的事件处理方法，当触发此事件时将动画启动。最后设置Storyboard元素的TargetName属性值为ellipse，将动画效果定位到Ellipse元素上。

接下来在后台代码中添加Animation_Begin事件处理方法，代码如下所示：

private void Animation_Begin (Object sender, PointerRoutedEventArgs e)

{

      storyboard.Begin();

}

        Animation_Begin方法中的代码很简单，只需调用storyboard对象的Begin方法就能够启动动画。

运行此页面，单击屏幕中的椭圆会触发其事件处理方法，可以看到椭圆产生了亮暗交替变换的动画效果，如图10-5所示。

图10-5 椭圆控件亮暗交替变换动画效果图

从图10-5中可以看到，椭圆最初处于最亮状态，动画开始时，它会逐渐变暗，直到彻底看不见，然后椭圆还会以相反方向进行亮暗变化，这样就实现了椭圆亮暗交替变化的动画效果。

在上面的示例中读者已经知道如果要对演示图板动画加以控制，需要在后台文件中添加相应的事件处理方法。例如可以调用Storyboard对象的Begin方法可以启动动画，除此之外还可以调用Storyboard对象的Pause 、Resume 和Stop方法来控制动画的暂停、恢复和停止。

值得注意的是，如果产生的动画效果影响了界面的布局，例如改变了元素的宽度、高度或者改变了元素在界面中的位置，此时要将动画对象的EnableDependentAnimation属性值设置为True，这样才能确保动画能正常播放。下面针对这种情况，为椭圆添加一个PointAnimation动画使界面中的椭圆实现位置移动的动画效果。

在一个打开的Windows 应用商店项目中新建一个空白页，并命名为PointAnimationPage。

双击打开此页面的PointAnimationPage.xaml文件，在Grid原有的元素中添加如下代码。

<Canvas>

    <Canvas.Resources>

        <Storyboard  x:Name="storyboard">

            <PointAnimation

                EnableDependentAnimation="True"

               Storyboard.TargetProperty="Center"

                Storyboard.TargetName="AnimatedEllipseGeometry"

                Duration="0:0:5"

                From="30,400"

                To="400,0"

                RepeatBehavior="Forever"/>

        </Storyboard >

    </Canvas.Resources>

</Canvas>

<Path Fill="Red">

    <Path.Data>

        <!--显示一个椭圆，中心点是（20，20），横半轴为15，纵半轴为15 -->

        <EllipseGeometry x:Name="AnimatedEllipseGeometry"

Center="30,400" RadiusX="30" RadiusY="30"/>

    </Path.Data>

</Path>

<StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">

    <!--启动动画的按钮 -->

    <Button Click="Animation_Begin" Width="80" Height="40" Margin="2" Content="开始动画"/>

    <!--暂停动画的按钮-->

    <Button Click="Animation_Pause" Width="80" Height="40" Margin="2" Content="暂停动画"/>

    <!--恢复动画的按钮-->

    <Button Click="Animation_Resume" Width="80" Height="40" Margin="2" Content="恢复动画"/>

    <!--终止动画的按钮 -->

    <Button Click="Animation_Stop" Width="80" Height="40" Margin="2" Content="终止动画"/>

</StackPanel>

上面的代码首先在Canvas元素的资源字典Canvas.Resources中添加一个作为动画资源的Storyboard元素，并命名为storyboard，以便在后台PointAnimationPage.xaml.cs文件中通过Storyboard对象的相关方法来对动画效果进行控制。接着在Storyboard 元素中添加一个PointAnimation动画，并设置PointAnimation动画控制的属性为Center，定义From属性的值为坐标点（30，400）、To属性的值为坐标点（400，0），表示中心点Center的值会从坐标点（30，400）过渡到坐标点（400，0）。然后又添加了一个与Canvas元素同级的Path元素，同时在Path.Data元素中添加一个名为“AnimatedEllipseGeometry”的EllipseGeometry元素作为动画目标。并设置EllipseGeometry元素的Center属性值为坐标点（20,20），从而确定EllipseGeometry元素的位置，定义RadiusX、RadiusY属性值分别为30像素以指定此元素的大小。接着设置Storyboard元素的TargetName属性值为AnimatedEllipseGeometry，将动画效果定位到EllipseGeometry元素上。最后在Grid元素中添加一个StackPanel元素，其中含有4个按钮，并且每个按钮都定义了用于启动、暂停、恢复和停止动画的单击事件，以便控制的动画的播放状态。

接下来打开PointAnimationPage.xaml.cs文件，为这4个控制动画播放的按钮添加事件处理方法，代码如下所示：

private void Animation_Begin(object sender, RoutedEventArgs e)

{

    storyboard.Begin();

}

private void Animation_Pause(object sender, RoutedEventArgs e)

{

    storyboard.Pause();

}

private void Animation_Resume(object sender, RoutedEventArgs e)

{

    storyboard.Resume();

}

private void Animation_Stop(object sender, RoutedEventArgs e)

{

    storyboard.Stop();

}

上面的代码通过调用storyboard对象的Begin、Pause、Resume和Stop方法，即可实现对动画的播放控制。

运行此页面，单击开始动画、暂停动画、恢复动画、终止动画按钮会触发相应的事件处理方法，从而对椭圆的移动进行控制，动画效果如图10-6所示。

图10-6  PointAnimation动画

从图10-6中可以看到，当单击开始动画按钮时，椭圆会从图左下方的位置沿着固定的坐标向右上方移动。在此示例中，椭圆的起始位置坐标是（30，400），结束位置坐标是（400，0），这说明椭圆向右移动了370像素，向上移动了400像素。

以上示例通过改变EllipseGeometry元素的Center属性值使界面中的椭圆以固定的轨迹进行运动。除此之外，EllipseGeometry元素还有RadiusX和RadiusY两个属性，分别代表椭圆的横半轴和纵半轴，我们还可以在演示图板中添加两个DoubleAnimation动画分别用来控制RadiusX和RadiusY属性值，这样即可实现椭圆放大或者缩小的动画效果。