原文:
WPF之基于路径的动画
不是突然想到要做一个路径动画的，是今天谈业务需求的时候偶然谈到的，
一艘船从一个国家到另外一个国家，沿着一条固定的路线前进，就是一个简单的动画效果，以前貌似在书上看到过，所以自己也来做一个。
在网上搜资料发现都是给你看看代码，或者边写边看代码。
认为还是要先研究一下这个东西要如何实现吧，参考资料是《WPF编程宝典》。
其实中心思想还是很简单的，主要是设置对象的Storyboard中DoubleAnimationsUsingPath的PathGeometry属性。
下面这个实例是去则WPF变成宝典之中，因为不太复杂，就随便看看吧~
这个例子里面是对image这个对象进行操作，所谓动画就是去根据路径去改变image的位置，就是Canvas.Left和Canvas.Top，给PathGeometry绑定设定好的路径，然后指定Source是对应的XY轴。
<Window x:Class="Animation.PathBasedAnimation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="PathBasedAnimation" Height="381.6" Width="521.6" > <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> <Window.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <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> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Window.Triggers> <Canvas Margin="10"> <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10"> </Path> <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> </Window>
完全不难，但是我自己还是没有记得，所以写了一篇短短的Blog.
