WPF中的PathAnimation（路径动画）

WPF中的PathAnimation（路径动画）
周银辉

在WPF中我们可以指定元素按照某一路径运动而形成动画，这称之为路径动画，在SDK中你会发现以[Type]AnimationUsingPath这种形式命名的类，它们就是用来创建路径动画的，其中[Type]表示一系列类型比如double,point等，这与DoubleAnimation等的命名方式一致。
为对路径动画有一个大体上的认识，你可以粘贴下面的代码到XamlPad：

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Name="Window"
Title="Window1"
Width="640" Height="480">

<Window.Resources>
<Storyboard x:Key="Timeline1" RepeatBehavior = "Forever" AutoReverse="True">
<DoubleAnimationUsingPath BeginTime="00:00:00" Duration="00:00:02" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M-68,149.00022 C-39.695816,109.3744 -17.383496,83.397528 39,74.000287 C73.433618,68.261356 91.198465,71.210009 125,89.000273 C157.86626,106.29829 181.01028,123.79991 204,155.00021 C213.7418,168.22121 224.03351,180.96708 234,194.00017 C246.07551,209.79121 257.36571,220.41957 275,231.00014 C285.57406,237.34456 295.83653,242.84775 307,248.00012 C317.8183,252.99318 324.46505,252.89547 337,252.00012 C362.92461,250.14836 384.46844,240.41978 404,225.00014"/>
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath BeginTime="00:00:00" Duration="00:00:02" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M-68,149.00022 C-39.695816,109.3744 -17.383496,83.397528 39,74.000287 C73.433618,68.261356 91.198465,71.210009 125,89.000273 C157.86626,106.29829 181.01028,123.79991 204,155.00021 C213.7418,168.22121 224.03351,180.96708 234,194.00017 C246.07551,209.79121 257.36571,220.41957 275,231.00014 C285.57406,237.34456 295.83653,242.84775 307,248.00012 C317.8183,252.99318 324.46505,252.89547 337,252.00012 C362.92461,250.14836 384.46844,240.41978 404,225.00014"/>
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
</EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
<Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Margin="63.5,128.847,87.5,133.025" Data="M64,207 C92.304184,167.37414 114.6165,141.39725 171,132 205.43362,126.26106 223.19847,129.20972 257,147 289.86626,164.29803 313.01028,181.79967 336,213 345.7418,226.22101 356.03351,238.96689 366,252 378.07551,267.79105 389.36571,278.41942 407,289 417.57406,295.34443 427.83653,300.84763 439,306 449.8183,310.99306 456.46505,310.89535 469,310 494.92461,308.14824 516.46844,298.41966 536,283"/>
<Button RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="82,30,0,0" x:Name="button" VerticalAlignment="Top" Width="100" Height="56" Content="Button">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Button.RenderTransform>
</Button>
</Grid>
</Window>
你可以得到如图所示的一个窗体：
DoubleAnimationUsingPath animationX = new DoubleAnimationUsingPath();
animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
animationX.Source = PathAnimationSource.X;
animationX.Duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimationUsingPath animationY = new DoubleAnimationUsingPath();
animationY.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
animationY.Source = PathAnimationSource.Y;
animationY.Duration = animationX.Duration;其中

animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();指定了我们的animationX所遵照的路径为path1

animationX.Source = PathAnimationSource.X;指定了animationX将遵照路径的X值的变化而变化，其中PathAnimationSource枚举存在三个值，分别是X，Y与Angle，在沿着路径旋转的动画中将会用到Angle值。
将代码补充完整后如下：

TranslateTransform translate = new TranslateTransform();
this.border1.RenderTransform = translate;

NameScope.SetNameScope(this, new NameScope());
this.RegisterName("translate", translate);

DoubleAnimationUsingPath animationX = new DoubleAnimationUsingPath();
animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
animationX.Source = PathAnimationSource.X;
animationX.Duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimationUsingPath animationY = new DoubleAnimationUsingPath();
animationY.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
animationY.Source = PathAnimationSource.Y;
animationY.Duration = animationX.Duration;

Storyboard story = new Storyboard();
story.RepeatBehavior = RepeatBehavior.Forever;
story.AutoReverse = true;
story.Children.Add(animationX);
story.Children.Add(animationY);
Storyboard.SetTargetName(animationX, "translate");
Storyboard.SetTargetName(animationY, "translate");
Storyboard.SetTargetProperty(animationX, new PropertyPath(TranslateTransform.XProperty));
Storyboard.SetTargetProperty(animationY, new PropertyPath(TranslateTransform.YProperty));

story.Begin(this);到此为止，我们可以说已经打造了一个路径动画，效果如下图
Canvas.SetTop(this.border1, -this.border1.ActualHeight / 2);
Canvas.SetLeft(this.border1, -this.border1.ActualWidth / 2);

