Übersicht über die Verfahren zur Animation von Eigenschaften

Artikel
08/20/2008

Aktualisiert: November 2007

In diesem Thema werden die unterschiedlichen Ansätze zum Animieren von Eigenschaften beschrieben: Storyboard-Animationen, lokale Animationen, Uhren- und Pro-Frame-Animationen.

Vorbereitungsmaßnahmen

Für dieses Thema sollten Sie mit den unter Übersicht über Animationen beschriebenen grundlegenden Animationsfeatures vertraut sein.

Verschiedene Möglichkeiten für Animationen

Da es viele unterschiedliche Szenarien zum Animieren von Eigenschaften gibt, stellt WPF mehrere Ansätze zum Animieren von Eigenschaften bereit.

Die folgende Tabelle gibt für jeden Ansatz an, ob dieser pro Instanz, in Stilen, in Steuerelementvorlagen, in Datenvorlagen oder in XAML verwendet werden kann und ob Sie mit diesem Ansatz die Animation interaktiv steuern können. "Pro Instanz" bezieht sich auf das Verfahren, wonach eine Animation oder ein Storyboard auf die Objektinstanzen direkt angewendet wird, und nicht in einem Stil, einer Steuerelementvorlage oder einer Datenvorlage.

Animationsverfahren	Szenarien	Unterstützt XAML	Interaktiv steuerbar
Storyboard-Animation	Pro Instanz, Style, ControlTemplate, DataTemplate	Ja	Ja
Lokale Animation	Pro Instanz	Nein	Nein
Uhranimation	Pro Instanz	Nein	Ja
Pro-Frame-Animation	Pro Instanz	Nein	Nicht zutreffend

Storyboard-Animationen

Verwenden Sie ein Storyboard, wenn Sie die Animationen in XAML definieren und anwenden sowie nach dem Start interaktiv steuern möchten, eine komplexe Animationsstruktur erstellen, oder wenn Sie die Animationen in einem Style, in einer ControlTemplate oder in einer DataTemplate animieren möchten. Damit ein Objekt in einem Storyboard animiert werden kann, muss es sich um ein FrameworkElement-Objekt oder ein FrameworkContentElement-Objekt handeln oder es muss zum Festlegen von FrameworkElement oder FrameworkContentElement verwendet werden. Weitere Informationen finden Sie unter Übersicht über Storyboards.

Ein Storyboard ist ein spezieller Typ einer Container-Timeline, die Zielinformationen für die darin enthaltenen Animationen zur Verfügung stellt. Um mit einem Storyboard zu animieren, führen Sie die folgenden drei Schritte aus.

Deklarieren Sie ein Storyboard sowie eine oder mehrere Animationen.
Verwenden Sie die angefügten EigenschaftenTargetName und TargetProperty, um das Zielobjekt und die Eigenschaft für jede Animation anzugeben.
(Nur Code) Definieren Sie einen NameScope für ein FrameworkElement oder ein FrameworkContentElement. Registrieren Sie die Namen der Objekte, um mit dem FrameworkElement oder FrameworkContentElement eine Animation durchzuführen.
Starten Sie das Storyboard.

Wenn das Storyboard gestartet wird, werden die Animationen auf die zu animierenden Eigenschaften angewendet und gestartet. Sie haben zwei Möglichkeiten, ein Storyboard zu starten: Sie können die Begin-Methode verwenden, die von der Storyboard-Klasse bereitgestellt wird, oder Sie können eine BeginStoryboard-Aktion verwenden. Die einzige Möglichkeit zur Animation in XAML ist die Verwendung einer BeginStoryboard-Aktion. Eine BeginStoryboard-Aktion kann in einem EventTrigger, einem Eigenschaften-Trigger oder in einem DataTrigger verwendet werden.

Die folgende Tabelle zeigt die unterschiedlichen Stellen, an denen die einzelnen Verfahren zum Starten von Storyboard unterstützt werden: Pro Instanz, Stil, Steuerelementvorlage und Datenvorlage.

Storyboard wird gestartet mit…	Pro Instanz	Style	Steuerelementvorlage	Datenvorlage	Beispiel
BeginStoryboard und einem EventTrigger	Ja	Ja	Ja	Ja	Gewusst wie: Animieren einer Eigenschaft unter Verwendung eines Storyboards
BeginStoryboard und einem Eigenschaften-Trigger	Nein	Ja	Ja	Ja	Gewusst wie: Auslösen einer Animation bei Änderung eines Eigenschaftenwerts
BeginStoryboard und einem DataTrigger	Nein	Ja	Ja	Ja	Gewusst wie: Auslösen einer Animation bei Datenänderungen
Begin-Methode	Ja	Nein	Nein	Nein	Gewusst wie: Animieren einer Eigenschaft unter Verwendung eines Storyboards

