【WPF学习】第五十五章基于路径的动画

　　基于路径的动画使用pathgeometry对象设置属性。尽管原则上基于路径的动画也能用于修改任何适当数据类型的属性，但当动态改变与位置相关的属性时最有用。实际上，基于路径的动画类主要用于帮助沿着一条路径移动可视化对象。

　　正如在“【wpf学习】第四十三章路径和几何图形”学过的，pathgeometry对象描述可包含直线、弧线以及曲线的图形。下图显示的示例具有一个pathgeometry对象，该对象包含两条弧线以及一条将最后定义的点连接到起点的直线段。这样就创建了一条闭合的路线，一个小的矢量图像以恒定不变的速度在这条路径上运动。

　　下图显示的示例具有一个pathgeometry对象，该对象包含两条弧线以及一条将最后定义的点连接到起点的直线段。这样就创建了一条闭合的路线，一个小的矢量图像以恒定不变的速度在这一条路径上运动。

　　创建这个示例很容易。第一步是构建希望使用的路径。在这个示例中，路径被定义为资源：

<window.resources>
        <pathgeometry x:key="path">
            <pathfigure isclosed="true">
                <arcsegment point="100,200" size="15,10" sweepdirection="clockwise"></arcsegment>
                <arcsegment point="400,50" size="5,5" ></arcsegment>
            </pathfigure>
        </pathgeometry>
</window.resources>

　　这个示例显示了路径，当然这不是必须的。这样可以清晰地看到图像沿着定义的路径运动。为显示路径，只需要添加一个使用上面定义的集合图形的path元素：

<path stroke="red" strokethickness="1" data="{staticresource path}" canvas.top="10" canvas.left="10">
</path>

　　path元素被放置到canvas面板上，另外，希望沿着该路径运动的image元素也被放在canvas面板上：

<image name="image">
            <image.source>
                <drawingimage>
                    <drawingimage.drawing>
                        <geometrydrawing brush="lightsteelblue">
                            <geometrydrawing.geometry>
                                <geometrygroup>
                                    <ellipsegeometry center="10,10" radiusx="9" radiusy="4" />
                                    <ellipsegeometry center="10,10" radiusx="4" radiusy="9" />
                                </geometrygroup>
                            </geometrydrawing.geometry>
                            <geometrydrawing.pen>
                                <pen thickness="1" brush="black" />
                            </geometrydrawing.pen>
                        </geometrydrawing>
                    </drawingimage.drawing>
                </drawingimage>
            </image.source>
        </image>

　　最后创建移动图像的动画。为移动图像，需要调整canvas.left和canvas.top属性。doubleanimationusingpath动画类可完成该任务，但需要两个动画——一个用于处理canvas.left属性，另一个用于处理canvas.top属性。下面是完整的故事板：

<storyboard>
        <doubleanimationusingpath storyboard.targetname="image"
                                      storyboard.targetproperty="(canvas.left)"
                                     pathgeometry="{staticresource path}"
                                      duration="0:0:5" repeatbehavior="forever" source="x" />
         <doubleanimationusingpath storyboard.targetname="image"
                                      storyboard.targetproperty="(canvas.top)"
                                     pathgeometry="{staticresource path}"
                                      duration="0:0:5" repeatbehavior="forever" source="y" />
</storyboard>

　　正如可能看到的，当创建基于路径的动画时，不是提供开始值和结束值，而是通过pathgeometry属性指定希望使用的pathgeometry对象。一些基于路径的动画类，如pointanimationusingpath类，可同时为目标属性应用x和y组件。但doubleanimationusingpath类不具备这一能力，因为它只能设置双精度值。结果，还需要将source属性设置为x或y，以指示是使用路径的x坐标还是y坐标。

　　尽管基于路径的动画可使用包含贝塞尔曲线的路径，但它与上一章介绍的关键样条动画区别很大。在关键样条动画中，贝塞尔曲线描述动画进度和时间之间的关系，从而可以创建变速动画。但在基于路径的动画中，由直线和曲线的集合构成的路径决定了将用于动画属性的值。

黄山市民网：https://www.huangshanshimin.com/

相关文章