Freigeben über

Übersicht über Animationen

  • Artikel

Windows Presentation Foundation (WPF) stellt einen Satz leistungsstarker Grafik- und Layoutfunktionen zur Verfügung, mit dem Sie attraktive Benutzeroberflächen und ansprechende Dokumente erstellen können. Durch Animationen kann eine attraktive Benutzeroberfläche noch eindrucksvoller und verwendbarer werden. Sie können eindrucksvolle Bildschirmübergänge erstellen oder hilfreiche visuelle Hinweise geben, indem Sie einfach eine Hintergrundfarbe animieren oder ein animiertes Transform-Objekt anwenden.

Diese Übersicht enthält eine Einführung in das Animations- und Zeitsteuerungssystem von WPF. Dabei wird hauptsächlich die Animation von WPF-Objekten mithilfe von Storyboards behandelt.

Dieses Thema enthält folgende Abschnitte.

  • Einführung in Animationen
  • Animationssystem für WPF-Eigenschaften
  • Beispiel: Ein- und Ausblenden eines Elements
  • Animationstypen
  • Anwenden einer Animation auf eine Eigenschaft
  • Interaktives Steuern eines Storyboards
  • Was geschieht am Ende einer Animation?
  • Datenbindung und Animieren von Animationen
  • Andere Möglichkeiten für Animationen
  • Beispiele für Animationen
  • Verwandte Themen
  • Verweis

Einführung in Animationen

Eine Animation entsteht, indem eine Serie von Bildern, die sich jeweils ein wenig voneinander unterscheiden, schnell periodisch durchlaufen wird. Das Gehirn nimmt die Gruppe von Bildern als eine einzelne, sich ändernde Szene wahr. Beim Filmen wird diese Illusion mithilfe einer Kamera erzeugt, die in jeder Sekunde viele Fotos (Frames) aufzeichnet. Wenn die Frames von einem Projektor wiedergegeben werden, nehmen die Zuschauer ein bewegtes Bild wahr.

Animationen auf einem Computer funktionieren ähnlich. Beispielsweise arbeitet ein Programm, das die Zeichnung eines Rechtecks langsam ausblendet, möglicherweise wie folgt.

  • Das Programm erstellt einen Zeitgeber.

  • Das Programm überprüft den Zeitgeber in festgelegten Intervallen, um festzustellen, wie viel Zeit verstrichen ist.

  • Bei jedem Überprüfen des Zeitgebers berechnet das Programm auf Grundlage der verstrichenen Zeit den aktuellen Lichtdurchlässigkeitswert für das Rechteck.

  • Anschließend aktualisiert das Programm das Rechteck mit dem neuen Wert und zeichnet es neu.

Vor WPF mussten Microsoft Windows-Entwickler eigene Zeitsteuerungssysteme erstellen und verwalten oder spezielle benutzerdefinierte Bibliotheken verwenden. WPF beinhaltet ein effizientes Zeitsteuerungssystem, das über verwalteten Code und Extensible Application Markup Language (XAML) verfügbar gemacht wird und tief in das WPF-Framework integriert ist. Die WPF-Animation ermöglicht das problemlose Animieren von Steuerelementen und anderen grafischen Objekten.

WPF leistet die gesamte Hintergrundarbeit zum Verwalten eines Zeitsteuerungssystems und effizienten Neuzeichnen des Bildschirms. Es werden Zeitsteuerungsklassen bereitgestellt, mit deren Hilfe Sie sich auf die gewünschten Effekte konzentrieren können, anstatt sich mit den technischen Feinheiten dieser Effekte beschäftigen zu müssen. Außerdem lassen sich mit WPF auf einfache Weise eigene Animationen erstellen, da Animationsbasisklassen bereitgestellt werden, von denen Sie Ihre Klassen für benutzerdefinierte Animationen ableiten können. Diese benutzerdefinierten Animationen profitieren in großem Umfang von den Leistungsvorteilen der Standardanimationsklassen.

Animationssystem für WPF-Eigenschaften

