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 पर बैठे दो नोड्स और ऑब्जेक्ट को जोड़ने वाला एक पथ 1. मैं यहां नोड 2 की ओर पथ के साथ नोड 1 पर ऑब्जेक्ट को एनिमेट करना चाहता हूं।

मैं एनीमेशन कोड का उपयोग कर के रूप में मैं एनीमेशन node2 के क्लिक पर क्या करना चाहते करने के लिए कोशिश कर रहा हूँ। मैं डबलएनीमेशन, मैट्रिक्सएनीमेशन, स्टोरीबोर्ड के साथ संघर्ष कर रहा हूं..बहुत उलझन में। इसे प्राप्त करने के तरीके पर आपको ज्ञान साझा करें। मुझे आशा है कि वही कोड वक्र और जटिल पथों के साथ काम करेगा।

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 देखें।