QuadraticBezierSegmentは、線を含む描画と、DoubleAnimationUsingPath.PathGeometryを使用してアニメーションを描画する方法が異なるのはなぜですか？

IはPathオブジェクトのDataプロパティとしてQuadraticBezierSegmentオブジェクトを定義している：それは赤で以下に示されるQuadraticBezierSegmentは、線を含む描画と、DoubleAnimationUsingPath.PathGeometryを使用してアニメーションを描画する方法が異なるのはなぜですか？

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

ことがあると私はアニメーションパスを作成するためにしなければならないことは、実際に示されているパスをたどるなぜ誰もが知っています画像？

出典

2017-11-18 WPF guy

あなたはおそらく[ 'Source']を設定するのを忘れて（https://msdn.microsoft.com/en-us/library/system.windows.media.animation DoubleAnimationUsingPathの.doubleanimationusingpath.source（v = vs.110）.aspx）プロパティ。 – Clemens

@Clemens、私の画像をアップロードしてくれてありがとう...新しいユーザーに自分の画像をアップロードさせないという利点はありません...他の人が見ることができないようにするだけです。クイックレスポンスに感謝します。しかし、私は 'Source'プロパティをどのように設定すべきですか？リンクされたページは、多くのヒントを提供しません。 –

プロパティの[種類]（https://msdn.microsoft.com/en-us/library/system.windows.media.animation.pathanimationsource（v = vs.110）.aspx）をクリックします。 SourceをX、YまたはAngleのいずれかに設定できます。 DoubleAnimationUsingPathが正確に何を理解していますか？ – Clemens

私はちょうど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>

出典

2017-11-18 19:23:05

QuadraticBezierSegmentは、線を含む描画と、DoubleAnimationUsingPath.PathGeometryを使用してアニメーションを描画する方法が異なるのはなぜですか？

答えて

関連する問題