路徑動畫

Question

我想使我的路徑具有動畫。這是路徑示例代碼：

<Path Stroke="BlueViolet" StrokeThickness="2"> 
     <Path.Data> 
      <PathGeometry> 
       <PathGeometry.Figures> 
        <PathFigure StartPoint="30, 80"> 
         <LineSegment Point="50, 80"/> 
         <QuadraticBezierSegment Point1="70, 20" Point2="90, 80" x:Name="qbs1"/> 
         <QuadraticBezierSegment Point1="110, 140" Point2="130, 80" x:Name="qbs2"/> 
         <LineSegment Point="150, 80"/> 
        </PathFigure> 
       </PathGeometry.Figures> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 

我希望把它的動畫製作不同的路徑：

<Path Stroke="BlueViolet" StrokeThickness="2"> 
     <Path.Data> 
      <PathGeometry> 
       <PathGeometry.Figures> 
        <PathFigure StartPoint="30, 80"> 
         <LineSegment Point="50, 80"/> 
         <QuadraticBezierSegment Point1="110, 140" Point2="130, 80" x:Name="qbs1"/> 
         <QuadraticBezierSegment Point1="70, 20" Point2="90, 80" x:Name="qbs2"/> 
         <LineSegment Point="150, 80"/> 
        </PathFigure> 
       </PathGeometry.Figures> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 

動畫代碼是這樣，但它不工作：

<Page.Resources> 
    <Storyboard x:Name="pointanimation"> 
     <PointAnimation From="70,20" To="70, 140" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="qbs1" Storyboard.TargetProperty="Point1"/> 
     <PointAnimation From="110, 140" To="110, 20" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="qbs2" Storyboard.TargetProperty="Point1"/> 
    </Storyboard> 
</Page.Resources> 

我通過按鈕單擊事件呼叫它：

private void button_Click(object sender, RoutedEventArgs e) 
    { 
     pointanimation.Begin(); 
    } 

我需要它，使動畫像這樣：

我在哪裏犯了一個錯誤？我應該怎麼做才能使它工作？

Answer 1

您需要在每個PointAnimation上設置EnableDependentAnimation="True"才能正常工作。

因此改變故事板是這樣的：

<Storyboard x:Name="pointanimation"> 
    <PointAnimation From="70,20" 
        To="70,140" 
        EnableDependentAnimation="True" 
        RepeatBehavior="Forever" 
        AutoReverse="True" 
        Storyboard.TargetName="qbs1" 
        Storyboard.TargetProperty="Point1"/> 
    <PointAnimation From="110, 140" 
        To="110, 20" 
        EnableDependentAnimation="True" 
        RepeatBehavior="Forever" 
        AutoReverse="True" 
        Storyboard.TargetName="qbs2" 
        Storyboard.TargetProperty="Point1"/> 
</Storyboard> 

您需要設置，因爲的潛在性能的影響這一點。 （MSDN link on DependentAnimations。