WPF中的动画——（5）

   

          我们见识了普通的动画类、关键帧动画类，当然，还有一种动画类需要我们了解，那就是基于路径的动画。它有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。抓个图吧。