为什么QuadraticBezierSegment在用线条绘制和使用DoubleAnimationUsingPath.PathGeometry进行动画处理之间呈现不同的渲染？ [英] Why does a QuadraticBezierSegment render differently between drawing with a line and animating with a DoubleAnimationUsingPath.PathGeometry?

问题描述

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

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?

推荐答案

我只需要添加另一个 DoubleAnimationUsingPath 为 Canvas.Left 属性设置动画，并在两个 DoubleAnimationUsingPath Source 属性c $ c>元素，以指定是否应使用 X 和 Y 部分> QuadraticBezierSegment 对象。这就是现在的代码：

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>

这篇关于为什么QuadraticBezierSegment在用线条绘制和使用DoubleAnimationUsingPath.PathGeometry进行动画处理之间呈现不同的渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！