在Silverlight中制作路径动画Silverlight不像WPF一样能够支持基于路径的动画,想要在Silverlight中制作路径动画,必须基于关键帧,Silverlight提供了DoubleAnimation、PointAnimation、ColorAnimation来实现内插关键帧动画,相应地,Silverlight还提供了DoubleAnimationUsingKeyFrames、PointAnimationUsingKeyFrames、ColorAnimationUsingKeyFrames来进行多个值之间的内插动画处理。1、简单介绍:DoubleAnimation:在两个Double值(元素的一维属性,如X、Y、Angle、Width、Length等)之间做线性内插动画处理;PointAnimation:在两个Point值(元素的二维属性,如几何图形的Center等)之间做线性内插动画处理;ColorAnimation:在两个Color(元素的颜色)值之间做线性内插动画处理。DoubleAnimationUsingKeyFrames:在一组KeyFrame中所设置的多个Double值之间做动画处理;PointAnimationUsingKeyFrames:在一组KeyFrame中所设置的多个Point值之间做动画处理;ColorAnimationUsingKeyFrames:在一组KeyFrame中所设置的多个Color值之间做动画处理。2、通用属性:TargetName:目标名称TargetProperty:目标属性From:开始值To:结束值Duration:间隔时间3、基本方法:Linear:线性内插Discrete:离散内插Spline:样条内插这里我们利用DoubleAnimation来实现路径动画,其基本思路是将DoubleAnimation中的TargetProperty指向运动目标的X和Y坐标,通过线性地改变坐标值来使之按路径运动首先确定一条闭合的路线,一个小的矩形将以在这条路线上运动。第一步,在Silverlight用户页面中构建路径。通过PathSegment类下派生的ArcSegment,BezierSegment,LineSegment,PolyBezierSegment,PolyLineSegment,PolyQuadraticBezierSegment,QuadraticBezierSegment等对象元素可以构建任意形状大小的路径。本例中,我们构建了由7段直线组成的简单路径。路径如图1红线所示:图1Xmal代码如下所示:
第二步,创建动画的故事板。采用DoubleAnimationUsingKeyFrames来实现多个坐标值之间的内插处理,内插方法采用线性内插LinearDoubleKeyFrame。Xmal代码如下:第三步,设置与动画相关联的图形元素。本例中我们使用一个长宽均为50的矩形。Xmal代码如下: