概述Silverlight
动画制作之 From/To/By 基本动画 From/To/By 基本动画其中包含了三个最重要的属性: From ; To ; By 。 From 指的是对象目标属性的起始值, To 指的是对象目标属性的结束值, By 指的是结束状态相对于起始状态的偏移量。这里我们需要注意的是动画对象不能同时包括 To 和 By 两个属性,否则编译器会忽略掉 By 属性的作用。 Silve
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 基本动画。 演示效果如图: 刚开始时的动画: 结束时的动画: 我们可以从两张图很明显看到这个圆形从半径,颜色,位置上都发生了变化。下面我们通过代码看一下这样的效果是如何实现的。 <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基本动画所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
评论列表(0条)