Der Umgang mit WPF-Animationen fällt einfacher, wenn Ihnen einige wichtige Konzepte des Zeitsteuerungssystems bekannt sind. Am wichtigsten ist, dass Sie Objekte in WPF animieren, indem Sie Animationen auf ihre einzelnen Eigenschaften anwenden. Um beispielsweise ein Frameworkelement zu vergrößern, animieren Sie dessen Eigenschaften Width und Height. Um ein Objekt auszublenden, animieren Sie dessen Opacity-Eigenschaft.

Eine Eigenschaft ist animierbar, wenn sie die folgenden drei Anforderungen erfüllt:

  • Es muss eine Abhängigkeitseigenschaft sein.

  • Sie muss zu einer Klasse gehören, die von DependencyObject abgeleitet ist und die IAnimatable-Schnittstelle implementiert.

  • Es muss ein kompatibler Animationstyp verfügbar sein. (Wenn WPF keinen zur Verfügung stellt, können Sie einen eigenen erstellen. Weitere Informationen finden Sie unter Übersicht über benutzerdefinierte Animationen.)

WPF enthält viele Objekte mit IAnimatable-Eigenschaft. Steuerelemente wie Button und TabControl sowie das Panel-Objekt und das Shape-Objekt sind von DependencyObject abgeleitet. Die meisten Eigenschaften sind dabei Abhängigkeitseigenschaften.

Sie können Animationen fast überall verwenden, auch in Stil- und Steuerelementvorlagen. Animationen müssen nicht visuell sein, Sie können auch Objekte animieren, die nicht zur Benutzeroberfläche gehören, sofern sie den in diesem Abschnitt genannten Kriterien entsprechen.

Beispiel: Ein- und Ausblenden eines Elements

In diesem Beispiel wird gezeigt, wie eine WPF-Animation verwendet wird, um den Wert einer Abhängigkeitseigenschaft zu animieren. Dabei wird eine DoubleAnimation verwendet. Durch diesen Animationstyp werden Double-Werte generiert, um die Opacity-Eigenschaft eines Rectangle zu animieren. Dadurch wird das Rectangle ein- und ausgeblendet.

Im ersten Teil des Beispiels wird ein Rectangle-Element erstellt. In den weiteren Schritten wird gezeigt, wie eine Animation erstellt und auf die Opacity-Eigenschaft des Rechtecks angewendet wird.

Im Folgenden wird gezeigt, wie ein Rectangle-Element in einem StackPanel in XAML erstellt wird.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

Im Folgenden wird gezeigt, wie ein Rectangle-Element in einem StackPanel im Code erstellt wird.

Dim myPanel As StackPanel = New StackPanel
myPanel.Margin = New Thickness(10)

Dim myRectangle As Rectangle = New Rectangle
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

StackPanel myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

Rectangle myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;

Teil 1: Erstellen einer DoubleAnimation

Eine Möglichkeit, ein Element ein- und auszublenden, besteht darin, dessen Opacity-Eigenschaft zu animieren. Da die Opacity-Eigenschaft den Typ Double hat, benötigen Sie eine Animation, die Double-Werte erzeugt. Eine solche Animation ist DoubleAnimation. DoubleAnimation erstellt einen Übergang zwischen zwei Double-Werten. Setzen Sie die From-Eigenschaft, um den Startwert anzugeben. Setzen Sie die To-Eigenschaft, um den Endwert anzugeben.

  1. Beim Durchlässigkeitswert 1.0 wird das Objekt vollkommen deckend angezeigt, bei 0.0 ist es unsichtbar. Damit die Animation von 1.0 in 0.0 übergeht, setzen Sie die From-Eigenschaft auf 1.0 und die To-Eigenschaft auf 0.0. Im Folgenden wird gezeigt, wie ein DoubleAnimation in XAML erstellt wird.

    <DoubleAnimation From="1.0" To="0.0" />

    Im Folgenden wird gezeigt, wie eine DoubleAnimation im Code erstellt wird.

    Dim myDoubleAnimation As DoubleAnimation = New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0

    DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;

  2. Danach müssen Sie Duration angeben. Die Duration einer Animation gibt an, wie lange der Übergang vom Startwert zum Zielwert dauert. Im Folgenden wird gezeigt, wie die Duration in XAML auf fünf Sekunden festgelegt wird.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

    Im Folgenden wird gezeigt, wie die Duration im Code auf fünf Sekunden festgelegt wird.

    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

  3. Der obige Code zeigt eine Animation, die von 1.0 in 0.0 übergeht. Dadurch wird das Zielelement erst vollkommen deckend angezeigt und dann langsam unsichtbar. Damit das Element nach dem Ausblenden wieder eingeblendet wird, setzen Sie die AutoReverse-Eigenschaft der Animation auf true. Damit die Animation endlos wiederholt wird, legen Sie ihre RepeatBehavior-Eigenschaft auf Forever fest. Im Folgenden wird gezeigt, wie die AutoReverse- und RepeatBehavior-Eigenschaften in XAML festgelegt werden.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>

    Im Folgenden wird gezeigt, wie die AutoReverse- und RepeatBehavior-Eigenschaften im Code festgelegt werden.

    myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

    myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

Teil 2: Erstellen eines Storyboards

Um eine Animation auf ein Objekt anzuwenden, erstellen Sie ein Storyboard und verwenden die angefügten Eigenschaften TargetName und TargetProperty zum Angeben des Objekts und der zu animierenden Eigenschaft.

  1. Erstellen Sie das Storyboard, und fügen Sie die Animation als untergeordnetes Element hinzu. Im Folgenden wird gezeigt, wie das Storyboard in XAML erstellt wird.

    Um das Storyboard im Code zu erstellen, deklarieren Sie eine Storyboard-Variable auf Klassenebene.

    Class MainWindow

    Private myStoryboard As Storyboard

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Anschließend initialisieren Sie das Storyboard und fügen die Animation als untergeordnetes Element hinzu.

    myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

    myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

  2. Dem Storyboard muss bekannt sein, auf welches Objekt die Animation anzuwenden ist. Verwenden Sie die angefügte Eigenschaft Storyboard.TargetName, um das zu animierende Objekt anzugeben. Im Folgenden wird gezeigt, wie Sie den Zielnamen der DoubleAnimationin XAML auf MyRectangle festlegen.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Im Folgenden wird gezeigt, wie Sie den Zielnamen der DoubleAnimationim Code auf MyRectangle festlegen.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

  3. Verwenden Sie die angefügte Eigenschaft TargetProperty, um die zu animierende Eigenschaft anzugeben. Im Folgenden wird gezeigt, wie die Opacity-Eigenschaft des Rectangle in XAML als Ziel für die Animation konfiguriert wird.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Im Folgenden wird gezeigt, wie die Opacity-Eigenschaft des Rectangle im Code als Ziel für die Animation konfiguriert wird.

    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

Weitere Informationen zur TargetProperty-Syntax und zusätzliche Beispiele finden Sie unter Übersicht über Storyboards.

Teil 3 (XAML): Zuordnen des Storyboards zu einem Trigger

Am einfachsten können Sie ein Storyboard in XAML mithilfe eines Ereignistriggers anwenden und starten. In diesem Abschnitt wird erläutert, wie Sie das Storyboard in XAML einem Trigger zuordnen.

  1. Erstellen Sie ein BeginStoryboard-Objekt, und ordnen Sie ihm das Storyboard zu. Ein BeginStoryboard ist ein Typ von TriggerAction, mit der ein Storyboard angewendet und gestartet wird.

    <BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

  2. Erstellen Sie einen EventTrigger, und fügen Sie das BeginStoryboard dessen Actions-Auflistung hinzu. Setzen Sie die RoutedEvent-Eigenschaft von EventTrigger auf das Routingereignis, von dem das Storyboard gestartet werden soll. (Weitere Informationen zu Routingereignissen finden Sie unter Übersicht über Routingereignisse.)

    <!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

  3. Fügen Sie den EventTrigger der Triggers-Auflistung des Rechtecks hinzu.

    <Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Teil 3 (Code): Zuordnen des Storyboards zu einem Ereignishandler