Weitere Informationen über Storyboard-Objekte finden Sie unter Übersicht über Storyboards.

Lokale Animationen

Lokale Animationen bieten ein komfortables Verfahren, um eine Abhängigkeitseigenschaft eines beliebigen Animatable-Objekts zu animieren. Verwenden Sie lokale Animationen, wenn Sie eine einzelne Animation auf eine Eigenschaft anwenden möchten und die Animation nach dem Start nicht interaktiv steuern müssen. Im Gegensatz zu einer Storyboard-Animation kann eine lokale Animation ein Objekt animieren, das keinem FrameworkElement oder FrameworkContentElement zugeordnet ist. Sie müssen auch keinen NameScope für diesen Animationstyp definieren.

Lokale Animationen können nur im Code verwendet werden. Sie können nicht in Stilen, Steuerelementvorlagen oder Datenvorlagen definiert werden. Eine lokale Animation kann nach ihrem Start nicht interaktiv gesteuert werden.

Um mit einer lokalen Animation ein Objekt zu animieren, führen Sie die folgenden Schritte aus.

Erstellen Sie ein AnimationTimeline-Objekt.
Verwenden Sie die BeginAnimation-Methode des zu animierenden Objekts, um die AnimationTimeline auf die von Ihnen angegebene Eigenschaft anzuwenden.

Im folgenden Beispiel wird die Animierung von Breite und Hintergrundfarbe einer Button dargestellt.

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Imports System
Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls

Namespace Microsoft.Samples.Animation.LocalAnimations

    ' Create the demonstration.
    Public Class LocalAnimationExample
        Inherits Page

        Public Sub New()

            WindowTitle = "Animate Property Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(20)

            ' Create and set the Button.
            Dim aButton As New Button()
            aButton.Content = "A Button"

            ' Animate the Button's Width.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 75
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
            myDoubleAnimation.AutoReverse = True
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)

            ' Create and animate a Brush to set the button's Background.
            Dim myBrush As New SolidColorBrush()
            myBrush.Color = Colors.Blue

            Dim myColorAnimation As New ColorAnimation()
            myColorAnimation.From = Colors.Blue
            myColorAnimation.To = Colors.Red
            myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
            myColorAnimation.AutoReverse = True
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
            aButton.Background = myBrush

            ' Add the Button to the panel.
            myStackPanel.Children.Add(aButton)
            Me.Content = myStackPanel
        End Sub
    End Class
End Namespace

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

using System;
using System.Windows;
using System.Windows.Navigation;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls;

namespace Microsoft.Samples.Animation.LocalAnimations
{

    // Create the demonstration.
    public class LocalAnimationExample : Page 
    {




        public LocalAnimationExample()
        {


            WindowTitle = "Local Animation Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);                     


            // Create and set the Button.
            Button aButton = new Button();
            aButton.Content = "A Button";

            // Animate the Button's Width.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 75;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration =  new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);       

            // Create and animate a Brush to set the button's Background.
            SolidColorBrush myBrush = new SolidColorBrush();
            myBrush.Color = Colors.Blue;            

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration =  new Duration(TimeSpan.FromMilliseconds(7000));
            myColorAnimation.AutoReverse = true;
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);           
            aButton.Background = myBrush;

            // Add the Button to the panel.
            myStackPanel.Children.Add(aButton);
            this.Content = myStackPanel;
        }
    }

}

Uhranimationen

Verwenden Sie Clock-Objekte, wenn die Animation ohne ein Storyboard ausgeführt werden soll und Sie komplexe Zeitstrukturen erstellen oder die Animationen nach dem Start interaktiv steuern möchten. Sie können Uhrobjekte verwenden, um eine Abhängigkeitseigenschaft eines beliebigen Animatable-Objekts zu animieren.

Sie können die Clock-Objekte nicht direkt verwenden, um eine Animation in Stilen, Steuerelementvorlagen oder Datenvorlagen auszuführen. (Das Animations- und Zeitsteuerungssystem verwendet zwar Clock-Objekte zur Animation in Stilen, Steuerelementvorlagen und Datenvorlagen, muss diese Clock-Objekte jedoch aus einem Storyboard erstellen. Weitere Informationen über die Beziehung zwischen Storyboard-Objekten und Clock-Objekten finden Sie unter Übersicht über das Animations- und Zeitsteuerungssystem.)

Um ein einzelnes Clock-Objekt auf eine Eigenschaft anzuwenden, führen Sie die folgenden Schritte aus.

