按照动画的形成方式,Silverlight 动画可以分为两种:
- 渐变风格方式(也可以叫From/To/By 动画)(确定开始和结束,然后按照一个固定的频率完成渐变) ;
- 关键帧生成方式 (设定若干中间帧,可以按照指定的节奏来变化,节奏可以忽快忽慢);
渐变式动画的讲解请看博客: 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) 的关键样条
上面的关键帧在开始时快速运动,再减速,然后再次加速,直到结束。
更多演示参看: 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(); }
例子的演示效果如下,点击方块,开始动画:
style="width: 600px; height: 100px" src="http://silverlight.services.live.com/invoke/111821/Hongjunguo%20Study%20Silverlight%20Animation%2002/iframe.html" frameborder="0" scrolling="no">
代码说明:
我们对一个正方形的进行二维坐标平移来实现动画,动画是通过分帧的方式来定义实现的。
前3秒,平滑过渡,然后停下来,一直到第4秒,突然变化,然后加速运动。
LinearDoubleKeyFrame : 通过使用线性内插,可以在前一个关键帧的 Double 值及其自己的 Value 之间进行动画处理。
DiscreteDoubleKeyFrame : 离散关键帧,在值之间产生突然"跳跃"(无内插算法)。换言之,已经过动画处理的属性在到达此关键帧的关键时间后才会更改,此时已经过动画处理的属性会突然转到目标值。
SplineDoubleKeyFrame : 通过 贝塞尔 曲线方式来定义动画变化节奏。详细看前面的介绍。
通过上面的代码,我们可以看到完成关键帧动画有以下3个步骤:
- 首先声明一个Duration对象
- 在每个节奏点上加入一个KeyFrame
- 把动画效果和元素进行绑定
不同的属性类型有不同的动画类型。关键帧动画也是类似,如下是关键帧对应的分类。
属性类型 | 对应的关键帧动画类 | 支持的动画过渡方法 |
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>
执行效果如下:
style="width: 150px; height: 150px" src="http://silverlight.services.live.com/invoke/111821/Hongjunguo%20Study%20Silverlight%20Animation%2003/iframe.html" frameborder="0" scrolling="no">
参考资料:
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