Silverlight - 用FromToBy制作基本动画

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

基本动画其中包含了三个最重要的属性：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基本动画。

演示效果如图：

刚开始时的动画：

 

结束时的动画：

 

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

<Canvas x:name="LayoutRoot"Background="White"> <Path x:name="PathAnimate"> <Path.Fill> <RadialGradIEntBrush GradIEntOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradIEntStop color="Black" Offset="0"/> <GradIEntStop x:name="BrushAnimate" Offset="0.5"/> <GradIEntStop color="Chocolate" Offset="1"/> </RadialGradIEntBrush> </Path.Fill> <Path.Data> <EllipseGeometry x:name="EllipseGeometryAnimate"/> </Path.Data> <Path.Triggers> <EventTrigger RoutedEvent="Path.Loaded"> <BeginStoryboard> <Storyboard> <!--控制圆形的水平半径--> <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，表示动画播放完毕后会自动从后向前反向播放，并且是无限制的播放。

总结

以上是内存溢出为你收集整理的Silverlight - 用From/To/By制作基本动画全部内容，希望文章能够帮你解决Silverlight - 用From/To/By制作基本动画所遇到的程序开发问题。

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