Erstellen Sie ein AnimationTimeline-Objekt.
Verwenden Sie die CreateClock-Methode der AnimationTimeline, um eine AnimationClock zu erstellen.
Verwenden Sie die ApplyAnimationClock-Methode des zu animierenden Objekts, um die AnimationClock auf die von Ihnen angegebene Eigenschaft anzuwenden.

Das folgende Beispiel zeigt, wie eine AnimationClock erstellt und auf zwei ähnliche Eigenschaften angewendet wird.

/*
    This example shows how to create and apply
    an AnimationClock.
*/

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;


namespace Microsoft.Samples.Animation.TimingBehaviors
{
    public class AnimationClockExample : Page
    {

        ScaleTransform myScaleTransform;

        public AnimationClockExample()
        {

            this.WindowTitle = "Opacity Animation Example";
            this.Background = Brushes.White;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create a button that with a ScaleTransform.
            // The ScaleTransform will animate when the
            // button is clicked.
            Button myButton = new Button();
            myButton.Margin = new Thickness(50);
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.Content = "Click Me";           
            myScaleTransform = new ScaleTransform(1,1);
            myButton.RenderTransform = myScaleTransform;


            // Associate an event handler with the
            // button's Click event.
            myButton.Click += new RoutedEventHandler(myButton_Clicked);

            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;
        }

        // Create and apply and animation when the button is clicked.
        private void myButton_Clicked(object sender, RoutedEventArgs e)
        {

            // Create a DoubleAnimation to animate the
            // ScaleTransform.
            DoubleAnimation myAnimation = 
                new DoubleAnimation(
                    1, // "From" value
                    5, // "To" value 
                    new Duration(TimeSpan.FromSeconds(5))
                );
            myAnimation.AutoReverse = true;

            // Create a clock the for the animation.
            AnimationClock myClock = myAnimation.CreateClock();            

            // Associate the clock the ScaleX and
            // ScaleY properties of the button's
            // ScaleTransform.
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleXProperty, myClock);
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleYProperty, myClock);
        }
    }
}

Um eine Zeitstruktur zu erstellen und sie zum Animieren von Eigenschaften zu verwenden, führen Sie die folgenden Schritte aus.

Verwenden Sie ParallelTimeline-Objekte und AnimationTimeline-Objekte, um die Zeitstruktur zu erstellen.
Verwenden Sie die CreateClock-Methode der Stamm-ParallelTimeline, um eine ClockGroup zu erstellen.
Durchlaufen Sie die Children der ClockGroup, und wenden Sie deren untergeordneten Clock-Objekte an. Verwenden Sie für jede untergeordnete AnimationClock die ApplyAnimationClock-Methode des zu animierenden Objekts, um die AnimationClock auf die von Ihnen angegebene Eigenschaft anzuwenden.

Weitere Informationen über Uhrobjekte finden Sie unter Übersicht über das Animations- und Zeitsteuerungssystem.

Pro-Frame-Animation: Umgehen des Animations- und Zeitsteuerungssystems

Verwenden Sie diesen Ansatz, wenn Sie das WPF-Animationssystem vollständig umgehen müssen. Ein Szenario für diesen Ansatz sind Animationen in der Physik, wonach jeder Animationsschritt eine Neuberechnung der Objekte auf Basis des letzten Satzes der Objektinteraktionen erfordert.

Pro-Frame-Animationen können nicht innerhalb von Stilen, Steuerelementvorlagen und Datenvorlagen definiert werden.

Um einen Frame nach dem anderen zu animieren, registrieren Sie sich für das Rendering-Ereignis des Objekts, das die zu animierenden Objekte enthält. Diese Ereignishandlermethode wird einmal pro Frame aufgerufen. Immer wenn WPF die beibehaltenen Renderingdaten in der visuellen Struktur für die Kompositionsstruktur marshallt, wird die Ereignishandlermethode aufgerufen.

Führen Sie im Ereignishandler alle für den Animationseffekt erforderlichen Berechnungen durch, und legen Sie die Eigenschaften der Objekte fest, die mit diesen Werten animiert werden sollen.

Um die Präsentationszeit des aktuellen Frames abzurufen, kann die diesem Ereignis zugewiesene EventArgs-Klasse in RenderingEventArgs umgewandelt werden. Hierdurch wird eine RenderingTime-Eigenschaft bereitgestellt, mit deren Hilfe Sie die Renderingzeit des aktuellen Frames abrufen können.

Weitere Informationen finden Sie auf der Seite Rendering. Ein Beispiel hierfür finden Sie unter Beispiel für die Pro-Frame-Animation.