Silverlight：关键帧动画

本主题介绍 Silverlight 中的关键帧动画。通过关键帧动画，您可以使用两 个以上的目标值制作动画，并控制动画的内插方法。

先决条件

若要了解本概述，应先熟悉 Silverlight 动画。

什么是关键帧动 画？

与 From/To/By 动画类似，关键帧动画以动画形式显示了目标属性的值。 它通过其 Duration 创建其目标值之间的过渡。但是，From/To/By 动画创建两个 值之间的过渡，而单个关键帧动画可以创建任意数量的目标值之间的过渡。

与 From/To/By 动画不同，关键帧动画没有设置其目标值所需的 From、 To 或 By 属性。而是使用关键帧对象描述关键帧动画的目标值。若要指定动画的 目标值，需要创建关键帧对象并将其添加到动画的 KeyFrames 属性。动画运行时 ，将在您指定的帧之间过渡。

某些关键帧方法除支持多个目标值外，还支 持多个内插方法。动画的内插方法定义了从某个值过渡到下一个值的方式。有三 种内插类型：离散、线性和样条。

若要使用关键帧动画进行动画处理，需 要完成下列步骤：

按照对 From/To/By 动画使用的方法声明动画并指定其 Duration。

对于每一个目标值，创建相应类型的关键帧，设置其值和 KeyTime，并将其添加到动画的 KeyFrames 集合内。

按照对 From/To/By 动画使用的方法，将动画与属性相关联。

下面的示例使用 DoubleAnimationUsingKeyFrames 对象对跨屏幕的 Rectangle 元素进行动画处理 。

XAML

<Canvas>
　　　　 <Canvas.Resources>
　　　　　　　　<Storyboard　 x:Name="myStoryboard">
　　　　　　　　　　　　<!--　Animate 　the　TranslateTransform's　X　property
　　　　　　　　　　　 from　0　to　350,　then　50,　then　200　over　10　seconds.　-->
　　　　　　　　　　　　<DoubleAnimationUsingKeyFrames
　　　 　　　　Storyboard.TargetName="MyAnimatedTranslateTransform"
　　 　　　　　Storyboard.TargetProperty="X"
　　　　　　　 Duration="0:0:10">
　　　　　　　　　　　　　　　　<!--　 Using　a　LinearDoubleKeyFrame,　the　rectangle　moves
　　　　　 　　　　　　steadily　from　its　starting　position　to　500　over
　　　　　　　　　　　the　first　3　seconds.　　-->
　　　　 　　　　　　　　　　　　<LinearDoubleKeyFrame　Value="500"　 KeyTime="0:0:3"　/>
　　　　　　　　　　　　　　　　<!--　 Using　a　DiscreteDoubleKeyFrame,　the　rectangle　suddenly
　　　 　　　　　　　　appears　at　400　after　the　fourth　second　of　the　 animation.　-->
　　　　　　　　　　　　　　　　 <DiscreteDoubleKeyFrame　Value="400"　KeyTime="0:0:4"　/>
　 　　　　　　　　　　　　　　　<!--　Using　a　SplineDoubleKeyFrame, 　the　rectangle　moves
　　　　　　　　　　　back　to　its　 starting　point.　The　animation　starts　out　slowly　at　
　　　 　　　　　　　　first　and　then　speeds　up.　This　KeyFrame　ends　 after　the　6th
　　　　　　　　　　　second.　-->
　　　 　　　　　　　　　　　　　<SplineDoubleKeyFrame　KeySpline="0.6,0.0 　0.9,0.00"　Value="0"　KeyTime="0:0:6"　/>
　　　　　　　　　 　　　</DoubleAnimationUsingKeyFrames>
　　　　　　　　 </Storyboard>
　　　　</Canvas.Resources>
　　　 　<Rectangle　MouseLeftButtonDown="Mouse_Clicked"　Fill="Blue"
Width="50"　Height="50">
　　　　　　　　 <Rectangle.RenderTransform>
　　　　　　　　　　　　 <TranslateTransform　x:Name="MyAnimatedTranslateTransform"　X="0"　 Y="0"　/>
　　　　　　　　</Rectangle.RenderTransform>
　　　　</Rectangle>
</Canvas>

VB

'　When　the　user　clicks　the　Rectangle,　 the　animation
'　begins.
Private　Sub　Mouse_Clicked(ByVal　 sender　As　Object,　ByVal　e　As　MouseEventArgs)
　　　　 myStoryboard.Begin()
End　Sub

就像在 From/To/By 动画中一样，使用 Storyboard 对象将关键帧动画应用于属性。