Silverlight动画制作之From/To/By基本动画

From/To/By基本动画其中包含了三个最重要的属性：From；To；By。From指的是对象目标属性的起始值，To指的是对象目标属性的结束值，By指的是结束状态相对于起始状态的偏移量。这里我们需要注意的是动画对象不能同时包括To和By两个属性，否则编译器会忽略掉By属性的作用。

Silverlight为From/To/By基本动画提供了3个Timeline的派生类：

1）DoubleAnimation：指定时间内，使用线性内插属性处理属性值为Double的动画。

2）ColorAnimation：指定时间内，使用线性内插属性处理属性值为Color的动画。

3）PointAnimation：指定时间内，使用线性内插属性处理属性值为Point的动画。

在使用方法上这3中动画没有太大的区别，唯一的不同点就是我们怎么样给From，To，By属性进行赋值。

下面我们通过一个小的Demo演示一下From/To/By基本动画。

演示效果如图：

刚开始时的动画：

结束时的动画：

我们可以从两张图很明显看到这个圆形从半径，颜色，位置上都发生了变化。下面我们通过代码看一下这样的效果是如何实现的。

<Path.Fill>

<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"

RadiusX="0.5" RadiusY="0.5">

</RadialGradientBrush>

</Path.Fill>

<Path.Data>

</Path.Data>

<Path.Triggers>

<DoubleAnimation

Storyboard.TargetName="EllipseGeometryAnimate"

Storyboard.TargetProperty="RadiusX"

From="25" To="80" Duration="0:0:4"

RepeatBehavior="Forever" AutoReverse="True"/>

<DoubleAnimation

Storyboard.TargetName="EllipseGeometryAnimate"

Storyboard.TargetProperty="RadiusY"

From="25" To="80" Duration="0:0:4"

RepeatBehavior="Forever" AutoReverse="True"/>

<ColorAnimation

Storyboard.TargetName="BrushAnimate"

Storyboard.TargetProperty="Color"

From="Black" To="Chocolate" Duration="0:0:4"

RepeatBehavior="Forever" AutoReverse="True"

SpeedRatio="2"/>

<PointAnimation

Storyboard.TargetName="EllipseGeometryAnimate"

Storyboard.TargetProperty="Center"

From="25,25" To="150,150" Duration="0:0:4"

RepeatBehavior="Forever" AutoReverse="True"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Path.Triggers>

</Path>

</Canvas>

下面我们来说一下这段代码的基本意思：

1）首先我们声明了3个对象，分别是路径图形，放射渐变画刷和椭圆几何图形。这些对象我们只进行了命名，相关属性的设置需要我们在接下来的代码中去实现。

2）接下来我们声明动画播放的触发器事件：Path.Loaded；

3）然后我们向情节串联图版Storyboard中添加动画元素。在我们这个Demo中首先添加了两个DoubleAnimation对象，目的是为了改变椭圆几何图形的水平半径和垂直半径，所以我们设置的目标属性分别是RadiusX和RadiusY。我们还声明了ColorAnimation对象用来改变放射渐变画刷停止点的颜色，除了我们声明From和To之外，还设定了SpeedRatio的值为2，说明其他动画运行一次，颜色却已经变换了2次。最后声明了PointAnimation对象，用于控制椭圆几何图形的中心Center属性。Center属性值类型为Point类型，所以我们声明From和To的时候需要按照坐标形式。

4）最后需要注意的是我们还声明了RepeatBehavior和AutoReverse两个属性，RepeatBehavior属性值为Forever，AutoReverse属性值为True，表示动画播放完毕后会自动从后向前反向播放，并且是无限制的播放。

转载于:https://blog.51cto.com/wzk89/441585

Silverlight动画制作之From/To/By基本动画相关推荐

html5课件动画制作,从此再也不担心课件/动画的开发了！
原标题:从此再也不担心课件/动画的开发了! 数字学习工具定期推送优质地数字学习工具,敬请期待! 本期编辑:王幸娟.冯孟坭.丁雪菲在前面的文章中,我们向大家隆重推出了本公众号运营团队的精诚之作--& ...
gif透明背景动画_火柴人动画制作软件下载_火柴人动画制作软件最新电脑版下载...
火柴人动画制作软件官方版(Pivot Stickfigures Animator)是一款完全免费的火柴人动画制作软件.如果您不具备Flash等专业动画软件制作技能,那么可使用火柴人动画制作 ...
ue4树叶飘落动画_Android：使用属性动画制作器的类似于树叶的动画
ue4树叶飘落动画在上一教程中,我们解释了属性动画通常如何工作. 现在,我们将进一步讲解如何创建属性动画,该动画将为ImageView产生类似于树叶飘落的效果,在其中我们显然将放置树叶的图像. 为此 ...
linux开机动画制作教程,【转载】开机动画的制作过程（bootanimation.zip）
Android bootanimation 制作过程这个东西一直想研究,今天无意发现转过来看看 Android bootanimation制作过程: android启动动画需要一个bootanima ...
动画制作c语言程序,C语言动画制作
#include "user-def.H" void main() { int i; printf("简单动画演示程序\n"); fo ...
CrazyTalk 8 中文版照片会说话动画制作带动作脚本点头眨眼动画制作
资源下载地址 CrazyTalk8带脚本点头眨眼摇头张嘴制作
计算机动画制作实验要求,A074计算机动画制作实验——动画制作初步
计算机动画制作实验--动画制作初步计算机动画制作实验--动画制作初步设计者庞岩单位海南海口实验中学 e_mail technic88@http://doc.xuehai.net 案例名称计 ...
多媒体制作技术心得体会_二维flash课件动画制作的价格是多少
伴随现代多媒体技术的不断发展,多媒体在课堂中的应用也越来越广泛, flash动画在多媒体课件中的分量不断提升.艺虎动画认为,在这样的flash动画课件应用背景下,要对二维flash动画课件制作的价格. ...
3d max用不同目标做关键帧_3D动画制作流程大解析
普通的二维动画发展至今已有许久,基本上所有的画面全靠动画师一张张画出来,小编在这里也就不再多说了. 而现如今,3d动画已经有了独属于自己的地位.业界大牛如皮克斯.迪士尼等公司,已经做出了许多非常优秀的 ...

Silverlight动画制作之From/To/By基本动画

Silverlight动画制作之From/To/By基本动画相关推荐

最新文章

热门文章