Silverlight & Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)

正如你所看到的，Blend是一个非常强大的节约时间的设计工具，在Blend下能够设计出很 多满意的动画作品，或许他具体是怎么实现的，通过什么方式实现的我们还是一无所知。本 篇将续前面几篇基础动画之上，详细介绍Silverlight里提供故事板（StoryBorards）的属性 和各种不同类型的动画（Animations）的详细知识点，揭晓在Blend下设计动画的内幕故事。

一、故事板（StoryBoard）属性

Silvelight中的故事板（StoryBoard）提供了管理时间线的功能接口，可以用来控制一个 或多个Silverlight动画进程，故我也称其为动画时间线容器。如下XAML代码块演示了通过 StoryBoard来管理了名为GreenBall的元素在X坐标方向上的偏移变换动画。

<Storyboard　x:Name="MoveBall">
　　　　 <DoubleAnimationUsingKeyFrames　BeginTime="00:00:00"　 Storyboard.TargetName="GreenBall"
　　　　　　　　 Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[3].(TranslateTransform.X)">
　　　　　　　　 <EasingDoubleKeyFrame　KeyTime="00:00:02"　Value="540"/>
　　　　 </DoubleAnimationUsingKeyFrames>
</Storyboard>

StoryBoard提供了六个常用的动画属性选项，它们分别是： AutoReverse,BeginTime,Duration,FillBehavior,RepeatBehavior,SpeedRatio。通过这六个 属性可以用来控制动画的基本行为动作，比如想要实现动画的缓冲时间，就需要用到 Duration属性；设置动画的开始时间则用 BeginTime；如果动画执行完后根据执行路线反向 执行到原始状态则需要使用AutoReverse;如果需要设置动画的运行速度则使用 SpeedRatio就 可以完成。以下代码块演示了AutoReverse属性的使用，动画运行完后将按着原来的运行路线 进行反向运行。更多详细可参考这篇博文介绍：《动画基础快速入门Animation》或者MSDN。

<Storyboard　x:Name="MoveBall"　AutoReverse="True">
　　　　 <DoubleAnimationUsingKeyFrames　BeginTime="00:00:00"　 Storyboard.TargetName="GreenBall"
　　　　　　　　 Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[3].(TranslateTransform.X)">
　　　　　　　　 <EasingDoubleKeyFrame　KeyTime="00:00:02"　Value="540"/>
　　　　 </DoubleAnimationUsingKeyFrames>
</Storyboard>

Storyboard的属性是可以组合应用的，如上代码块给动画设置了AutoReverse属性，使其 在动画执行完后通过原来的运行路径进行回滚动画，可以给该动画时间线容器添加一个 BeginTime属性，使其在程序加载后5秒钟才开始执行动画，这样就使用到了两个属性，如下 代码块：

<Storyboard　x:Name="MoveBall"　AutoReverse="True"　 BeginTime="00:00:05">
　　　　 ......
</Storyboard>