Übersicht über die Verfahren zur Animation von Eigenschaften
In diesem Thema werden die unterschiedlichen Ansätze zum Animieren von Eigenschaften beschrieben: Storyboard-Animationen, lokale Animationen, Uhren- und Pro-Frame-Animationen.
Erforderliche Komponenten
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 oder eine komplexe Animationsstruktur erstellen möchten, bzw. 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 Eigenschaften TargetName 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, Eigenschaften-Trigger oder 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 |
Format |
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 Eigenschaftswerts |
BeginStoryboard und einem DataTrigger |
Nein |
Ja |
Ja |
Ja |
|
Begin-Methode |
Ja |
Nein |
Nein |
Nein |
Gewusst wie: Animieren einer Eigenschaft unter Verwendung eines Storyboards |
Weitere Informationen zu Storyboard-Objekten finden Sie in der Ü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;
}
}
}
/*
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;
};
};
}
}
}
}
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.
'
Imports System
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 myScaleTransform As ScaleTransform
Public Sub New()
Me.WindowTitle = "Opacity Animation Example"
Me.Background = Brushes.White
Dim myStackPanel As New StackPanel()
myStackPanel.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()
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.
AddHandler myButton.Click, AddressOf myButton_Clicked
myStackPanel.Children.Add(myButton)
Me.Content = myStackPanel
End Sub
' Create and apply and animation when the button is clicked.
Private Sub myButton_Clicked(ByVal sender As Object, ByVal e As RoutedEventArgs)
' Create a DoubleAnimation to animate the
' ScaleTransform.
Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) ' "To" value - "From" value
myAnimation.AutoReverse = True
' 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
/*
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.