关键帧动画

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

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

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

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

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

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

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

// When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
 myStoryboard.Begin();
} 

Silverlight 提供了以下关键帧动画类: