Übersicht über Animationen

Aktualisiert: November 2007

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 Abschnitte

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 stellt ein effizientes Zeitsteuerungssystem über verwalteten Code und Extensible Application Markup Language (XAML) bereit, das eng mit dem WPF-Framework integriert ist. Die WPF-Animation macht das Animieren von Steuerelementen und anderen grafischen Objekten einfach.

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 ist es mit WPF einfach, eigene Animationen zu 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 Windows Presentation Foundation (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 animierbaren Eigenschaften. 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 und in einer Page angezeigt. In den weiteren Schritten wird gezeigt, wie eine Animation erstellt und auf die Opacity-Eigenschaft des Rechtecks angewendet wird.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle> 
  </StackPanel>
</Page>

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

namespace Microsoft.SDK.Animation
{
    public class RectangleOpacityFadeExample : Page
    {
        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());
            this.WindowTitle = "Fading Rectangle Example";
            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.

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

   [C#]

   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 Beispiel dauert die Animation fünf Sekunden.

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0: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, setzen Sie die RepeatBehavior-Eigenschaft auf Forever.

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   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 EigenschaftenTargetName 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.

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

   Deklarieren Sie das Storyboard im Code als Klassenmember.

   public class RectangleOpacityFadeExample : Page
   { 
       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);
   

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 Code erhält die DoubleAnimation den Zielnamen MyRectangle. Dies ist der Name des zu animierenden Objekts.

   ...
   <Storyboard>
     <DoubleAnimation
       Storyboard.TargetName="MyRectangle" 
       From="1.0" To="0.0" Duration="0:0:1" 
       AutoReverse="True" RepeatBehavior="Forever" />
   </Storyboard>
   ...
   
   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   Tipp

   Beim Erstellen von Storyboards im Code müssen Sie zwei weitere Schritte durchführen: einen Namensbereich erstellen und den Namen des zu animierenden Objekts registrieren. Im Code am Anfang dieses Abschnitts, mit dem die Seite und das Rechteck erstellt wurden, wurde auch ein NameScope deklariert und ein Name für das Rechteck registriert. Verwenden Sie die SetNameScope-Methode, um einen NameScope zu erstellen, wenn noch keiner vorhanden ist. Verwenden Sie die RegisterName-Methode, um den Namen des Zielobjekts für das Element zu registrieren, für das Sie einen NameScope erstellt haben. Andernfalls kann das zu animierende Objekt vom Storyboard nicht gefunden werden. Ein zusätzliches Beispiel finden Sie unter Gewusst wie: Definieren eines Namensbereichs.

3. Verwenden Sie die angefügte Eigenschaft TargetProperty, um die zu animierende Eigenschaft anzugeben. Im folgenden Code wird für die Animation die Opacity-Eigenschaft eines Rectangle konfiguriert.

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

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.

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>

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>

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.

1. Registrieren Sie das Loaded-Ereignis des Rechtecks.

   [C#]

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

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

   [C#]

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

Vollständiges Beispiel

Das folgende Beispiel zeigt den vollständigen Code zum Erstellen eines Rechtecks, das ein- und ausgeblendet wird.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <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>
</Page>

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

namespace SDKSample
{

    public class RectangleOpacityFadeExample : Page
    {
        private Storyboard myStoryboard;

        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Fading Rectangle Example";
            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 Eigenschaftenwerte 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.

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.

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

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 auf der Duration-Typseite.

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 Eigenschaft angewendet wird, die Sie animieren möchten. Eine Möglichkeit, Animationen auf Eigenschaften anzuwenden, stellen Storyboard-Objekte zur Verfügung. 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

Die Storyboard-Klasse stellt die angefügten EigenschaftenStoryboard.TargetName und Storyboard.TargetProperty zur Verfügung. 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 Typseite 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-Attribut 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>

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 Eigenschaftenwerts, der eine Active-Animation oder Filling-Animation verwendet, scheinbar keine Auswirkungen hat, wird der Eigenschaftenwert 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.

• Beispiel zum Animieren von Eigenschaften

  Zeigt, wie Sie Animationen auf Frameworkelemente und Freezable-Objekte anwenden.

• Beispiel für From, To, and By-Animationszielwerte

  Veranschaulicht verschiedene From/To/By-Einstellungen.

• Beispiel zum Verhalten der Animationszeitsteuerung

  Veranschaulicht die verschiedenen Möglichkeiten, wie Sie das Zeitsteuerungsverhalten einer Animation steuern können. Dieses Beispiel zeigt auch, wie Sie für den Zielwert einer Animation eine Datenbindung durchführen.

Siehe auch

Konzepte

Übersicht über From/To/By-Animationen

Übersicht über Keyframe-Animationen

Übersicht über Storyboards

Übersicht über Zeitsteuerungsverhalten

Übersicht über das Animations- und Zeitsteuerungssystem

Übersicht über Zeitsteuerungsereignisse

Erste Schritte mit Windows Presentation Foundation

Referenz

Timeline

Storyboard