Am einfachsten können Sie ein Storyboard im Code mithilfe eines Ereignishandlers anwenden und starten. In diesem Abschnitt wird erläutert, wie Sie das Storyboard im Code einem Ereignishandler zuordnen.

  1. Registrieren Sie das Loaded-Ereignis des Rechtecks.

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

  2. Deklarieren Sie den Ereignishandler. Verwenden Sie im Ereignishandler die Begin-Methode, um das Storyboard anzuwenden.

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}

Vollständiges Beispiel

Im Folgenden wird gezeigt, wie in XAML ein Rechteck erstellt wird, das ein- und ausgeblendet wird.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

Im Folgenden wird gezeigt, wie im Code ein Rechteck erstellt wird, das ein- und ausgeblendet wird.

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As New DoubleAnimation()
        myDoubleAnimation.From = 1.0
        myDoubleAnimation.To = 0.0
        myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
        myDoubleAnimation.AutoReverse = True
        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

        myStoryboard = New Storyboard()
        myStoryboard.Children.Add(myDoubleAnimation)
        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
        Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

        ' Use the Loaded event to start the Storyboard.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

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

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }
    }
}

Animationstypen

Da Animationen Eigenschaftswerte generieren, gibt es für die einzelnen Eigenschaftentypen unterschiedliche Animationstypen. Zum Animieren einer Eigenschaft, die einen Double-Wert entgegennimmt (wie zum Beispiel die Width-Eigenschaft eines Elements), verwenden Sie eine Animation, die Double-Werte erzeugt. Zum Animieren einer Eigenschaft, die einen Point-Wert entgegennimmt, verwenden Sie eine Animation, die Point-Werte erzeugt, usw. Aufgrund der vielen verschiedenen Eigenschaftentypen gibt es im System.Windows.Media.Animation-Namespace mehrere Animationsklassen. Glücklicherweise folgen sie einer strengen Benennungskonvention, die es erleichtert, sie zu unterscheiden:

  • <Typ>Animation

    Bei diesen als "From/To/By"-Animationen oder grundlegende Animationen bezeichneten Animationen erfolgt die Animation von einem Startwert zu einem Zielwert oder durch Hinzufügen eines Offsetwerts zum Startwert.

    • Setzen Sie die From-Eigenschaft der Animation, um einen Startwert anzugeben.

    • Setzen Sie die To-Eigenschaft der Animation, um einen Endwert anzugeben.

    • Setzen Sie die By-Eigenschaft der Animation, um einen Offsetwert anzugeben.

    In den Beispielen in dieser Übersicht werden diese Animationen verwendet, da sie am einfachsten zu verwenden sind. From/To/By-Animationen werden unter Übersicht über From/To/By-Animationen ausführlich beschrieben.

  • <Typ>AnimationUsingKeyFrames

    Keyframe-Animationen sind leistungsstärker als From/To/By-Animationen, da Sie eine beliebige Anzahl an Zielwerten angeben und sogar die Interpolationsmethode steuern können. Einige Typen können nur mit Keyframe-Animationen animiert werden. Keyframe-Animationen werden unter Übersicht über Keyframe-Animationen ausführlich beschrieben.

  • <Typ>AnimationUsingPath

    Mithilfe von Pfadanimationen können Sie animierte Werte anhand eines geometrischen Pfads erzeugen.

  • <Typ>AnimationBase

    Abstrakte Klasse, die einen <Typ>-Wert animiert, wenn Sie sie implementieren. Diese Klasse dient als Basisklasse für <Typ>Animation-Klassen und <Typ>AnimationUsingKeyFrames-Klassen. Mit diesen Klassen müssen Sie nur direkt arbeiten, wenn Sie eigene benutzerdefinierte Animationen erstellen möchten. Andernfalls sollten Sie eine <Typ>Animation oder KeyFrame<Typ>Animation verwenden.

In den meisten Fällen werden Sie die <Typ>Animation-Klassen wie DoubleAnimation und ColorAnimation verwenden.

In der folgenden Tabelle sind mehrere allgemeine Animationstypen und einige Eigenschaften aufgeführt, mit denen sie verwendet werden.

Eigenschaftentyp

Zugehörige grundlegende (From/To/By-)Animation

