WPF-path-animation

Ich habe folgende XAML-Code

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

Wie Sie sehen können, die ich erstellt habe, 2 elliptische Knoten. Ein Pfad zwischen zwei Knoten und ein Objekt sitzt auf Knoten 1. Alles was ich tun möchte, ist hier animieren Sie das Objekt auf node1 auf dem Weg zu Knoten 2.

Ich versuche zu tun, die animation mit code wie ich die animation geschehen auf der node2. Ich habe Schwierigkeiten mit DoubleAnimation, MatrixAnimation,storyboard..Sehr verwirrend. Bitte teilen Sie wissen, wie Sie diese erreichen. Ich hoffe, die gleichen code arbeiten würde, mit Kurven und komplexe Pfade.

InformationsquelleAutor SysAdmin | 2012-12-24

animation c#wpf

Müssen Sie 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>

Dann zum aufrufen von code:

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

[BEARBEITEN]
Ich denke, Sie sind fehlende kritische tool hier: Mischung. Wie für die Erstellung von Animationen in den code, wenn Sie den Blick auf XAML-Elemente, über Sie nachdenken als serialisierte Klassen, die reflektiert werden kann, im code, d.h.

    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. Es ist jedoch (IMAO) ziemlich schmerzhaft zu erstellen, diese direkt aus dem code. Aller es wirklich hängt von der Anwendung ab.
Haben Sie einen Blick hier für einen Startpunkt auf Mischung.

Getestet habe ich mit deiner Methode und es funktioniert gut. Aber, noch ich, den dont verstehen, ein paar Dinge hier. Wie Sie schuf die pathgeometry-Figuren verwendet, die in der animation? Wie würde ich es schaffen, Sie über c# - code? Zum Beispiel sagen, ich brauche zu animieren, dieses Objekt auf einem Pfad, der Benutzer gezeichnet hat, wie würde ich konvertieren Sie den Pfad zu pathgeometry?
Und warum Leinwand.GetLeft(@Objekt) nicht ändern, nachdem die animation zu Ende? Es wäre auch hilfreich, wenn Sie einen link zu einem guten tutorial zu verstehen, dass diese grundlegenden Sachen.
Aber trotzdem..es sollte ein Weg, um konvertieren Sie den Tatsächlichen Pfad, den {M50,145L100,100L250,100L300,145}, um den animationspfad {M2,10 L52,-35 L202,-35 L252,10} richtig? Wenn ich kann, dann kann ich leicht animieren Sie jedes Objekt über einen Pfad, ohne hardcoding im XAML-Code/Code richtig?
Nicht 100% sicher, aber ein Blick in den code scheint das Path.Data enthält Path.Geometry, vielleicht könnte dieses als DoubleAnimationUsingPath.PathGeometry? Lasse ich die Forschung für Sie obwohl 😉
das versucht. Aber nicht funktioniert. Pfad.Daten gibt der abosulte Weg geometrie des Pfades. Es entspricht dem, was wir Gaben in XAML. Aber, pathgeometry, die wir geliefert, um die animation offsets einen Betrag um X -, Y -, so dass es beginnt von 0,0. In dem obigen Beispiel, wenn wir subtrahieren 48 von X und 135 von Y erhalten wir die animation pathgeometry.
Wie zu subtrahieren Pfad Startpunkt aus seine Koordinaten? Sollten Sie object's pivot (schauen wie es sich verhält, wenn Sie anfangen zu animieren)
Ja. Ich bin auf der Suche PathGeometry-Transformationen zu erreichen.

InformationsquelleAutor StaWho

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.