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

上一篇:C#入门经典第五版之变量的更多内容编码题训练


下一篇:Objective-C的IO流