我们见识了普通的动画类、关键帧动画类,当然,还有一种动画类需要我们了解,那就是基于路径的动画。它有3个类型:DoubleAnimationUsingPath、MatrixAniamtionUsingPath和PointAnimationUsingPath。
基于路径的动画允许你指定PathGeometry作为对象行进的路径来改变对象的位置。这些路径可以是矩形、椭圆、弧形或任何组合。
以PointAniamtionUsingPath为例:
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path Fill="Blue">
<Path.Data>
<EllipseGeometry x:Name="elips" RadiusX="12" RadiusY="12"/>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard TargetName="elips" TargetProperty="Center">
<PointAnimationUsingPath Duration="0:0:2.5" AutoReverse="True"
RepeatBehavior="Forever">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 96 288 C 576 0, 0 0, 480 288"/>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
<Path Stroke="Black" Data="M 96 288 C 576 0, 0 0, 480 288"/>
</Canvas>
运行起来,可以看到,球的中心,会精确地沿着定义的贝塞尔曲线移动。
如图:
在DoubleAnimationUsingPath中,你会使用到指定PathGeometry的X、Y和Angle为目标的X值、Y值以及目标的旋转角度,这样,目标不光能沿着路径前进,还能根据路径的斜率来改变自己的角度,使自己始终平行于路径。
三个DoubleAnimationUsingPath来改变目标的水平和垂直位置并旋转角度,这样的一个效果往往可以只用一个MatrixAnimationUsingPath来实现(路径的X、Y会变成Matrix的OffsetX和OffsetY,Matrix剩下的部分用来定义旋转——需要设定DoesRotateWithTangent为True)。接下来,用骑单轮车的机器人绕行于山丘大道来为MatrixAnimationUsingPath作例子:
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Resources>
<PathGeometry x:Key="path"
Figures="M 200 200
C 300 0 500 400 700 200
C 900 0 1000 200 900 300
C 100 1100 1200 800 400 500
C 100 400 100 400 200 200"/>
<Style TargetType="{x:Type Path}">
<Setter Property="Stroke" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
</Style>
</Canvas.Resources>
<Path Data="{StaticResource path}"/>
<Path>
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="0 -25" RadiusX="25" RadiusY="25"/>
<GeometryGroup>
<LineGeometry StartPoint="0 0" EndPoint="0 -50"/>
<LineGeometry StartPoint="-25 -25" EndPoint="25 -25"/>
<LineGeometry StartPoint="-18 -7" EndPoint="18 -43"/>
<LineGeometry StartPoint="18 -7" EndPoint="-18 -43"/>
<GeometryGroup.Transform>
<RotateTransform x:Name="xformSpokes"
CenterX="0" CenterY="-25"/>
</GeometryGroup.Transform>
</GeometryGroup>
<LineGeometry StartPoint="0 -25" EndPoint="0 -80"/>
<EllipseGeometry Center="0 -90" RadiusX="10" RadiusY="10"/>
<LineGeometry StartPoint="9 -85" EndPoint="0 -90"/>
<LineGeometry StartPoint="-35 -70" EndPoint="35 -70">
<LineGeometry.Transform>
<RotateTransform x:Name="xformArm" CenterX="0" CenterY="-70"/>
</LineGeometry.Transform>
</LineGeometry>
</GeometryGroup>
</Path.Data>
<Path.RenderTransform>
<MatrixTransform x:Name="xformUnicycleMan"/>
</Path.RenderTransform>
</Path>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard SpeedRatio="1">
<MatrixAnimationUsingPath Storyboard.TargetName="xformUnicycleMan"
Storyboard.TargetProperty="Matrix"
Duration="0:0:12"
PathGeometry="{StaticResource path}"
DoesRotateWithTangent="True"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="xformSpokes"
Storyboard.TargetProperty="Angle"
Duration="0:0:1" RepeatBehavior="Forever"
From="0" To="360"/>
<DoubleAnimation Storyboard.TargetName="xformArm"
Storyboard.TargetProperty="Angle"
Duration="0:0:0.2"
AutoReverse="True"
RepeatBehavior="Forever"
From="-20" To="20"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
运行结果如图:
另外,可以让骑单轮车的机器人沿着文字运动,可以参考Demo。抓个图吧。