Übersicht über Animationstechniken für Eigenschaften

Artikel
12/18/2024

In diesem Thema werden die verschiedenen Ansätze zum Animieren von Eigenschaften beschrieben: Storyboards, lokale Animationen, Uhren und Animationen pro Frame.

Voraussetzungen

Um dieses Thema zu verstehen, sollten Sie mit den grundlegenden Animationsfeatures vertraut sein, die in der Animationsübersichtbeschrieben sind.

Verschiedene Möglichkeiten zum Animieren

Da es viele verschiedene Szenarien zum Animieren von Eigenschaften gibt, bietet WPF mehrere Ansätze zum Animieren von Eigenschaften.

Für jeden Ansatz gibt die folgende Tabelle an, ob sie pro Instanz, in Formatvorlagen, in Steuerelementvorlagen oder in Datenvorlagen verwendet werden kann; ob sie in XAML verwendet werden kann; und ob der Ansatz Ihnen die interaktive Steuerung der Animation ermöglicht. "Pro Instanz" bezieht sich auf die Technik, eine Animation oder ein Storyboard direkt auf Instanzen eines Objekts anzuwenden, anstatt in einer Formatvorlage, Steuerelementvorlage oder Datenvorlage.

Animationstechnik	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
Animation pro Bild	Pro Instanz	Nein	N/A

Storyboardanimationen

Verwenden Sie eine Storyboard, wenn Sie Ihre Animationen in XAML definieren und anwenden möchten, Ihre Animationen nach dem Start interaktiv steuern, eine komplexe Struktur von Animationen erstellen oder in einem Style, ControlTemplate oder DataTemplateanimieren möchten. Damit ein Objekt von einem Storyboardanimiert werden kann, muss es entweder ein FrameworkElement oder ein FrameworkContentElementsein oder dazu verwendet werden, um ein FrameworkElement oder ein FrameworkContentElementfestzulegen. Weitere Informationen finden Sie in der Storyboards Overview.

Ein Storyboard ist ein spezieller Containertyp Timeline, der Zielinformationen für die darin enthaltenen Animationen bereitstellt. Zum Animieren mit einem Storyboardführen Sie die folgenden drei Schritte aus.

Deklarieren Sie ein Storyboard sowie eine oder mehrere Animationen.
Verwenden Sie die angefügten Eigenschaften TargetName und TargetProperty, um das Zielobjekt und die Eigenschaft jeder Animation anzugeben.
(Nur Code) Definieren Sie eine NameScope für eine FrameworkElement oder FrameworkContentElement. Registrieren Sie die Namen der Objekte, die mit FrameworkElement oder FrameworkContentElementanimiert werden sollen.
Beginnen Sie das Storyboard.

Durch den Beginn eines Storyboard werden Animationen auf die zu animierenden Eigenschaften angewendet und gestartet. Es gibt zwei Möglichkeiten, eine Storyboardzu beginnen: 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 zum Animieren in XAML ist die Verwendung einer BeginStoryboard Aktion. Eine BeginStoryboard-Aktion kann in einem EventTrigger, einer Eigenschaft Triggeroder einem DataTriggerverwendet werden.

In der folgenden Tabelle sind die verschiedenen Bereiche aufgeführt, an denen die Storyboard-Begin-Technik unterstützt wird: pro Instanz, Formatvorlage, Steuerelementvorlage und Datenvorlage.

Storyboard wird gestartet mit...	Pro Instanz	Stil	Kontrollvorlage	Datenvorlage	Beispiel
BeginStoryboard und EventTrigger	Ja	Ja	Ja	Ja	Eine Eigenschaft mit einem Storyboard animieren
BeginStoryboard und eine Eigenschaft Trigger	Nein	Ja	Ja	Ja	Eine Animation auslösen, wenn sich ein Eigenschaftswert ändert
BeginStoryboard und eine DataTrigger	Nein	Ja	Ja	Ja	So lösen Sie eine Animation bei Datenänderungen aus
Begin-Methode	Ja	Nein	Nein	Nein	Eine Eigenschaft mithilfe eines Storyboards animieren

