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

问题

I have defined a QuadraticBezierSegment object as the Data property of a Path object:

<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>

It is shown below in red, and shows the curve that I expected.:

However, when this same curve is used in a path animation, the path of the animated element is NOTHING like the path of the line shown in the image above. [Please note that this is only part of the animation that I've been creating.]

<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>

Does anybody know why that is and what I have to do to make the animation path actually follow the path shown in the image?

回答1:

I just needed to add another DoubleAnimationUsingPath to animate the Canvas.Left property and set the Source property on both DoubleAnimationUsingPath elements, to specify whether they should use the X and Y parts of the QuadraticBezierSegment object. This is what the code looks like now:

<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>

来源：https://stackoverflow.com/questions/47369396/why-does-a-quadraticbeziersegment-render-differently-between-drawing-with-a-line

标签

wpf

animation

path

bezier