Zugehörige Keyframe-Animation

Zugehörige Pfadanimation

Verwendungsbeispiel

Color

ColorAnimation

ColorAnimationUsingKeyFrames

Keine

Zum Animieren der Color von SolidColorBrush oder GradientStop.

Double

DoubleAnimation

DoubleAnimationUsingKeyFrames

DoubleAnimationUsingPath

Zum Animieren der Width eines DockPanel oder der Height eines Button.

Point

PointAnimation

PointAnimationUsingKeyFrames

PointAnimationUsingPath

Zum Animieren der Center-Position von EllipseGeometry.

String

Keine

StringAnimationUsingKeyFrames

Keine

Zum Animieren der Text von TextBlock oder der Content von Button.

Animationen sind Timeline-Klassen

Alle Animationstypen erben von der Timeline-Klasse. Daher sind alle Animationen spezialisierte Typen von Timeline-Objekten. Eine Timeline definiert einen Zeitabschnitt. Sie können das Zeitverhalten eines Timeline-Objekts angeben: seine Duration-Eigenschaft, wie oft es wiederholt wird und sogar, wie schnell die Zeit für das Objekt abläuft.

Da eine Animation eine Timeline ist, stellt auch sie einen Zeitabschnitt dar. Außerdem berechnet eine Animation Ausgabewerte, während ihr Zeitabschnitt (oder Duration) durchlaufen wird. Während die Animation durchlaufen (oder "abgespielt") wird, aktualisiert sie die zugeordnete Eigenschaft.

Drei häufig verwendete Zeitsteuerungseigenschaften sind Duration, AutoReverse und RepeatBehavior.

Duration-Eigenschaft

Wie bereits erwähnt stellt ein Timeline-Objekt einen Zeitabschnitt dar. Die Länge dieses Abschnitts wird durch die Duration-Eigenschaft des Timeline-Objekts festgelegt, die normalerweise mit einem TimeSpan-Wert angegeben wird. Wenn ein Timeline-Objekt das Ende seiner Dauer erreicht, hat es eine Iteration abgeschlossen.

Eine Animation verwendet ihre Duration-Eigenschaft, um den aktuellen Wert zu ermitteln. Wenn Sie für eine Animation keinen Duration-Wert angeben, wird der Standardwert von einer Sekunde verwendet.

Die folgende Syntax zeigt eine vereinfachte Version der Syntax des Extensible Application Markup Language (XAML)-Attributs für die Duration-Eigenschaft.

Stunden:Minuten:Sekunden

In der folgenden Tabelle sind mehrere Duration-Einstellungen und ihre Ergebniswerte aufgeführt.

Einstellung

Ergebniswert

0:0:5.5

5,5 Sekunden

0:30:5.5

30 Minuten und 5,5 Sekunden

1:30:5.5

1 Stunde, 30 Minuten und 5,5 Sekunden

Eine Möglichkeit zum Angeben einer Duration im Code ist die Verwendung der FromSeconds-Methode zum Erstellen einer TimeSpan. Anschließend deklarieren Sie eine neue Duration-Struktur mithilfe dieser TimeSpan.

Weitere Informationen zu Duration-Werten und die vollständige Extensible Application Markup Language (XAML)-Syntax finden Sie in der Beschreibung der Duration-Struktur.

AutoReverse

Die AutoReverse-Eigenschaft gibt an, ob eine Zeitachse rückwärts durchlaufen wird, wenn sie das Ende ihrer Duration erreicht hat. Wenn Sie diese Animationseigenschaft auf true setzen, wird eine Animation rückwärts ausgeführt, sobald sie das Ende ihrer Duration erreicht hat, dabei geht sie vom Endwert zum Startwert über. Standardmäßig ist diese Eigenschaft false.

RepeatBehavior

Die RepeatBehavior-Eigenschaft gibt an, wie oft eine Zeitachse durchlaufen wird. Die Standardeinstellung der Iterationen von Zeitachsen ist 1.0, d. h. sie wird einmal durchlaufen und nicht wiederholt.

Weitere Informationen zu diesen und anderen Eigenschaften finden Sie unter Übersicht über Zeitsteuerungsverhalten.

