按照动画的形成方式,Silverlight 动画可以分为两种:
渐变风格方式(确定开始和结束,然后按照一个固定的频率完成渐变) ;
关键帧生成方式 (设定若干中间帧,可以按照指定的节奏来变化,节奏可以忽快忽慢);
一,渐变风格
要实现一个渐变风格动画,一般需要下面4步,我们下面的演示是实现一个小球从左到右来回移动的动画效果:
建立动画的4个步骤:创建一个对象并找到它。
为了找到他,我们可以使用 x:Name 来给这个对象命名。为何是 x:Name , 请参看我之前的博客: WPF,Silverlight 中的 xmlns,xmlns:x
本文我们是一个红色的园球:
Canvas.Left="31" Canvas.Top="31" Fill="#FFBE4343" >
Ellipse> 创建一个EventTrigger. EventTrigger 响应事件的一组触发器。 EventTrigger 对象将在发生指定的路由事件时启动一组 Actions。例如,当Silverlight加载成功后启动一组动画。 EventTrigger 最重要的属性就是 RoutedEvent, 用于获取或设置将激活此触发器的 RoutedEvent。 如果包含此 EventTrigger 的模板或样式没有指定 TargetType 属性,则需要使用 ClassName.EventName 语法通过类名限定事件名称。 目前Silverlight只支持一个事件:Element.Loaded,Element是包含trigger的对象的名称(这里是Canvas)。
二,关键帧风格
与渐变(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的演示:
KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />控制点为 (0.0, 1.0) 和 (1.0, 0.0) 的关键样条
上面的关键帧在开始时快速运动,再减速,然后再次加速,直到结束。
更多演示参看: 以及微软的演示 KeySpline 的例子,在这里可以看到: 运行此示例
例子
下面我们先看一个简单例子:
xmlns=""
xmlns:x=""
x:Class="MySilverlight3Study_Animation2.MainPage"
Width="640" Height="480">
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
DoubleAnimationUsingKeyFrames>
Storyboard>
Canvas.Resources>
Width="50" Height="50">
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个步骤:首先声明一个Duration对象 在每个节奏点上加入一个KeyFrame 把动画效果和元素进行绑定 不同的属性类型有不同的动画类型。关键帧动画也是类似,如下是关键帧对应的分类。属性类型 对应的关键帧动画类 支持的动画过渡方法 Color ColorAnimationUsingKeyFrames 离散、线性、样条 Double DoubleAnimationUsingKeyFrames 离散、线性、样条 Point PointAnimationUsingKeyFrames 离散、线性、样条 Object ObjectAnimationUsingKeyFrames 离散 ObjectAnimationUsingKeyFrames 很强大,我可以可以修改元素的任何属性,下面就是一个简单的例子:例子使用了 ObjectAnimationUsingKeyFrames 对 Rectangle 的 Fill 属性进行动画处理。此动画按如下方式使用两个关键帧: 1.通过使用 DiscreteObjectKeyFrame,Rectangle 的 Fill 属性会在动画的前两秒之后突然更改为 LinearGradientBrush。 2.在动画的第三秒之后,Fill 属性会突然更改为另一个 LinearGradientBrush,然后一直保持到动画结束(总共四秒)。 xmlns=""
xmlns:x=""
x:Class="MySilverlight3Study_Animation2.MainPage"
Width="120" Height="120">
Storyboard.TargetName="animatedRectangle"
Storyboard.TargetProperty="Fill"
Duration="0:0:4" RepeatBehavior="Forever">
LinearGradientBrush.GradientStops>
LinearGradientBrush>
DiscreteObjectKeyFrame.Value>
DiscreteObjectKeyFrame>
RadialGradientBrush.GradientStops>
RadialGradientBrush>
DiscreteObjectKeyFrame.Value>
DiscreteObjectKeyFrame>
ObjectAnimationUsingKeyFrames.KeyFrames>
ObjectAnimationUsingKeyFrames>
Storyboard>
BeginStoryboard>
EventTrigger>
StackPanel.Triggers>
StackPanel>
UserControl>执行效果如下: 参考资料:Animations 使用 XAML 和 Expression Blend 创建动画 关键帧动画 稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画
http://www.cnblogs.com/webabcd/archive/2008/11/06/1327758.html使用 XAML 和 Expression Blend 创建动画 类
阅读(1606) | 评论(0) | 转发(0) |