WPF - sequentielle animation einfaches Beispiel

Lerne ich über WPF-animation, und bin verwirrt darüber, wie Sie anwenden, Animationen nacheinander. Als einfaches Beispiel, ich habe vier Rechtecke in ein gleichmäßiges raster, und möchten, ändern Sie die Farbe jedes der Reihe nach. Hier ist, was ich habe, so weit:

public partial class Window1 : Window
{
    Rectangle blueRect;
    Rectangle redRect;
    Rectangle greenRect;
    Rectangle yellowRect;

    public Window1()
    {
        InitializeComponent();
        blueRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Blue, Name="Blue"};
        redRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Red, Name="Yellow"};
        greenRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Green, Name="Green" };
        yellowRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Yellow, Name="Yellow" };

        UniformGrid1.Children.Add(blueRect);
        UniformGrid1.Children.Add(redRect);
        UniformGrid1.Children.Add(greenRect);
        UniformGrid1.Children.Add(yellowRect);

    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        animateCell(blueRect, Colors.Blue);
        animateCell(redRect, Colors.Red);
    }

    private void animateCell(Rectangle rectangle, Color fromColor)
    {
        Color toColor = Colors.White;
        ColorAnimation ani = new ColorAnimation(toColor, new Duration(TimeSpan.FromMilliseconds(300)));
        ani.AutoReverse = true;

        SolidColorBrush newBrush = new SolidColorBrush(fromColor);
        ani.BeginTime = TimeSpan.FromSeconds(2);
        rectangle.Fill = newBrush;
        newBrush.BeginAnimation(SolidColorBrush.ColorProperty, ani);
        //NameScope.GetNameScope(this).RegisterName(rectangle.Name, rectangle);
        //Storyboard board = new Storyboard();
        //board.Children.Add(ani);
        //Storyboard.SetTargetName(rectangle, rectangle.Name);
        //Storyboard.SetTargetProperty(ani, new PropertyPath(SolidColorBrush.ColorProperty));
        //board.Begin();

    }

Was ist der einfachste Weg, dies zu erreichen? Der code in den Kommentaren ist meine erste Vermutung, aber es funktioniert nicht richtig.

InformationsquelleAutor David Hodgson | 2009-10-02

Sollte es ein Ereignis sein ani.Completed - handle, das Ereignis und starten Sie die nächste phase der animation, dann starten Sie den ersten Computer und jede phase löst die nächste.

ColorAnimation ani = //whatever...

ani.Completed += (s, e) => 
   {
       ColorAnimation ani2 = //another one...

       //and so on
   };

newBrush.BeginAnimation(SolidColorBrush.ColorProperty, ani);

UPDATE:

public partial class Window1 : Window
{
    Rectangle blueRect;
    Rectangle redRect;
    Rectangle greenRect;
    Rectangle yellowRect;

    public Window1()
    {
        InitializeComponent();
        blueRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Blue, Name = "Blue" };
        redRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Red, Name = "Yellow" };
        greenRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Green, Name = "Green" };
        yellowRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Yellow, Name = "Yellow" };

        UniformGrid1.Children.Add(blueRect);
        UniformGrid1.Children.Add(redRect);
        UniformGrid1.Children.Add(greenRect);
        UniformGrid1.Children.Add(yellowRect);
    }

    IEnumerable<Action<Action>> AnimationSequence()
    {
        for (; ; )
        {
            yield return AnimateCell(blueRect, Colors.Blue);
            yield return AnimateCell(redRect, Colors.Red);
            yield return AnimateCell(greenRect, Colors.Green);
            yield return AnimateCell(yellowRect, Colors.Yellow);
        }
    }

    private IEnumerator<Action<Action>> _actions;

    private void RunNextAction()
    {
        if (_actions.MoveNext())
            _actions.Current(RunNextAction);
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        _actions = AnimationSequence().GetEnumerator();
        RunNextAction();
    }

    private Action<Action> AnimateCell(Rectangle rectangle, Color fromColor)
    {
        return completed =>
        {
            Color toColor = Colors.White;
            ColorAnimation ani = new ColorAnimation(toColor, 
                                    new Duration(TimeSpan.FromMilliseconds(300)));
            ani.AutoReverse = true;
            ani.Completed += (s, e) => completed();

            SolidColorBrush newBrush = new SolidColorBrush(fromColor);
            ani.BeginTime = TimeSpan.FromSeconds(2);
            rectangle.Fill = newBrush;
            newBrush.BeginAnimation(SolidColorBrush.ColorProperty, ani);
        };
    }
}

