在Silverlight中制作路径动画VIP专享VIP免费

在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代码如下：