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的起点。