为什么 QuadraticBezierSegment 在用线绘制和用 DoubleAnimationUsingPath.PathGeometry 动画之间呈现不同？

Question

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

<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 属性设置动画并在两个 DoubleAnimationUsingPath 元素上设置 Source 属性 , 指定他们是否应该使用 QuadraticBezierSegment 对象的 X 和 Y 部分。这就是代码现在的样子：

<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" Source="Y">
                            <DoubleAnimationUsingPath.PathGeometry>
                                <PathGeometry>
                                    <PathFigure StartPoint="400,200" IsClosed="False">
                                        <QuadraticBezierSegment Point1="245,-50"
                                            Point2="0,0" />
                                    </PathFigure>
                                </PathGeometry>
                            </DoubleAnimationUsingPath.PathGeometry>
                        </DoubleAnimationUsingPath>
                    </Storyboard>
                    <Storyboard Storyboard.TargetProperty="(Canvas.Left)"
                        BeginTime="0:0:3" >
                        <DoubleAnimationUsingPath Duration="0:0:1.5" 
                            AccelerationRatio="0.2" Source="X">
                            <DoubleAnimationUsingPath.PathGeometry>
                                <PathGeometry>
                                    <PathFigure StartPoint="400,200" IsClosed="False">
                                        <QuadraticBezierSegment Point1="245,-50"
                                            Point2="0,0" />
                                    </PathFigure>
                                </PathGeometry>
                            </DoubleAnimationUsingPath.PathGeometry>
                        </DoubleAnimationUsingPath>
                    </Storyboard>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>

为什么 QuadraticBezierSegment 在用线绘制和用 DoubleAnimationUsingPath.PathGeometry 动画之间呈现不同？

Why does a QuadraticBezierSegment render differently between drawing with a line and animating with a DoubleAnimationUsingPath.PathGeometry?

wpf

animation

bezier

path