Anwenden einer Animation auf eine Eigenschaft

In den vorherigen Abschnitten werden die verschiedenen Animationstypen und ihre Zeitsteuerungseigenschaften beschrieben. In diesem Abschnitt wird gezeigt, wie die Animation auf die zu animierende Eigenschaft angewendet wird. Die Verwendung von Storyboard-Objekten ist eine Möglichkeit, um Animationen auf Eigenschaften anzuwenden. Ein Storyboard ist ein Container für Timeline-Objekte, der Zielinformationen für die Animationen zur Verfügung stellt, die er enthält.

Zielobjekte und -eigenschaften

Von der Storyboard-Klasse werden die angefügten Eigenschaften TargetName und TargetProperty bereitgestellt. Sie teilen einer Animation mit, welche Elemente zu animieren sind, indem Sie für die Animation diese Eigenschaften festlegen. Bevor eine Animation jedoch auf ein Objekt angewendet werden kann, muss dem Objekt normalerweise ein Name gegeben werden.

Einem FrameworkElement einen Namen zuzuweisen, unterscheidet sich davon, einem Freezable-Objekt einen Namen zuzuweisen. Die meisten Steuerelemente und Bereiche sind Frameworkelemente, die meisten rein grafischen Objekte (z. B. Pinsel, Transformationen und Geometrien) sind hingegen Freezable-Objekte. Wenn Sie sich nicht sicher sind, ob ein Typ ein FrameworkElement oder ein Freezable ist, können Sie im Abschnitt Vererbungshierarchie der zugehörigen Referenzdokumentation nachschlagen.

  • Um ein FrameworkElement als Animationsziel zu verwenden, geben Sie ihm mithilfe der Name-Eigenschaft einen Namen. Im Code müssen Sie außerdem die RegisterName-Methode verwenden, um den Elementnamen für die zugehörige Seite zu registrieren.

  • Um ein Freezable-Objekt in XAML als Animationsziel zu verwenden, weisen Sie ihm mit dem x:Name-Direktive einen Namen zu. Im Code verwenden Sie einfach die RegisterName-Methode, um das Objekt für die zugehörige Seite zu registrieren.

Die folgenden Abschnitte enthalten ein Beispiel für das Benennen eines Elements in XAML und im Code. Ausführlichere Informationen zum Benennen und Adressieren von Zielen finden Sie unter Übersicht über Storyboards.

Anwenden und Starten von Storyboards

Um ein Storyboard in XAML zu starten, ordnen Sie es einem EventTrigger zu. Ein EventTrigger ist ein Objekt, das beschreibt, welche Aktionen durchgeführt werden sollen, wenn ein bestimmtes Ereignis auftritt. Eine solche Aktion kann eine BeginStoryboard-Aktion sein, mit der Sie ein Storyboard starten. Ereignistrigger ähneln dem Konzept der Ereignishandler, da sie Ihnen das Angeben ermöglichen, wie Ihre Anwendung auf ein bestimmtes Ereignis reagiert. Im Gegensatz zu Ereignishandlern können Ereignistrigger in XAML vollständig beschrieben werden. Es ist kein weiterer Code erforderlich.

Um ein Storyboard im Code zu starten, können Sie ein EventTrigger oder die Begin-Methode der Storyboard-Klasse verwenden.

Interaktives Steuern eines Storyboards

Das vorherige Beispiel zeigte, wie ein Storyboard beim Auftreten eines Ereignisses gestartet wird. Sie können ein Storyboard nach dem Start auch interaktiv steuern: es kann angehalten, fortgesetzt und beendet werden, Sie können es an das Ende seines Füllzeitraums setzen, in ihm suchen und das Storyboard entfernen. Weitere Informationen und ein Beispiel, das zeigt, wie Sie ein Storyboard interaktiv steuern, finden Sie unter Übersicht über Storyboards.

Was geschieht am Ende einer Animation?

Die FillBehavior-Eigenschaft gibt das Verhalten am Ende der Zeitachse an. Standardmäßig wird am Ende einer Zeitachse Filling gestartet. Eine Animation, die Filling ist, behält seinen abschließenden Ausgabewert bei.

