wpf 跟随路径动画方式

xaml


    <Canvas>

        <Canvas.Resources>
            <!--  1. 定义移动的路径, 这里画了一个五角形  -->
            <PathGeometry x:Key="MovePathGeometry" Figures="M 175,30                       L 213.88,123.63                       L 320.23,129.35                       L 242.5,198.04                       L 268.75,301.37                       L 175,240                       L 81.25,301.37                       L 107.5,198.04                       L 29.77,129.35                       L 136.12,123.63                       Z" />
        </Canvas.Resources>

        <ctrlHelpers:GridLineControl />

        <!--  2. 运行三角形  -->
        <Path
            Width="24" Height="24"
            Data="M 0,0              L 24,12              L 0,24              Z" Fill="Crimson" RenderTransformOrigin=".5 .5">
            <Path.RenderTransform>
                <MatrixTransform />
            </Path.RenderTransform>
            <Path.Triggers>
                <!--  3. 在 loaded 时启动动画  -->
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <!--  4. 设置跟随路径动画  -->
                            <!--  PathGeometry 指定路径, RenderTransformOrigin 指定了跟随路径的中心点  -->
                            <!--  DoesRotateWithTangent 指定方向跟随路径旋转  -->
                            <MatrixAnimationUsingPath
                                DoesRotateWithTangent="True"
                                PathGeometry="{StaticResource MovePathGeometry}"
                                RepeatBehavior="Forever"
                                Storyboard.TargetProperty="RenderTransform.(MatrixTransform.Matrix)" Duration="0:0:8" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>

        <!--  5. 为了方面观察, 绘制出了路径, width, height 无关紧要  -->
        <!--  因为运动三角形是中心跟随路径,所以绘制出的路径要再偏移至运行的三角形的中心 left/top = 12  -->
        <Path
            Canvas.Left="12" Canvas.Top="12"
            Width="350" Height="350"
            Data="{StaticResource MovePathGeometry}"
            Opacity=".5" Stroke="DodgerBlue" StrokeThickness="2" />

    </Canvas>
上一篇
下一篇