Übersicht über die Verfahren zur Animation von Eigenschaften
Dieses Thema beschreibt die unterschiedlichen Ansätze zum Animieren von Eigenschaften: Storyboards, lokale Animationen, Uhren und Pro-Frame-Animationen.
Voraussetzungen
Als Voraussetzung für dieses Thema sollten Sie mit den grundlegenden Animationsfunktionen unter Übersicht über Animationen vertraut sein.
Verschiedene Methoden zum Animieren
Da viele unterschiedliche Szenarien zum Animieren von Eigenschaften vorhanden sind, bietet WPF mehrere Ansätze zum Animieren von Eigenschaften.
Für jeden der Ansätze gibt die folgende Tabelle an, ob er pro Instanz, in Stilen, in Steuerelementvorlagen oder in Datenvorlagen verwendet werden kann, ob er in XAML verwendet werden kann und ob er Ihnen ermöglicht, die Animation interaktiv steuern kann. „Pro Instanz“ bezieht sich auf das Verfahren, eine Animation oder ein Storyboard direkt auf Instanzen eines Objekts und nicht in einem Stil, einer Steuerelementvorlage oder einer Datenvorlage anzuwenden.
| Animationsmethode | 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 | – |
Storyboard-Animationen
Verwenden Sie ein Storyboard, wenn Sie Ihre Animationen in XAML definieren und anwenden, Ihre Animationen nach dem Start interaktiv steuern, einen komplexen Baum von Animationen erstellen oder in einem Style, ControlTemplate oder DataTemplate animieren möchten. Damit ein Objekt von einem Storyboardanimiert werden kann, muss es sich um ein FrameworkElement oder FrameworkContentElementoder, oder es muss verwendet werden, um ein oder FrameworkElementoder ein FrameworkContentElement Objekt festzulegen. Weitere Einzelheiten finden Sie unter Übersicht über Storyboards.
Storyboard ist eine besondere Container-Art Timeline, die Zielinformationen für die darin enthaltenen Animationen enthält. Um mit einem Storyboard zu animieren, führen Sie die folgenden drei Schritte aus.
Deklarieren Sie eine Storyboard und eine oder mehrere Animationen.
Verwenden Sie die TargetName und angehängten TargetProperty-Eigenschaften, um das Zielobjekt und die Eigenschaft jeder Animation anzugeben.
(Nur Code) Definieren eines für ein NameScope oder FrameworkElement.FrameworkContentElement Registrieren Sie die Namen der zu animierenden Objekte mit diesem FrameworkElement oder FrameworkContentElement.
Beginnen Sie mit dem Storyboard.
Zu Beginn wendet Storyboard Animationen auf die Eigenschaften an, die sie animieren und startet sie. Es gibt zwei Möglichkeiten, eine Storyboard zu beginnen: Sie können die von der Storyboard-Klasse bereitgestellte Begin-Methode verwenden, oder Sie können eine BeginStoryboard-Aktion verwenden. Die einzige Möglichkeit, in XAML zu animieren, ist die Verwendung einer BeginStoryboard-Aktion. Eine BeginStoryboard Aktion kann in einer EventTriggerEigenschaft Trigger oder einer DataTrigger.
Die folgende Tabelle zeigt die unterschiedlichen Stellen, an denen die einzelnen Storyboard-Startmethoden unterstützt werden: pro Instanz, Stil, Steuerelementvorlage und Datenvorlage.
| Storyboard wird gestartet mit... | Pro Instanz | Stil | Steuerelementvorlage | Datenvorlage | Beispiel |
|---|---|---|---|---|---|
| BeginStoryboard und einer EventTrigger | Ja | Ja | Ja | Ja | Animieren einer Eigenschaft unter Verwendung eines Storyboards |
| BeginStoryboardund Hinzufügen einer Eigenschaft Trigger | Nein | Ja | Ja | Ja | Auslösen einer Animation, wenn sich eine Eigenschaft ändert |
| BeginStoryboard und eine DataTrigger | Nein | Ja | Ja | Ja | Vorgehensweise: Auslösen einer Animation bei Änderung eines Eigenschaftswerts |
| Begin-Methode | Ja | Nr. | Nr. | Nein | Animieren einer Eigenschaft unter Verwendung eines Storyboards |
Weitere Informationen über Storyboard-Objekte finden Sie in der Übersicht über Storyboards.
Lokale Animationen
Lokale Animationen bieten eine einfache Möglichkeit, eine Abhängigkeitseigenschaft eines Animatable-Objekts zu animieren. Verwenden Sie lokale Animationen, wenn Sie eine einzelne Animation auf eine Eigenschaft anwenden möchten und Sie die Animation nach dem Start nicht interaktiv steuern müssen. Im Gegensatz zu einer Storyboard-Animation kann eine lokale Animation ein Objekt animieren, das nicht mit einer FrameworkElement oder einer FrameworkContentElement verknüpft ist. Außerdem müssen Sie keinen NameScope für diese Art von Animation definieren.
Lokale Animationen können nur in Code verwendet und können nicht in Stilen, Steuerelementvorlagen oder Datenvorlagen definiert werden. Eine lokale Animation kann nicht interaktiv gesteuert werden, nachdem sie gestartet wurde.
Zum Animieren mithilfe einer lokalen Animation führen Sie folgende Schritte aus.
Erstellen Sie ein AnimationTimeline-Objekt.
Verwenden Sie die BeginAnimation-Methode des Objekts, das Sie animieren möchten, um sie auf die AnimationTimeline von Ihnen angegebene Eigenschaft anzuwenden.
Im folgenden Beispiel wird die Animation von Breite und Hintergrundfarbe eines Button dargestellt.
/*
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 ohne ein Storyboard animieren möchten und komplexe Timing-Bäume erstellen oder Animationen interaktiv steuern möchten, nachdem sie gestartet wurden. Sie können Clock-Objekte verwenden, um eine abhängige Eigenschaft eines beliebigen Animatable-Objekts zu animieren.
Sie können mit Clock-Objekten nicht direkt in Stilen, Steuerelementvorlagen oder Datenvorlagen animieren. (Das Animations- und Zeitsteuerungssystem verwendet tatsächlich Clock-Objekte für die Animation in Stilen, Steuervorlagen und Datenvorlagen, aber es muss diese Clock-Objekte für Sie aus einem Storyboard-Element erstellen. Weitere Informationen zur Beziehung zwischen Storyboard-Objekten und Clock-Objekten finden Sie in der Übersicht über das Animations- und Zeitsteuerungssystem.)
Um eine Single-Clock auf eine Eigenschaft anzuwenden, führen Sie die folgenden Schritte aus.
Erstellen Sie ein AnimationTimeline-Objekt.
Verwenden Sie die CreateClock-Methode der AnimationTimeline zur Erstellung einer AnimationClock.
Verwenden Sie die ApplyAnimationClock-Methode des Objekts, das Sie animieren möchten, um sie auf die AnimationClock von Ihnen angegebene Eigenschaft anzuwenden.
Das folgende Beispiel zeigt, wie ein 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);
}
}
}
'
' 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
Um eine Zeitsteuerungsstruktur zu erstellen und zum Animieren von Eigenschaften zu verwenden, führen Sie die folgenden Schritte aus.
Verwenden sie ParallelTimeline und AnimationTimeline Objekte, um die Anzeigedauerstruktur zu erstellen.
Verwenden Sie den CreateClock Stamm ParallelTimeline, um eine ClockGroup.
Iterieren Sie durch die ChildrenClockGroup untergeordneten Clock Objekte und wenden Sie sie an. Verwenden Sie für jedes untergeordnetes AnimationClock die ApplyAnimationClock-Methode des Objekts, das Sie animieren möchten, um sie auf die AnimationClock von Ihnen angegebene Eigenschaft anzuwenden.
Weitere Informationen zu Uhrobjekten finden Sie unter Übersicht über das Animations- und Zeitsteuerungssystem.
Pro-Frame-Animation: Umgehen Sie das Animations- und Zeitsteuerungssystem
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. Hier setzt jeder Schritt der Animation voraus, dass Objekte basierend auf dem letzten Satz von Objektinteraktionen neu berechnet werden müssen.
Pro-Frame-Animationen können nicht innerhalb der Stile, Steuerelementvorlagen oder Datenvorlagen definiert werden.
Um frameweise zu animieren, registrieren Sie sich für das Rendering-Ereignis des Objekts, das die Objekte enthält, die Sie animieren möchten. 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 Sie mit diesen Werten animieren möchten.
Um die Darstellungszeit des aktuellen Frames zu erhalten, können Sie die mit diesem Ereignis verknüpfte EventArgs als RenderingEventArgs umwandeln, die eine RenderingTime bereitstellt, mit der Sie die Rendering-Zeit des aktuellen Frames erhalten.
Weitere Informationen finden Sie auf der Rendering-Seite.
Weitere Informationen
.NET Desktop feedback