Versuchen einfügen, die oben in Ihrem Programm. Es tut das, was Sie brauchen, aber in einer Weise, die nützlich sein können, um Sie in anderen Kontexten. Es ist immer noch event-driven, aber es verwendet einen "iterator-Methode" (mit Rendite), den Eindruck zu erwecken, dass es sequenzielle Codierung, die Blöcke, während die animation läuft.

Die nette Sache über dieses ist, dass Sie spielen, um mit den AnimationSequence Methode in eine sehr intuitive Art und Weise - man könnte schreiben Sie die Zeitleiste der animation in einer Reihe von Anweisungen, oder verwenden Sie Schleifen, oder was auch immer Sie wollen.

Was ist, wenn die Animationen sind dynamisch? Ich möchte in der Lage sein zu nennen, sagen wir blau, grün, rot, blau, grün, rot; jede animation vielleicht 2 Sekunden, nachdem das Vorherige. Gibt es eine Möglichkeit, um die Anrufer von animateCell blockieren, bis ani.Abgeschlossen wird gefeuert?

InformationsquelleAutor Daniel Earwicker

Die Lösung, die ich ausprobiert habe, ist die Verwendung einer Warteschlange, wie so. Dies wird Ihnen erlauben, fügen Sie die animation der Kette dynamisch. Ich bin mir nicht sicher, ob die Sperre ist notwendig, aber ich habe es in nur um sicher zu sein.

Queue<Object[]> animationQueue = new Queue<Object[]>();

void sequentialAnimation(DoubleAnimation da, Animatable a, DependencyProperty dp)
{
    da.Completed += new EventHandler(da_Completed);

    lock (animationQueue)
    {
        if (animationQueue.Count == 0) //no animation pending
        {
            animationQueue.Enqueue(new Object[] { da, a, dp });
            a.BeginAnimation(dp, da);
        }
        else
        {
            animationQueue.Enqueue(new Object[] { da, a, dp });
        }
    }
}

void da_Completed(object sender, EventArgs e)
{
    lock (animationQueue)
    {
        Object[] completed = animationQueue.Dequeue();
        if (animationQueue.Count > 0)
        {
            Object[] next = animationQueue.Peek();
            DoubleAnimation da = (DoubleAnimation)next[0];
            Animatable a = (Animatable)next[1];
            DependencyProperty dp = (DependencyProperty)next[2];

            a.BeginAnimation(dp, da);
        }
    }
}

Viel mehr lesbar und eine Warteschlange entspricht der Vorstellung einer Sequenz. Implementiert eine queue von Aktionen, wo eine Aktion startet eine animation.

InformationsquelleAutor Edward D'Souza

Dies kann erreicht werden, indem eine Klasse mit dem widersprüchlichen Namen ParallelTimeline und sorgfältiges anpassen der BeginTime Eigenschaft. Beachten Sie in dem Beispiel unten, wie die BeginTime - Eigenschaft des zweiten DoubleAnimation ist auf die Dauer des ersten.

<ParallelTimeline>
      <DoubleAnimation
           Storyboard.TargetName="FlashRectangle" 
           Storyboard.TargetProperty="Opacity"
           From="0.0" To="1.0" Duration="0:0:1"/>
      <DoubleAnimation BeginTime="0:0:0.05"
           Storyboard.TargetName="FlashRectangle" 
           Storyboard.TargetProperty="Opacity"
           From="1.0" To="0.0" Duration="0:0:2"/>
 </ParallelTimeline>

InformationsquelleAutor vidstige

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.