wpf - 如何使椭圆跟随 Canvas 上的曲线

Question

我在尝试让椭圆正确跟随 Canvas 上的路径时遇到问题。我认为问题源于这样一个事实，即我的迷你语法定义了 x 和 y 值之间的移动，但我只针对我的目标属性中的这些值之一(例如 (Canvas.Top 或 Canvas.左)。我似乎无法在 Canvas 上找到任何附加的“Position”属性，该属性将采用适合我的路径的 Position 类型。使这条路径起作用的正确方法是什么？

<Canvas Name="WaitingCanvas">
            <Ellipse Name="WaitingEllipse"
                     Canvas.Top="100"
                     Canvas.Left="50"
                     Height="20"
                     Width="20"
                     Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever">
                                <DoubleAnimationUsingPath
                                    Storyboard.TargetName="WaitingEllipse"
                                    Storyboard.TargetProperty="(Canvas.Top)"

                                    Source="X" 
                                    Duration="0:0:5">
                                    <DoubleAnimationUsingPath.PathGeometry>
                                        <PathGeometry Figures="M 50,100 C 100,50 150,100 200, 100"/>
                                    </DoubleAnimationUsingPath.PathGeometry>
                                </DoubleAnimationUsingPath>


                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
        </Canvas>

Answer 1

除了同时为 Canvas.Left 和 Canvas.Top 设置动画之外，您还可以为 MatrixTransform< 的 Matrix 属性设置动画 分配给 Ellipse 的 RenderTransform 属性。 Matrix 将通过 MatrixAnimationUsingPath 进行动画处理。

<Ellipse Height="20" Width="20" Fill="White">
    <Ellipse.RenderTransform>
        <MatrixTransform x:Name="transform" Matrix="1,0,0,1,50,100"/>
    </Ellipse.RenderTransform>
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <MatrixAnimationUsingPath
                        Storyboard.TargetName="transform"
                        Storyboard.TargetProperty="Matrix"
                        Duration="0:0:5">
                        <MatrixAnimationUsingPath.PathGeometry>
                            <PathGeometry Figures="M 50,100 C 100,50 150,100 200,100"/>
                        </MatrixAnimationUsingPath.PathGeometry>
                    </MatrixAnimationUsingPath>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>

---

使用 MatrixAnimationUsingPath 甚至允许通过设置 DoesRotateWithTangent="True" 沿动画路径的切线旋转动画元素。这当然只有在动画元素不是圆形的情况下才会可见。