TranslateTransform translate = new TranslateTransform();
this.border1.RenderTransform = translate;

NameScope.SetNameScope(this, new NameScope());
this.RegisterName("translate", translate);

DoubleAnimationUsingPath animationX = new DoubleAnimationUsingPath();
animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
animationX.Source = PathAnimationSource.X;
animationX.Duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimationUsingPath animationY = new DoubleAnimationUsingPath();
animationY.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
animationY.Source = PathAnimationSource.Y;
animationY.Duration = animationX.Duration;

Storyboard story = new Storyboard();
story.RepeatBehavior = RepeatBehavior.Forever;
story.AutoReverse = true;
story.Children.Add(animationX);
story.Children.Add(animationY);
Storyboard.SetTargetName(animationX, "translate");
Storyboard.SetTargetName(animationY, "translate");
Storyboard.SetTargetProperty(animationX, new PropertyPath(TranslateTransform.XProperty));
Storyboard.SetTargetProperty(animationY, new PropertyPath(TranslateTransform.YProperty));

story.Begin(this);然后，运行效果如下：
this.border1.RenderTransformOrigin = new Point(0.5, 0.5);（2）如果我们在旋转的同时在进行其他动作，比如平移，那么我们需要注意动作叠加的顺序，先旋转再平移与先平移再旋转的效果是不同的（你可以参考WPF中的MatrixTransform ），这在编码时体现在向TransformGroup中添加元素时的顺序

TranslateTransform translate = new TranslateTransform();
RotateTransform rotate = new RotateTransform();
TransformGroup group = new TransformGroup();
group.Children.Add(rotate);//先旋转
group.Children.Add(translate);//再平移
this.border1.RenderTransform = group;补充完整后的代码：

Canvas.SetTop(this.border1, -this.border1.ActualHeight / 2);
Canvas.SetLeft(this.border1, -this.border1.ActualWidth / 2);

this.border1.RenderTransformOrigin = new Point(0.5, 0.5);

TranslateTransform translate = new TranslateTransform();
RotateTransform rotate = new RotateTransform();
TransformGroup group = new TransformGroup();
group.Children.Add(rotate);//先旋转
group.Children.Add(translate);//再平移
this.border1.RenderTransform = group;

NameScope.SetNameScope(this, new NameScope());
this.RegisterName("translate", translate);
this.RegisterName("rotate", rotate);

DoubleAnimationUsingPath animationX = new DoubleAnimationUsingPath();
animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
animationX.Source = PathAnimationSource.X;
animationX.Duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimationUsingPath animationY = new DoubleAnimationUsingPath();
animationY.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
animationY.Source = PathAnimationSource.Y;
animationY.Duration = animationX.Duration;

DoubleAnimationUsingPath animationAngle = new DoubleAnimationUsingPath();
animationAngle.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
animationAngle.Source = PathAnimationSource.Angle;
animationAngle.Duration = animationX.Duration;

Storyboard story = new Storyboard();
story.RepeatBehavior = RepeatBehavior.Forever;
story.AutoReverse = true;
story.Children.Add(animationX);
story.Children.Add(animationY);
story.Children.Add(animationAngle);
Storyboard.SetTargetName(animationX, "translate");
Storyboard.SetTargetName(animationY, "translate");
Storyboard.SetTargetName(animationAngle, "rotate");
Storyboard.SetTargetProperty(animationX, new PropertyPath(TranslateTransform.XProperty));
Storyboard.SetTargetProperty(animationY, new PropertyPath(TranslateTransform.YProperty));
Storyboard.SetTargetProperty(animationAngle, new PropertyPath(RotateTransform.AngleProperty));

story.Begin(this);
效果图如下：
Canvas.SetLeft(this.border1, -this.border1.ActualWidth / 2);
Canvas.SetTop(this.border1, -this.border1.ActualHeight / 2);
this.border1.RenderTransformOrigin = new Point(0.5, 0.5);

MatrixTransform matrix = new MatrixTransform();
this.border1.RenderTransform = matrix;

NameScope.SetNameScope(this, new NameScope());
this.RegisterName("matrix", matrix);

MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();
matrixAnimation.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();
matrixAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;
matrixAnimation.AutoReverse = true;
matrixAnimation.IsOffsetCumulative = !matrixAnimation.AutoReverse;
matrixAnimation.DoesRotateWithTangent = true;//旋转

Storyboard story = new Storyboard();
story.Children.Add(matrixAnimation);
Storyboard.SetTargetName(matrixAnimation, "matrix");
Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));
story.Begin(this);

下载Demo：http://files.cnblogs.com/zhouyinhui/PathAnimationDemo.rar