Die DoubleAnimation im vorherigen Beispiel wird nicht beendet, da die RepeatBehavior-Eigenschaft auf Forever festgelegt wurde. Im folgenden Beispiel wird ein Rechteck mithilfe einer ähnlichen Animation animiert. Im Gegensatz zum vorherigen Beispiel werden für die RepeatBehavior-Eigenschaft und die AutoReverse-Eigenschaft dieser Animation die Standardwerte beibehalten. Dadurch wechselt die Animation innerhalb von fünf Sekunden von 1 auf 0 und hört dann auf.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

Da der Standardwert von FillBehavior (HoldEnd) nicht geändert wurde, behält die Animation am Ende den Endwert (0) bei. Dadurch verbleibt die Opacity des Rechtecks am Ende der Animation auf 0. Wenn Sie Opacity für das Rechteck auf einen anderen Wert setzen, scheint der Code keine Auswirkungen zu haben, da die Opacity-Eigenschaft weiterhin durch die Animation geändert wird.

Eine Möglichkeit, im Code wieder die Kontrolle über eine animierte Eigenschaft zu erlangen, besteht darin, die BeginAnimation-Methode zu verwenden und den AnimationTimeline-Parameter auf NULL zu setzen. Weitere Informationen und ein Beispiel finden Sie unter Gewusst wie: Festlegen einer Eigenschaft nach einer Storyboard-Animation.

Beachten Sie Folgendes: Obwohl das Setzen eines Eigenschaftswerts, der eine Active-Animation oder Filling-Animation verwendet, scheinbar keine Auswirkungen hat, wird der Eigenschaftswert geändert. Weitere Informationen finden Sie unter Übersicht über das Animations- und Zeitsteuerungssystem.

Datenbindung und Animieren von Animationen

Die meisten Animationseigenschaften können an Daten gebunden oder animiert werden. Beispielsweise können Sie die Duration-Eigenschaft einer DoubleAnimation animieren. Aufgrund der Funktionsweise des Zeitsteuerungssystems verhalten sich datengebundene oder animierte Animationen jedoch nicht wie andere datengebundene oder animierte Objekte. Um dieses Verhalten zu verstehen, ist es hilfreich, sich damit zu befassen, was es eigentlich bedeutet, eine Animation auf eine Eigenschaft anzuwenden.

Betrachten Sie noch einmal das Beispiel im vorherigen Abschnitt, in dem gezeigt wurde, wie die Opacity eines Rechtecks animiert wird. Beim Laden des Rechtecks im vorherigen Beispiel wird das Storyboard vom Ereignistrigger angewendet. Vom Zeitsteuerungssystem wird eine Kopie vom Storyboard und seiner Animation erstellt. Diese Kopien werden gesperrt (schreibgeschützt), und aus ihnen werden Clock-Objekte erstellt. Diese Uhrobjekte erledigen die eigentliche Arbeit und animieren die Zieleigenschaften.

Vom Zeitsteuerungssystem wird ein Uhrobjekt für die DoubleAnimation erstellt, und dieses wird auf das Objekt und die Eigenschaft angewendet, die mithilfe der Eigenschaften TargetName und TargetProperty der DoubleAnimation angegeben wurde. In diesem Beispiel wird das Uhrobjekt vom Zeitsteuerungssystem auf die Opacity-Eigenschaft des Objekts mit dem Namen "MyRectangle" angewendet.

Zwar wird auch für das Storyboard ein Uhrobjekt erstellt, dieses Objekt wird jedoch auf keine Eigenschaften angewendet. Es dient nur zum Steuern des untergeordneten, für die DoubleAnimation erstellten Uhrobjekts.

Damit eine Animation Datenbindungs- oder Animationsänderungen widerspiegelt, muss ihr Uhrobjekt neu generiert werden. Uhrobjekte werden nicht automatisch neu generiert. Wenden Sie das Storyboard mithilfe von BeginStoryboard oder der Begin-Methode erneut an, damit Änderungen von der Animation widergespiegelt werden. Wenn Sie eine dieser Methoden verwenden, wird die Animation neu gestartet. Im Code können Sie die Seek-Methode verwenden, um im Storyboard zur vorherigen Position zurückzukehren.