Weitere Informationen zu Storyboard Objekten finden Sie in der Storyboard-Übersicht.

Lokale Animationen

Lokale Animationen bieten eine bequeme Möglichkeit zum Animieren einer Abhängigkeitseigenschaft eines beliebigen Animatable-Objekts. Verwenden Sie lokale Animationen, wenn Sie eine einzelne Animation auf eine Eigenschaft anwenden möchten, ohne dass Sie die Animation nach dem Start interaktiv steuern müssen. Im Gegensatz zu einer Storyboard Animation kann eine lokale Animation ein Objekt animieren, das keinem FrameworkElement oder einem FrameworkContentElementzugeordnet ist. Sie müssen auch kein NameScope für diesen Animationstyp definieren.

Lokale Animationen können nur im Code verwendet werden und können nicht in Formatvorlagen, Steuerelementvorlagen oder Datenvorlagen definiert werden. Eine lokale Animation kann nach dem Starten nicht interaktiv gesteuert werden.

Führen Sie die folgenden Schritte aus, um mithilfe einer lokalen Animation zu animieren.

Erstellen Sie ein AnimationTimeline-Objekt.
Verwenden Sie die BeginAnimation Methode des Objekts, das Sie animieren möchten, um die AnimationTimeline auf die angegebene Eigenschaft anzuwenden.

Das folgende Beispiel zeigt, wie die Breite und die Hintergrundfarbe eines Buttonanimiert werden.

/*

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

*/

using namespace System;
using namespace System::Windows;
using namespace System::Windows::Navigation;
using namespace System::Windows::Media;
using namespace System::Windows::Media::Animation;
using namespace System::Windows::Shapes;
using namespace System::Windows::Controls;


namespace Microsoft {
   namespace Samples {
      namespace Animation {
         namespace LocalAnimations {
            // Create the demonstration.
            public ref class LocalAnimationExample : Page {

            public: 
               LocalAnimationExample ()
               {
                  WindowTitle = "Local Animation Example";
                  StackPanel^ myStackPanel = gcnew StackPanel();
                  myStackPanel->Margin = Thickness(20);

                  // Create and set the Button.
                  Button^ aButton = gcnew Button();
                  aButton->Content = "A Button";

                  // Animate the Button's Width.
                  DoubleAnimation^ myDoubleAnimation = gcnew DoubleAnimation();
                  myDoubleAnimation->From = 75;
                  myDoubleAnimation->To = 300;
                  myDoubleAnimation->Duration = 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 = gcnew SolidColorBrush();
                  myBrush->Color = Colors::Blue;

                  ColorAnimation^ myColorAnimation = gcnew ColorAnimation();
                  myColorAnimation->From = Colors::Blue;
                  myColorAnimation->To = Colors::Red;
                  myColorAnimation->Duration = 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;
               };
            };
         }
      }
   }
}

