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.Resources>

<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.Resources>

<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.Data>

<EllipseGeometry x:Name="AnimatedEllipseGeometry"

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

</Path.Data>

</Path>

</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属性值，这样即可实现椭圆放大或者缩小的动画效果。