Ein Beispiel für eine datengebundene Animation finden Sie unter Beispiel für die Animation von Splines für Keyframes. Weitere Informationen zur Funktionsweise des Animations- und Zeitsteuerungssystem finden Sie unter Übersicht über das Animations- und Zeitsteuerungssystem.

Andere Möglichkeiten für Animationen

Die Beispiele in dieser Übersicht zeigen, wie Animationen mithilfe von Storyboards funktionieren. Im Code haben Sie weitere verschiedene Möglichkeiten, Animationen durchzuführen. Weitere Informationen finden Sie unter Übersicht über die Verfahren zur Animation von Eigenschaften.

Beispiele für Animationen

Die folgenden Beispiele können Ihnen beim Hinzufügen von Animationen zu Ihren Anwendungen helfen.

Verwandte Themen

Titel

Beschreibung

Übersicht über das Animations- und Zeitsteuerungssystem

Hier wird beschrieben, wie das Zeitsteuerungssystem die Clock- und Timeline-Klassen verwendet, die Ihnen das Erstellen von Animationen ermöglichen.

Tipps und Tricks zu Animationen

Hier finden Sie hilfreiche Tipps zum Beheben von Problemen mit Animationen (z. B. Leistungsprobleme).

Übersicht über benutzerdefinierte Animationen

Hier wird beschrieben, wie das Animationssystem mit Keyframes, Animationsklassen oder Pro-Frame-Rückrufen erweitert werden kann.

Übersicht über From/To/By-Animationen

Hier wird beschrieben, wie eine Animation erstellt wird, die zwischen zwei Werten wechselt.

Übersicht über Keyframe-Animationen

Hier wird beschrieben, wie eine Animation mit mehreren Zielwerten erstellt wird, bei der die Interpolationsmethode gesteuert werden kann.

Beschleunigungsfunktionen

Hier wird erklärt, wie mathematische Formeln auf die Animationen angewendet werden, um realistisches Verhalten herzustellen (z. B. Sprungeffekte).

Übersicht über Pfadanimationen

Hier wird beschrieben, wie ein Objekt entlang einem komplexen Pfad verschoben oder gedreht wird.

Übersicht über die Verfahren zur Animation von Eigenschaften

Hier werden Eigenschaftenanimationen mit Storyboards, lokalen Animationen, Uhren und Pro-Frame-Animationen beschrieben.

Übersicht über Storyboards

Hier wird beschrieben, wie Storyboards mit mehreren Zeitachsen zum Erstellen komplexer Animationen verwendet werden.

Übersicht über Zeitsteuerungsverhalten

Hier werden die in Animationen verwendeten Timeline-Typen und -Eigenschaften beschrieben.

Übersicht über Zeitsteuerungsereignisse

Hier werden die Ereignisse beschrieben, die für die Clock- und Timeline-Objekte zum Ausführen des Codes an Punkten auf der Zeitachse verfügbar sind (z. B. starten, anhalten, fortsetzen, überspringen oder beenden).

Gewusst-wie-Themen zu Animation und Zeitsteuerung

Hier finden Sie Codebeispiele für die Verwendung von Animationen und Zeitachsen in der Anwendung.

Gewusst-wie-Themen zu Uhren

Hier finden Sie Codebeispiele für die Verwendung des Clock-Objekts in der Anwendung.

Gewusst-wie-Themen zur Keyframe-Animation

Hier finden Sie Codebeispiele für die Verwendung von Keyframe-Animationen in der Anwendung.

Gewusst-wie-Themen zur Pfadanimation

Hier finden Sie Codebeispiele für die Verwendung von Pfadanimationen in der Anwendung.

Verweis

Timeline

Storyboard

BeginStoryboard

Clock

Änderungsprotokoll

Datum

Versionsgeschichte

Grund

Oktober 2010

Fehlende Visual Basic-Ausschnitte wurden hinzugefügt.

Kundenfeedback.