/*

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

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

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

Uhranimationen

Verwenden Sie Clock Objekte, wenn Sie Animationen erstellen möchten, ohne eine Storyboard zu verwenden, und komplexe Zeitablaufbäume erstellen oder Animationen nach ihrem Start interaktiv steuern möchten. Sie können Clock-Objekte verwenden, um eine Abhängigkeitseigenschaft eines beliebigen Animatable Objekts zu animieren.

Sie können Clock-Objekte nicht direkt zum Animieren in Stilen, Steuerelementvorlagen oder Datenvorlagen verwenden. (Das Animations- und Zeitsystem verwendet tatsächlich Clock Objekte zum Animieren in Formatvorlagen, Steuerelementvorlagen und Datenvorlagen, aber es muss diese Clock Objekte für Sie aus einer Storyboarderstellen. Weitere Informationen zur Beziehung zwischen Storyboard Objekten und Clock Objekten finden Sie in der Übersicht über das Animations- und Zeitsystem.)

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

Erstellen Sie ein AnimationTimeline-Objekt.
Verwenden Sie die CreateClock-Methode der AnimationTimeline, um ein AnimationClockzu erzeugen.
Verwenden Sie die ApplyAnimationClock Methode des Objekts, das Sie animieren möchten, um die AnimationClock auf die angegebene Eigenschaft anzuwenden.

Das folgende Beispiel zeigt, wie Sie eine AnimationClock erstellen und auf zwei ähnliche Eigenschaften anwenden.

/*
    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);
        }
    }
}

'
'    This example shows how to create and apply
'    an AnimationClock.
'


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


Namespace Microsoft.Samples.Animation.TimingBehaviors
    Public Class AnimationClockExample
        Inherits Page

        Private ReadOnly myScaleTransform As ScaleTransform

        Public Sub New()

            WindowTitle = "Opacity Animation Example"
            Background = Brushes.White
            Dim myStackPanel As New StackPanel With {
                .Margin = New Thickness(20)
            }

                ' Create a button that with a ScaleTransform.
                ' The ScaleTransform will animate when the
                ' button is clicked.
            Dim myButton As New Button With {
                .Margin = New Thickness(50),
                .HorizontalAlignment = HorizontalAlignment.Left,
                .Content = "Click Me"
            }
            myScaleTransform = New ScaleTransform(1,1)
            myButton.RenderTransform = myScaleTransform


            ' Associate an event handler with the
            ' button's Click event.
            AddHandler myButton.Click, AddressOf myButton_Clicked

            myStackPanel.Children.Add(myButton)
            Content = myStackPanel
        End Sub

        ' Create and apply and animation when the button is clicked.
        Private Sub myButton_Clicked(sender As Object, e As RoutedEventArgs)

            ' Create a DoubleAnimation to animate the
            ' ScaleTransform.
            Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) With {
                .AutoReverse = True
            } ' "To" value -  "From" value

            ' Create a clock the for the animation.
            Dim myClock As AnimationClock = 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)
        End Sub
    End Class
End Namespace

Führen Sie die folgenden Schritte aus, um einen Timing-Baum zu erstellen und damit Eigenschaften zu animieren.

Verwenden Sie die ParallelTimeline- und AnimationTimeline-Objekte, um den Timing-Baum zu erstellen.
Verwenden Sie die CreateClock vom Stamm ParallelTimeline, um eine ClockGroupzu erstellen.
Durchlaufen Sie die Children des ClockGroup und wenden Sie untergeordnete Clock Objekte an. Verwenden Sie für jedes AnimationClock-Kindelement die ApplyAnimationClock-Methode des Objekts, das animiert werden soll, um die AnimationClock auf die von Ihnen angegebene Eigenschaft anzuwenden.

Weitere Informationen zu Clock-Objekten finden Sie unter Überblick über das Animations- und Zeitsystem.

Per-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 ist Physikanimationen, bei denen jeder Schritt in der Animation objekte basierend auf der letzten Gruppe von Objektinteraktionen neu komputiert werden muss.

Animationen pro Frame können nicht innerhalb von Formatvorlagen, Steuerelementvorlagen oder Datenvorlagen definiert werden.

Um Animationen Bild für Bild durchzuführen, melden Sie sich für das Rendering-Ereignis des Objekts an, das die zu animierenden Objekte enthält. Diese Ereignishandlermethode wird einmal pro Frame aufgerufen. Jedes Mal, wenn WPF die gespeicherten Renderingdaten im visuellen Baum in den Kompositionsbaum überführt, wird Ihre Ereignishandlermethode aufgerufen.

Führen Sie im Ereignishandler alle Berechnungen aus, die für den Animationseffekt erforderlich sind, und legen Sie die Eigenschaften der Objekte fest, die Sie mit diesen Werten animieren möchten.

Um die Präsentationszeit für den aktuellen Frame abzurufen, kann die EventArgs, dem diesem Ereignis zugeordnet ist, als RenderingEventArgsgecastet werden, wodurch eine RenderingTime-Eigenschaft bereitgestellt wird, die Sie zum Abrufen der Renderzeit des aktuellen Frames verwenden können.

Weitere Informationen finden Sie auf der Rendering-Seite.

Siehe auch

Animationsübersicht
Übersicht über Storyboards
Übersicht über Animation- und Timing-System
Übersicht über Abhängigkeitseigenschaften

Freigeben über