Silverlight动画制作之动画概述

Silverlight动画制作之动画概述

动画可能是最炫，最吸引我们眼球的效果了。无论是桌面应用程序还是web应用程序，动画效果一直是我们开发人员追求的目标。动画是Silverlight的核心部分，我们不用关心过多创建时间计时器和事件代码，只需要采用声明UI元素依赖项的方式，我们在XAML文档中定义相关动画对象，然后设置相对应的参数，我们就可以完成播放剧本的编写，编译器会根据剧本生成相应的动画。

大家都知道动画是由一系列画面组成的，每秒播放的画面数量到达人的眼睛临界频率，我们就认为这些画面是连续的。然而Silverlight动画的制作方式是利用属性来实现的，为什么这样子说呢？因为Silverlight动画是通过间隔时间内持续改变目标对象属性来实现的。所以我们在制作过程中只需要关注执行时间和关键时间的对象状态就行了，不需要绘制任何中间过渡画面。

下面我们通过一个小的示例来说明上面所说的吧！

实现的效果如图：

1）刚开始效果：

我们可以看到一行很小的字体。

2）中间时刻效果：

我们看到这行字体变大了。

3）最后时刻效果：

我们看到这行字体变小了。

 

XAML文档中代码如下：

<TextBlock x:Name="TextBlockAnimated" Text="TextBlockAnimated" Width="300" Height="50">

                     <TextBlock.Foreground>

                            <SolidColorBrush x:Name="TextBlockAnimatedBrush"/>

                     </TextBlock.Foreground>

                     <TextBlock.Triggers>

                            <EventTrigger RoutedEvent="TextBlock.Loaded">

                                   <BeginStoryboard>

                                          <Storyboard>

                                                 <DoubleAnimationUsingKeyFrames

                                                 Storyboard.TargetName="TextBlockAnimated"

                                                 Storyboard.TargetProperty="FontSize"

                                                 Duration="0:0:4" RepeatBehavior="Forever">

                                                        <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>

                                                        <LinearDoubleKeyFrame Value="50" KeyTime="0:0:1"/>

                                                        <LinearDoubleKeyFrame Value="80" KeyTime="0:0:2"/>

                                                        <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3"/>

                                                        <LinearDoubleKeyFrame Value="0" KeyTime="0:0:4"/>

                                                 </DoubleAnimationUsingKeyFrames>

                                                 <ColorAnimation Storyboard.TargetName="TextBlockAnimatedBrush"

                                                  Storyboard.TargetProperty="Color"

                                                  From="Black" To="White" Duration="0:0:4"

                                                  RepeatBehavior="Forever">                                                       

                                                 </ColorAnimation>                                                       

                                          </Storyboard>

                                   </BeginStoryboard>

                            </EventTrigger>

                     </TextBlock.Triggers>

              </TextBlock>

下面我们来分部说明这段代码的含义吧！

1）首先我们声明了文本元素TextBlock，并且给TextBlock的Triggers属性进行复制，该属性的作用是获得对象上的时间触发器EventTriggers集合，我们可以在这个集合内部添加多个触发器对象，一旦客户端事件满足我们定义的触发器条件，就会执行内部的代码。

2）第二步我们通过事件来控制情节串联图版Storyboard中的动画。这里需要注意的是Silverlight仅能够支持一种触发器操作—<BeginStoryboard>。BeginStoryboard属性表示情节串联图版，它的作用相当于动画的执行脚本。Storyboard还有两个很重要的附加属性：Storyboard.TargetName（表示目标元素）和Storyboard.TargetProperty（表示目标属性）。

3）在我们这个示例中，我们添加了两个动画对象，一个用来使文本元素字号变大再变小的DoubleAnimationUsingKeyFrames和改变前景色ColorAnimation。我们用DoubleAnimationUsingKeyFrames对象操作字体大小，在4秒的动画时间内我们定义的字体从0到50到80到100最后到0。我们用ColorAnimation对象操作字体文本前景色的改变。在4秒的动画时间内从黑色变成白色。

需要注意的是我们这里使用的DoubleAnimationUsingKeyFrames和ColorAnimation属于不同的动画类型。Silverlight提供了两种动画：From/To/By基本动画和Key-Frame关键帧动画。From/To/By基本动画可以制作指定时间内对象从起始状态到结束状态之间的变化过程，这些变化只能是有规律的匀速变化。Key-Frame关键帧动画能够使对象属性在任意值之间变化，不局限于起始和结束的值。变化过程中每一个状态称作关键帧。