沿路径为对象设置动画

Question

我尝试在 wpf 中玩弄形状，我需要以下内容：我有一个图像并绘制了一些形状，我希望图像会沿着这个形状的线条移动。

我的意思是：

例如形状：

<Path Stroke="Black" StrokeThickness="5" Fill="Goldenrod">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="100,50" IsClosed="True">
                        <LineSegment Point="140,60"/>
                        <LineSegment Point="150,100"/>
                        <LineSegment Point="125,120"/>
                        <LineSegment Point="90,110"/>
                        <LineSegment Point="80,80"/>
                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>

这是动态图像：

<UserControl ...
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"  ..>

<UserControl.Resources>
    <PathGeometry x:Key="AnimationPath"
  Figures="M 10,100 C 40,0 300,0 300,300 0,300 285,200 300,300 "
  PresentationOptions:Freeze="True" />
</UserControl.Resources>

<Image   
         Source="/Resources/Myimage.png"
  Width="200"  >
        <Image.RenderTransform>
            <TranslateTransform x:Name="AnimatedTranslateTransform"  />
        </Image.RenderTransform>

        <Image.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">

                        <!-- Animates the rectangle horizotally along the path. -->
                        <DoubleAnimationUsingPath
            Storyboard.TargetName="AnimatedTranslateTransform"
            Storyboard.TargetProperty="X"
            PathGeometry="{StaticResource AnimationPath}"
            Source="X" 
            Duration="0:0:5"  
             AutoReverse="True"
                            />

                        <!-- Animates the rectangle vertically along the path. -->
                        <DoubleAnimationUsingPath
            Storyboard.TargetName="AnimatedTranslateTransform"
            Storyboard.TargetProperty="Y"
            PathGeometry="{StaticResource AnimationPath}"
            Source="Y" 
            Duration="0:0:5"  />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>

相关链接：link1, link2

我试过：

 Figures="M 10,100 C 100,50 140,60 150,100 125,120 90,110 80,80 "

即从 100,50 点开始 --> 140,60 等等...

但它并没有完全走这条路

Answer 1

您的草图似乎表明您想要沿路径设置红色箭头的动画，包括旋转到当前路径段的切角。

您可以通过使用 MatrixAnimationUsingPath 为 MatrixTransform 的 Matrix 属性设置动画来实现此目的。下面的示例使用额外的 TranslateTransform 来使图像居中。由于 Image 元素的 Source 属性中有一个 DrawingImage，您不妨使用另一个 Path 而不是 Image。

<Window.Resources>
    <PathGeometry x:Key="AnimationPath"
                  Figures="M100,50 L140,60 150,100 125,120 90,110 80,80Z"/>
</Window.Resources>
<Canvas>
    <Path Stroke="Black" StrokeThickness="5" Fill="Goldenrod"
          Data="{StaticResource AnimationPath}"/>

    <Image>
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing Geometry="M0,0 L10,8 0,16">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="3" Brush="Red"/>
                        </GeometryDrawing.Pen>
                    </GeometryDrawing>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>

        <Image.RenderTransform>
            <TransformGroup>
                <TranslateTransform X="-5" Y="-8"/>
                <MatrixTransform x:Name="AnimatedTransform"/>
            </TransformGroup>
        </Image.RenderTransform>

        <Image.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <MatrixAnimationUsingPath
                            Storyboard.TargetName="AnimatedTransform"
                            Storyboard.TargetProperty="Matrix"
                            Duration="0:0:5"
                            DoesRotateWithTangent="True"
                            PathGeometry="{StaticResource AnimationPath}"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>
</Canvas>

沿路径为对象设置动画

Animate an Object Along a Path

wpf

xaml

shapes