Silverlight学习笔记--动画效果-- 渐变风格方式动画

概述按照动画的形成方式，Silverlight 动画可以分为两种： 渐变风格方式（确定开始和结束，然后按照一个固定的频率完成渐变） ； 关键帧生成方式 （设定若干中间帧，可以按照指定的节奏来变化，节奏可以忽快忽慢）； 本文重点演示渐变风格方式。关键帧生成方式下篇再涉及。 要实现一个渐变风格动画，一般需要下面4步，我们下面的演示是实现一个小球从左到右来回移动的动画效果： 建立动画的4个步骤： 创建一个对

按照动画的形成方式，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， 用于获取或设置将激活此触发器的 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秒钟。

 

定义动画，

在 Storyboard  中增加下面代码：

< DoubleAnimation
    Storyboard. Targetname= "ellipse"
    Storyboard. TargetProperty= "(Canvas.left)"
    To= "500" Duration= "0:0:3" />

这里的例子创建了一个DoubleAnimation动画，DoubleAnimation用于为包含双精度值的属性（例如，Canvas.left 等维度属性或不透明度等可视化属性）设置动画效果。

上面例子中的参数的意思分别如下：

Storyboard.Targetname : 动画元素的名称(为此需要赋一个name属性),即第一步我们建立的那个元素。

Storyboard.TargetProperty ： 动画元素的属性。
提示：Storyboard.TargetProperty的值是接收动态值的属性的名称，如果属性包含点(如Canvas.left或Canvas.top)，
需要在圆括号内使用完整名称，如(Canvas.left)或(Canvas.top)。

Duration ： 获取或设置此时间线播放的时间长度，而不是计数重复。语法为：hh:mm:ss(小时，分钟，秒)

To ： 获取或设置动画的结束值。

设置双精度值动画效果时，可以在动画开始时使用 From 值指定该值，然后将其更改为 To 值（绝对目标），
或更改为 By 值（相对目标）。例如，如果要将某个项目的 Canvas.left 属性从 100（接近屏幕的左端）移动至 500，
您可以将 From 值设置为 100，将 To 值设置为 500 或将 By 值设置为 400。请注意，如果您同时设置了 To 值和 By 值，
则优先采用 To 属性，而忽略 By 属性。同样，如果此矩形已经位于 From 的目标位置，则不需要再指定 From 属性。

除了 DoubleAnimation  渐变风格动画我们还可以使用 colorAnimation ，PointAnimation 。colorAnimation ，PointAnimation 动画中的 By ，From ，To ，Duration，Storyboard.Targetname，Storyboard.TargetProperty含义类似。就不再重复含义介绍了。下面就是一个完整演示这三种动画的代码，演示效果看本文最后的演示：

<UserControl	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"	x:Class="MySilverlight3Study_Animation1.MainPage"	WIDth="640" Height="300">	<Canvas>     <Canvas.Triggers>        	<EventTrigger RoutedEvent="Canvas.Loaded">        		<BeginStoryboard>        			<Storyboard autoReverse="True" RepeatBehavior="Forever">        				<DoubleAnimation         					Storyboard.Targetname="ellipse"        					Storyboard.TargetProperty="(Canvas.left)"        					To="500" Duration="0:0:3" />					<colorAnimation						Storyboard.Targetname="rectangle"						Storyboard.TargetProperty="(Fill).(color)"						To="Black" Duration="0:0:3" />					<PointAnimation 						Storyboard.Targetname="ellipseGeometry"						Storyboard.TargetProperty="Center"						By="400,-150" Duration="0:0:3" />	        			    Storyboard>        		    BeginStoryboard>      EventTrigger>       Canvas.Triggers> <Ellipse x:name="ellipse" Height="20" WIDth="20" Canvas.left="31" Canvas.top="31" Fill="#FFBE4343" /> <Rectangle x:name="rectangle" Fill="#FFC7CFE6" Height="31" WIDth="74" Canvas.left="31" Canvas.top="87"/> <Path Fill="Blue"> <Path.Data> <EllipseGeometry x:name="ellipseGeometry" Center="36,250" RadiusX="10" RadiusY="10" />        Path.Data>         Path>          Canvas>           UserControl>

 

当然上面所有的代码都可以通过编程实现，但更多时候，我们只是编程实现 EventTrigger 和  BeginStoryboard 这部分，动画元素，故事板，动画定义我们是通过 Blend来编写 Xaml 文件来实现的。

 

参考资料：

Silverlight QuickStart：动画
http://www.cftea.com/docs/Silverlight/quickstart/animations-frames.html

Silverlight 使用 XAML 和 Expression Blend 创建动画
http://msdn.microsoft.com/zh-cn/magazine/cc721608.aspx

运行 Storyboard 时进行控制
http://msdn.microsoft.com/zh-cn/library/cc295328.aspx

触发器概述
http://msdn.microsoft.com/zh-cn/library/cc294856.aspx

silverlight 动画
http://www.cnblogs.com/njnudt/archive/2008/05/20/1203347.html

简单的Silverlight动画
http://www.cnblogs.com/nasa/archive/2009/06/04/silverlight-mpeo.html
稳扎稳打Silverlight(11) - 2.0动画之colorAnimation,DoubleAnimation,PointAnimation,内插关键帧动画
http://www.cnblogs.com/webabcd/archive/2008/11/06/1327758.html

程序效果如下：

总结

以上是内存溢出为你收集整理的Silverlight学习笔记--动画效果-- 渐变风格方式动画全部内容，希望文章能够帮你解决Silverlight学习笔记--动画效果-- 渐变风格方式动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。