WPF animacja ścieżka

Question

Stworzyłem następujące 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> 

Jak widać, stworzyłem 2 eliptyczne węzłów. Ścieżka łącząca dwa węzły i obiekt siedzący w węźle 1. Wszystko, co chcę tutaj zrobić, to animować obiekt w węźle 1 wzdłuż ścieżki w kierunku węzła2.

Próbuję wykonać animację przy użyciu kodu, ponieważ chcę, aby animacja zaszła w momencie kliknięcia węzła2. Walczyłem z DoubleAnimation, MatrixAnimation, storyboardem. Bardzo mylące. Proszę podzielić się wiedzą na temat tego, jak to osiągnąć. Mam nadzieję, że ten sam kod będzie działał z krzywymi i złożonymi ścieżkami.

Answer 1

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

Następnie powołać się od kodu:

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

---

[EDIT] myślę tracisz krytycznej narzędzie tutaj: Blend. Jak do tworzenia animacji w kodzie, jeśli spojrzeć na elementy XAML, myśleć o nich jako serializowane klas, które mogą być odzwierciedlone w kodzie, czyli

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

etc. Jest jednak (IMAO) dość bolesne, aby stworzyć te prosto z kodu. Wszystko naprawdę zależy od aplikacji. Znajdź punkt początkowy na mieszance here.