按照动画的形成方式,Silverlight 动画可以分为两种: * 渐变风格方式(确定开始和结束,然后按照一个固定的频率完成渐变) ;
* 关键帧生成方式 (设定若干中间帧,可以按照指定的节奏来变化,节奏可以忽快忽慢);
本文重点演示渐变风格方式。关键帧生成方式下篇再涉及。
要实现一个渐变风格动画,一般需要下面4步,我们下面的演示是实现一个小球从左到右来回移动的动画效果:
建立动画的4个步骤: * 创建一个对象并找到它。
为了找到他,我们可以使用 x:Name 来给这个对象命名。为何是 x:Name , 请参看我之前的博客: WPF,Silverlight 中的 xmlns,xmlns:x
本文我们是一个红色的园球:
- <Ellipse x:Name="ellipse" Height="20" Width="20"
- Canvas.Left="31" Canvas.Top="31" Fill="#FFBE4343" >
- </Ellipse>
复制代码* 创建一个EventTrigger.
EventTrigger 响应事件的一组触发器。 EventTrigger 对象将在发生指定的路由事件时启动一组 Actions。例如,当Silverlight加载成功后启动一组动画。
EventTrigger 最重要的属性就是 RoutedEvent, 用于获取或设置将xx此触发器的 RoutedEvent。
如果包含此 EventTrigger 的模板或样式没有指定 TargetType 属性,则需要使用 ClassName.EventName 语法通过类名限定事件名称。
目前Silverlight只支持一个事件:Element.Loaded,Element是包含trigger的对象的名称(这里是 Canvas)。
- <Canvas>
- <Canvas.Triggers>
- <EventTrigger RoutedEvent="Canvas.Loaded">
- </EventTrigger>
- </Canvas.Triggers>
- <Ellipse x:Name="ellipse" Height="20" Width="20"
- Canvas.Left="31" Canvas.Top="31" Fill="#FFBE4343" >
- </Ellipse>
- </Canvas>
复制代码* 使用 BeginStoryboard 和 Storyboard
BeginStoryboard 是一个包含 Storyboard 对象的触发器操作,该操作可启动 Storyboard 并将其动画分发给动画的目标对象和属性。
Storyboard 对象包含动画定义。 当定义动画时,您只需在 EventTrigger 定义内嵌入这些对象。
- <Canvas>
- <Canvas.Triggers>
- <EventTrigger RoutedEvent="Canvas.Loaded">
- <BeginStoryboard>
- <Storyboard AutoReverse="True" RepeatBehavior="Forever">
- </Storyboard>
- </BeginStoryboard>
- </EventTrigger>
- </Canvas.Triggers>
- <Ellipse x:Name="ellipse" Height="20" Width="20"
- Canvas.Left="31" Canvas.Top="31" Fill="#FFBE4343" >
- </Ellipse>
- </Canvas>
复制代码上面例子中的两个参数的意思分别如下:
AutoReverse: 获取或设置一个值,该值指示时间线在完成向前迭代后是否按相反的顺序播放。
RepeatBehavior : 获取或设置此时间线的重复行为。默认情况下,时间线的重复次数为 1.0,即播放一次时间线,不进行重复。但是,如果将 Timeline 的 RepeatBehavior 属性设置为 Forever,则时间线将会无限重复。
如果 AutoReverse 属性设置为 true 且 RepeatBehavior 值为 2x 的时间线将向前播放,然后向后播放,再向前播放,然后再向后播放,这样才算完。
除了指定时间线播放的次数,还可以指定希望时间线播放的总时间长度。如果 RepeatBehavior 的值为: 0:0:4 则表示要播放4秒钟。