QuadraticBezierSegment가 선이있는 그림과 DoubleAnimationUsingPath.PathGeometry로 애니메이션을 다르게 렌더링하는 이유는 무엇입니까?

Question

는 I는 Path 객체 Data 속성으로서 QuadraticBezierSegment 개체 정의 : 그것은 적색 아래와 같다

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

및 I 그러나 :

예상 곡선을 도시 ,이 동일한 커브가 경로 애니메이션에서 사용될 때 움직이는 요소의 경로는 위의 이미지에 표시된 선의 경로와 마찬가지입니다. [이 내가 작성했던 애니메이션의 일부임을 유의하시기 바랍니다.]

<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

난 그냥 Canvas.Left 속성에 애니메이션 그들이 QuadraticBezierSegment 개체의 X 및 Y 부품을 사용할지 여부를 지정하려면 두 DoubleAnimationUsingPath 요소에 Source 속성을 설정하는 또 다른 DoubleAnimationUsingPath를 추가 할 필요가 있었다.

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