Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
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übersicht beschrieben 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 |
| Animationen pro Frame | Pro Instanz | Nein | Nicht verfügbar |
Storyboardanimationen
Verwenden Sie ein 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 DataTemplate animieren möchten. Damit ein Objekt von einem Storyboard animiert werden kann, muss es sich um ein FrameworkElement oder FrameworkContentElement handeln, oder es muss verwendet werden, um ein FrameworkElement oder FrameworkContentElement festzulegen. Weitere Details finden Sie unter " Storyboards Overview".
A Storyboard ist ein spezieller Containertyp Timeline , der Zielinformationen für die darin enthaltenen Animationen bereitstellt. Um mit einem Storyboard zu animieren, führen Sie die folgenden drei Schritte aus.
Deklarieren Sie ein Storyboard und eine oder mehrere Animationen.
Verwenden Sie die angefügten Eigenschaften von TargetName und TargetProperty, um das Zielobjekt und die Eigenschaft jeder Animation anzugeben.
(Nur Code) Definieren Sie ein NameScope für ein FrameworkElement oder ein FrameworkContentElement. Registrieren Sie die Namen der Objekte, die mit FrameworkElement oder FrameworkContentElement animiert werden sollen.
Beginnen Sie mit dem Storyboard.
Beim Starten einer Storyboard werden Animationen auf die Eigenschaften angewendet, die sie animieren, und sie werden gestartet. Es gibt zwei Möglichkeiten, ein Storyboard zu beginnen: Sie können die von der Begin Klasse bereitgestellte Storyboard Methode verwenden, 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 Trigger, oder einem DataTrigger verwendet werden.
In der folgenden Tabelle sind die verschiedenen Stellen aufgeführt, an denen jede jeweilige Storyboard Begin-Technik unterstützt wird: pro Instanz, Stil, Steuerelementvorlage und Datenvorlage.
| Die Arbeit mit dem Storyboard beginnt... | Pro Instanz | Stil | Steuerelementvorlage | Datenvorlage | Beispiel |
|---|---|---|---|---|---|
| BeginStoryboard und ein EventTrigger | Ja | Ja | Ja | Ja | Animieren einer Eigenschaft mithilfe eines Storyboards |
| BeginStoryboard und eine Eigenschaft Trigger | Nein | Ja | Ja | Ja | Auslösen einer Animation, wenn sich ein Eigenschaftswert ändert |
| BeginStoryboard und a DataTrigger | Nein | Ja | Ja | Ja | Vorgehensweise: Auslösen einer Animation beim Ändern von Daten |
| Begin-Methode | Ja | Nein | Nein | Nein | Animieren einer Eigenschaft mithilfe eines Storyboards |
Weitere Informationen zu Storyboard Objekten finden Sie in der Storyboards Overview.
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, und Sie müssen die Animation nach dem Start nicht interaktiv steuern. Im Gegensatz zu einer Storyboard Animation kann eine lokale Animation ein Objekt animieren, das nicht mit einem FrameworkElement oder einem FrameworkContentElement verbunden 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 AnimationTimeline auf die von Ihnen angegebene Eigenschaft anzuwenden.
Im folgenden Beispiel wird die Animation von Breite und Hintergrundfarbe eines Button-Elements 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 Verwendung einer Storyboard Animation animieren möchten und Sie nach dem Start komplexe Zeitstrukturen erstellen oder Animationen 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 in Formatvorlagen, Steuerelementvorlagen oder Datenvorlagen animieren. (Das Animations- und Anzeigesystem verwendet Clock tatsächlich Objekte, um Animationen in Stilen, Steuerelementvorlagen und Datenvorlagen durchzuführen, aber es muss diese Clock Objekte für Sie aus einer Storyboard erstellen. Weitere Informationen zur Beziehung zwischen Storyboard Objekten und Clock Objekten finden Sie unter Animation and Timing System Overview.)
Zum Anwenden einer einzelnen Clock auf eine Eigenschaft führen Sie die folgenden Schritte aus.
Erstellen Sie ein AnimationTimeline-Objekt.
Verwenden Sie die CreateClock-Methode des AnimationTimeline, um ein AnimationClock zu erstellen.
Verwenden Sie die ApplyAnimationClock-Methode des Objekts, das Sie animieren möchten, um AnimationClock auf die von Ihnen 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 Zeitbaum zu erstellen und Eigenschaften zu animieren.
Verwenden Sie ParallelTimeline und AnimationTimeline Objekte, um die Zeitstruktur zu erstellen.
Verwenden Sie das CreateClock des Wurzel ParallelTimeline um ein ClockGroup zu erstellen.
Durchlaufen Sie die Children des ClockGroup und wenden Sie die untergeordneten Clock Objekte an. Verwenden Sie für jedes AnimationClock untergeordnete Element die ApplyAnimationClock Methode des Objekts, das Sie animieren möchten, um die AnimationClock angegebene Eigenschaft auf die angegebene Eigenschaft anzuwenden.
Weitere Informationen zu Clock-Objekten finden Sie unter " Animation and Timing System Overview".
Per-Frame Animation: Umgehen des Animations- und Timing-Systems
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 frame-by-frame 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. Jedes Mal, wenn WPF die gespeicherten Renderingdaten im visuellen Baum in den Kompositionsbaum marshallt, 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 das mit diesem Ereignis verbundene EventArgs als RenderingEventArgs gecastet werden, was eine RenderingTime Eigenschaft bereitstellt, die Sie verwenden können, um die Renderingzeit des aktuellen Frames abzurufen.
Weitere Informationen finden Sie auf der Rendering Seite.
Siehe auch
Zusammenarbeit auf GitHub
Die Quelle für diesen Inhalt finden Sie auf GitHub, wo Sie auch Issues und Pull Requests erstellen und überprüfen können. Weitere Informationen finden Sie in unserem Leitfaden für Mitwirkende.
.NET Desktop feedback