为什么QuadraticBezierSegment在使用直线绘制和使用DoubleAnimationUsingPath.PathGeometry进行动画制作之间的渲染方式不同？

Question

我已将QuadraticBezierSegment对象定义为Data对象的Path属性：

<Path Stroke="Red" StrokeThickness="5">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="450,250" IsClosed="False">
                <QuadraticBezierSegment Point1="245,-50" Point2="0,25" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

下面以红色显示，并显示我预期的曲线。：

但是，当在路径动画中使用相同的曲线时，动画元素的路径与上图中显示的线条的路径类似。 [请注意，这只是我一直在创作的动画的一部分。]

<Ellipse Width="50" Height="50" Fill="#FF01ADEF" Stroke="Black" StrokeThickness="3">
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <Storyboard Storyboard.TargetProperty="(Canvas.Top)" BeginTime="0:0:3">
                        <DoubleAnimationUsingPath Duration="0:0:1.5" 
                            AccelerationRatio="0.2">
                            <DoubleAnimationUsingPath.PathGeometry>
                                <PathGeometry>
                                    <PathFigure StartPoint="450,250" IsClosed="False">
                                        <QuadraticBezierSegment 
                                            Point1="245,-50" Point2="0,25" />
                                    </PathFigure>
                                </PathGeometry>
                            </DoubleAnimationUsingPath.PathGeometry>
                        </DoubleAnimationUsingPath>
                    </Storyboard>
                    <Storyboard Storyboard.TargetProperty="(Canvas.Left)" 
                        BeginTime="0:0:3" >
                        <DoubleAnimation Duration="00:00:1.5" From="400" To="0" 
                            DecelerationRatio="0.2" />
                    </Storyboard>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>

有人知道为什么会这样做以及我必须做些什么来使动画路径实际上遵循图像中显示的路径？

Answer 1

我只需添加另一个DoubleAnimationUsingPath来设置Canvas.Left属性的动画，并在Source元素上设置DoubleAnimationUsingPath属性，以指定是否应使用X元素{}}对象的1}}和Y部分。这就是代码现在的样子：

QuadraticBezierSegment