WPF路徑動畫

Question

我已經創建了下面的XAML

<Canvas Background="Gray" Margin="10">  
    <Ellipse x:Name="Node1" Width="20" Height="20" Fill="AliceBlue" Canvas.Left="38" Canvas.Top="136" /> 
    <Ellipse x:Name="Node2" Width="20" Height="20" Fill="AliceBlue" Canvas.Left="290" Canvas.Top="136" /> 
    <Ellipse x:Name="object" Width="10" Height="20" Fill="Black" Canvas.Left="43" Canvas.Top="125" /> 
    <Path Stroke="Black" StrokeThickness="1"> 
     <Path.Data> 
      <PathGeometry> 
       <PathGeometry.Figures> 
        <PathFigureCollection> 
         <PathFigure StartPoint="50,145"> 
          <PathFigure.Segments> 
           <PathSegmentCollection> 
            <LineSegment Point="100,100" /> 
            <LineSegment Point="250,100" /> 
            <LineSegment Point="300,145" /> 
           </PathSegmentCollection> 
          </PathFigure.Segments> 
         </PathFigure> 
        </PathFigureCollection> 
       </PathGeometry.Figures> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 
</Canvas> 

正如你所看到的，我已經建立2個橢圓形節點。連接兩個節點和坐在節點1上的對象的路徑。我要在此處執行的操作是沿節點2的路徑沿着節點1動畫對象。

我正在嘗試使用代碼做動畫，因​​爲我希望點擊node2時發生動畫。我一直在苦於DoubleAnimation，MatrixAnimation，故事板......非常混亂。請分享你如何實現這一目標的知識。我希望相同的代碼能夠處理曲線和複雜的路徑。

Answer 1

您需要DoubleAnimationUsingPath(ref)：

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="WpfApplication1.MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 
    <Window.Resources> 
     <Storyboard x:Key="Storyboard1"> 
      <DoubleAnimationUsingPath Duration="0:0:2" Source="X" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="object"> 
       <DoubleAnimationUsingPath.PathGeometry> 
        <PathGeometry Figures="M2,10 L52,-35 L202,-35 L252,10"/> 
       </DoubleAnimationUsingPath.PathGeometry> 
      </DoubleAnimationUsingPath> 
      <DoubleAnimationUsingPath Duration="0:0:2" Source="Y" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="object"> 
       <DoubleAnimationUsingPath.PathGeometry> 
        <PathGeometry Figures="M2,10 L52,-35 L202,-35 L252,10"/> 
       </DoubleAnimationUsingPath.PathGeometry> 
      </DoubleAnimationUsingPath> 
     </Storyboard> 
    </Window.Resources> 

    <Grid x:Name="LayoutRoot"> 
     <Canvas Background="Gray" Margin="10">  
    <Ellipse x:Name="Node1" Width="20" Height="20" Fill="AliceBlue" Canvas.Left="38" Canvas.Top="136" /> 
    <Ellipse x:Name="Node2" Width="20" Height="20" Fill="AliceBlue" Canvas.Left="290" Canvas.Top="136" /> 
    <Ellipse x:Name="object" Width="10" Height="20" Fill="Black" Canvas.Left="43" Canvas.Top="125" RenderTransformOrigin="0.5,0.5" MouseLeftButtonDown="object_MouseLeftButtonDown" > 
     <Ellipse.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform/> 
       <TranslateTransform/> 
      </TransformGroup> 
     </Ellipse.RenderTransform> 
    </Ellipse> 
    <Path Stroke="Black" StrokeThickness="1"> 
     <Path.Data> 
      <PathGeometry> 
       <PathGeometry.Figures> 
        <PathFigureCollection> 
         <PathFigure StartPoint="50,145"> 
          <PathFigure.Segments> 
           <PathSegmentCollection> 
            <LineSegment Point="100,100" /> 
            <LineSegment Point="250,100" /> 
            <LineSegment Point="300,145" /> 
           </PathSegmentCollection> 
          </PathFigure.Segments> 
         </PathFigure> 
        </PathFigureCollection> 
       </PathGeometry.Figures> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 
</Canvas> 
</Grid> 
</Window> 

然後從代碼中調用：

private void object_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) 
{ 
    Storyboard animation = this.TryFindResource("Storyboard1") as Storyboard; 
    animation.Begin(); 
} 

---

[編輯] 我想你在這裏失去了重要的工具：Blend。至於在代碼中創建動畫，如果你看看XAML元素，想想他們爲序列化的類，它可以在代碼中得到體現，即

Storyboard sb = new Storyboard(); 
    DoubleAnimationUsingPath ani_2 = new DoubleAnimationUsingPath(); 
    ani_2.Duration = new Duration(new TimeSpan(0, 0, 2)); 

    PathGeometry pg = new PathGeometry(); 
    pg.Figures.Add(new PathFigure()); 

    ani_2.PathGeometry.AddGeometry(pg); 

等，但它是（IMAO）相當痛苦創建這些直來自代碼。這一切都取決於應用程序。 看一看here作爲Blend的起點。