按照动画的形成方式，Silverlight 动画可以分为两种：
渐变式动画的讲解请看博客： Silverlight学习笔记--动画效果-- 渐变风格方式动画 本文介绍关键帧动画：
与渐变（From/To/By ）动画类似，关键帧动画以动画形式显示了目标属性的值。它通过定义其持续时间（Duration属性）创建其目标值之间的过渡。但是，与From/To/By 动画创建两个值之间的过渡不同，单个关键帧动画可以创建任意数量的目标值之间的过渡。
与 From/To/By 动画不同，关键帧动画没有设置其目标值所需的 From、To 或 By 属性。而是使用关键帧对象描述关键帧动画的目标值。若要指定动画的目标值，需要创建关键帧对象并将其添加到动画的 KeyFrames 属性。动画运行时，将在您指定的帧之间过渡。
几种关键帧动画的动画过度方法（Interpolation Methods）
关键帧动画从一帧到另外一帧，是如何过度的，这个过度策略就是 Interpolation Methods ，MSDN上的翻译竟然叫“内插方法”，我晕，翻译真垃圾。这个过度策略有三种方式：线性（linear interpolation 线性内插）、离散（discrete Interpolation 离散内插）和样条（Splined Interpolation 样条内插）。
linear interpolation 线性
使用线性过度，指定时间段内，动画的播放速度将是固定的。比如，如果关键帧段在 5 秒内， 从 0 过渡到 10，则该动画会在指定的时间产生如下表所示的值。
| 时间 | 输出值 |
| 0 | 0 |
| 1 | 2 |
| 2 | 4 |
| 3 | 6 |
| 4 | 8 |
| 4.25 | 8.5 |
| 4.5 | 9 |
| 5 | 10 |
discrete Interpolation 离散
使用离散过度，动画函数将从一个值跳到下一个没有内插的值。如果关键帧段在 5 秒内从 0 过渡到 10，则该动画会在指定的时间产生如下表所示的值。动画在持续期间恰好结束之前不会更改其输出值，一直到到了时间点，才会修改。
| 时间 | 输出值 |
| 0 | 0 |
| 1 | 0 |
| 2 | 0 |
| 3 | 0 |
| 4 | 0 |
| 4.25 | 0 |
| 4.5 | 0 |
| 5 | 10 |
Splined Interpolation 样条
样条过度可用于达到更现实的计时效果。由于动画通常用于模拟现实世界中发生的效果，因此您可能需要精确地控制对象的加速和减速，并且需要严格地对计时段进行操作，这时你就会用到样条关键帧。样条关键帧比起其他关键帧，多一个 KeySpline 属性，用于获取或设置用于定义此关键帧的动画进度的两个控制点。
若要了解 KeySpline 的工作原理，首先需要了解三次方贝塞尔曲线。一条三次方贝塞尔曲线由一个起点、一个终点和两个控制点来定义。
KeySpline 中的两个坐标定义这两个控制点。在描述关键样条时，贝塞尔曲线的起点始终为 0，终点始终为 1，这也就是只定义两个控制点的原因。所生成的曲线指定如何在一个时间段内内插动画；也就是说，该曲线表示该时间段内动画的目标属性的变化速率。
下面是来自MSDN的演示：
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
控制点为 (0.0,1.0) 和 (1.0,0.0) 的关键样条
_thumb.png "Cc189038_JOLT_local_-624916683_graphicsmm_keyspline_0_1_1_0(zh-cn,VS_95)")
上面的关键帧在开始时快速运动，再减速，然后再次加速，直到结束。
更多演示参看： http://msdn.microsoft.com/zh-cn/library/cc189038(VS.95).aspx 以及微软的演示 KeySpline 的例子，在这里可以看到： 运行此示例
例子
下面我们先看一个简单例子:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="MySilverlight3Study_Animation2.MainPage" Width="640" Height="480"> <Canvas> <Canvas.Resources> <Storyboard x:Name="myStoryboard"> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyAnimatedTranslateTransform" Storyboard.TargetProperty="X" Duration="0:0:10"> <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" /> <discreteDoubleKeyFrame Value="400" KeyTime="0:0:4" /> <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:8" /> DoubleAnimationUsingKeyFrames> Storyboard> Canvas.Resources> <Rectangle MouseLeftButtonDown="Mouse_Clicked" Fill="BlueViolet" Width="50" Height="50"> <Rectangle.RenderTransform> <TranslateTransform x:Name="MyAnimatedTranslateTransform" X="20" Y="20" /> Rectangle.RenderTransform> Rectangle> Canvas> UserControl>
事件代码
private void Mouse_Clicked(object sender,System.Windows.Input.MouseButtonEventArgs e) { myStoryboard.Begin(); }
例子的演示效果如下，点击方块，开始动画：
代码说明：
我们对一个正方形的进行二维坐标平移来实现动画，动画是通过分帧的方式来定义实现的。
前3秒，平滑过渡，然后停下来，一直到第4秒，突然变化，然后加速运动。
LinearDoubleKeyFrame : 通过使用线性内插，可以在前一个关键帧的 Double 值及其自己的 Value 之间进行动画处理。
discreteDoubleKeyFrame ： 离散关键帧，在值之间产生突然"跳跃"（无内插算法）。换言之，已经过动画处理的属性在到达此关键帧的关键时间后才会更改，此时已经过动画处理的属性会突然转到目标值。
SplineDoubleKeyFrame ： 通过 贝塞尔 曲线方式来定义动画变化节奏。详细看前面的介绍。
通过上面的代码，我们可以看到完成关键帧动画有以下3个步骤：
不同的属性类型有不同的动画类型。关键帧动画也是类似，如下是关键帧对应的分类。
| 属性类型 | 对应的关键帧动画类 | 支持的动画过渡方法 |
| Color | ColorAnimationUsingKeyFrames | 离散、线性、样条 |
| Double | DoubleAnimationUsingKeyFrames | 离散、线性、样条 |
| Point | PointAnimationUsingKeyFrames | 离散、线性、样条 |
| Object | ObjectAnimationUsingKeyFrames | 离散 |
ObjectAnimationUsingKeyFrames 很强大，我可以可以修改元素的任何属性，下面就是一个简单的例子：
例子使用了 ObjectAnimationUsingKeyFrames 对 Rectangle 的 Fill 属性进行动画处理。此动画按如下方式使用两个关键帧：
1.通过使用 discreteObjectKeyFrame，Rectangle 的 Fill 属性会在动画的前两秒之后突然更改为 LinearGradientBrush。
2.在动画的第三秒之后，Fill 属性会突然更改为另一个 LinearGradientBrush，然后一直保持到动画结束（总共四秒）。
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="MySilverlight3Study_Animation2.MainPage" Width="120" Height="120"> <StackPanel> <StackPanel.Triggers> <EventTrigger RoutedEvent="StackPanel.Loaded"> <BeginStoryboard> <Storyboard x:Name="myStoryboard"> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="animatedRectangle" Storyboard.TargetProperty="Fill" Duration="0:0:4" RepeatBehavior="Forever"> <ObjectAnimationUsingKeyFrames.KeyFrames> <discreteObjectKeyFrame KeyTime="0:0:2"> <discreteObjectKeyFrame.Value> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="0.5" /> <GradientStop Color="Red" Offset="1.0" /> LinearGradientBrush.GradientStops> LinearGradientBrush> discreteObjectKeyFrame.Value> discreteObjectKeyFrame> <discreteObjectKeyFrame KeyTime="0:0:3"> <discreteObjectKeyFrame.Value> <RadialGradientBrush GradientOrigin="0.75,0.25"> <RadialGradientBrush.GradientStops> <GradientStop Color="White" Offset="0.0" /> <GradientStop Color="MediumBlue" Offset="0.5" /> <GradientStop Color="Black" Offset="1.0" /> RadialGradientBrush.GradientStops> RadialGradientBrush> discreteObjectKeyFrame.Value> discreteObjectKeyFrame> ObjectAnimationUsingKeyFrames.KeyFrames> ObjectAnimationUsingKeyFrames> Storyboard> BeginStoryboard> EventTrigger> StackPanel.Triggers> <Rectangle x:Name="animatedRectangle" Width="100" Height="100" Fill="Aqua" Margin="10" /> StackPanel> UserControl>
执行效果如下：
参考资料：
Animations
http://silverlight.net/learn/quickstarts/animations/
Silverlight 使用 XAML 和 Expression Blend 创建动画
http://msdn.microsoft.com/zh-cn/magazine/cc721608.aspx
关键帧动画
http://msdn.microsoft.com/zh-cn/library/cc189038(VS.95).aspx
稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation,DoubleAnimation,PointAnimation,内插关键帧动画
http://www.cnblogs.com/webabcd/archive/2008/11/06/1327758.html
使用 XAML 和 Expression Blend 创建动画
http://msdn.microsoft.com/zh-cn/magazine/cc721608.aspx
ObjectAnimationUsingKeyFrames 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.animation.objectanimationusingkeyframes(VS.95).aspx
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。