Freigeben über

Übersicht über Animationen

  • Artikel

Windows Presentation Foundation (WPF) bietet eine Vielzahl leistungsstarker Grafik- und Layout-Funktionen, die Ihnen ermöglichen, attraktive Benutzeroberflächen und ansprechende Dokumente zu erstellen. Animation kann eine ansprechende Benutzeroberfläche noch spektakulärer und benutzerfreundlicher machen. Indem Sie einfach eine Hintergrundfarbe animieren oder ein animiertes Transform anwenden, können Sie eindrucksvolle Bildschirmübergänge erstellen oder hilfreiche visuelle Hinweise geben.

Diese Übersicht enthält eine Einführung in das WPF-Animations- und Zeitsteuerungssystem. Der Schwerpunkt liegt auf der Animation von WPF-Objekten mithilfe von Storyboards.

Einführung in Animationen

Mit einer Animation wird eine Illusion geschaffen, die durch die rasche Abfolge einer Reihe von Bildern erzeugt wird, wobei jedes Bild sich ein wenig vom vorherigen Bild unterscheidet. Die Abfolge von Bildern wird vom Gehirn als einzelne, sich ändernde Szene wahrgenommen. Im Film wird diese Illusion mithilfe einer Kamera, die viele Fotos, oder Frames, pro Sekunde aufzeichnet, erstellt. Bei der Wiedergabe der Frames in einem Projektor sieht das Publikum ein bewegtes Bild.

Animationen auf einem Computer ist ähnlich. Beispielsweise kann ein Programm, das die Zeichnung eines Rechtecks langsam ausblendet wie folgt arbeiten.

  • Das Programm erstellt einen Timer.

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

  • Jedes Mal wenn das Programm den Timer prüft, berechnet es den aktuellen Durchsichtigkeitswert für das Rechteck, basierend auf der verstrichenen Zeit.

  • Das Programm übernimmt dann den neuen Wert für das Rechteck und zeichnet es neu.

Vor WPF, mussten Microsoft Windows-Entwickler ihre eigenen Zeitsteuerungssysteme erstellen und verwalten oder spezielle benutzerdefinierte Bibliotheken verwenden. WPF enthält ein effizientes Zeitsteuerungssystem, das mithilfe von verwaltetem Code verfügbar gemacht wird und XAML, die voll im WPF-Framework integriert ist. WPF-Animation ermöglicht es, Steuerelemente und andere Grafikobjekte ganz einfach zu animieren.

WPF erledigt die gesamte Hintergrundarbeit zum Verwalten eines Zeitsteuerungssystems und zum effizienten Neuzeichnen des Bildschirms. WPF bietet Zeitsteuerungsklassen, die Ihnen ermöglichen, sich auf die Effekte, die Sie erstellen möchten, zu konzentrieren, anstatt auf die technischen Details dieser Effekte. WPF ermöglicht es außerdem auf einfache Weise eigene Animationen zu erstellen, durch das Bereitstellen von Animationsbasisklassen, von denen Ihre Klassen erben können, um benutzerdefinierte Animationen zu erzeugen. Diese benutzerdefinierten Animationen profitieren von vielen Leistungsvorteilen der Standardanimationsklassen.

Animationssystem für WPF-Eigenschaften

Kennen Sie einige wenige wichtige Konzepte des Zeitsteuerungssystems, sind WPF-Animationen leicht zu verwenden. Am wichtigsten ist, dass Sie in WPF Objekte animieren, indem Sie Animationen auf die einzelnen Eigenschaften anwenden. Um zum Beispiel ein Rahmenelement wachsen zu lassen, animieren Sie seine Width- und Height-Eigenschaften. Um ein Objekt aus dem Blickfeld verschwinden zu lassen, animieren Sie seine Opacity-Eigenschaft.

Damit eine Eigenschaft animierbar ist, müssen die folgenden drei Anforderungen erfüllt sein:

  • Es muss sich um eine Abhängigkeitseigenschaft handeln.

  • Sie muss zu einer Klasse gehören, die von der DependencyObject erbt und diese IAnimatable-Schnittstelle implementiert.

  • Es muss ein kompatibler Animationstyp verfügbar sein. (Wird von WPF keiner bereitstellt, können Sie einen eigenen erstellen. Weitere Informationen finden Sie in der Übersicht über benutzerdefinierte Animationen.)

WPF enthält viele Objekte, die IAnimatable-Eigenschaften haben. Steuerelemente wie Button und TabControl sowie auch Panel- und Shape-Objekte erben von DependencyObject. Die meisten Eigenschaften sind Abhängigkeitseigenschaften.

Animationen können fast überall verwendet werden, auch in Stil- und Steuerelementvorlagen. Animationen müssen nicht visuell sein; Sie können Objekte animieren, die nicht Teil der Benutzeroberfläche sind, wenn sie die Kriterien erfüllen, die in diesem Abschnitt beschrieben werden.

Beispiel: Ein- und Ausblenden eines Elements

Dieses Beispiel zeigt, wie Sie eine WPF-Animation verwenden, um den Wert einer Abhängigkeitseigenschaft zu animieren. DoubleAnimation verwendet eine Art von Animation, die Double-Werte generiert, um die Opacity-Eigenschaft einer Rectangle zu animieren. Infolgedessen wird das Rectangle ein- und ausgeblendet.

Der erste Teil des Beispiels erstellt ein Rectangle-Element. Die folgenden Schritte zeigen, wie Sie eine Animation erstellen und sie auf die Opacity-Eigenschaft des Rechtecks anwenden.

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

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

Im Folgenden wird gezeigt, wie Sie ein Rectangle-Element in einem StackPanel in Code erstellen.

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

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

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

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

Teil 1: Erstellen einer DoubleAnimation

Eine Möglichkeit, ein Element ein-und auszublenden, kann durch das Animieren seiner Opacity-Eigenschaft erreicht werden. Da die Opacity-Eigenschaft vom Typ Double ist, benötigen Sie eine Animation, die doppelte Werte erzeugt. DoubleAnimation ist eine solche Animation. DoubleAnimation erzeugt einen Übergang zwischen zwei Doppelwerten. Um den Startwert festzulegen, setzen Sie die From-Eigenschaft. Um seinen Endwert festzulegen, stellen Sie seine To-Eigenschaft ein.

  1. Der Durchlässigkeitswert 1.0 erzeugt ein deckendes Objekt, und der Durchlässigkeitswert 0.0 erzeugt ein unsichtbares Objekt. Um den Übergang der Animation 1.0 auf 0.0 zu gestalten, setzen Sie seine From-Eigenschaft auf 1.0 und seine To-Eigenschaft auf 0.0. Im Folgenden wird gezeigt, wie Sie das DoubleAnimation in XAML erstellen.

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

    Im Folgenden wird gezeigt, wie Sie das DoubleAnimation in Code erstellen.

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

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

  2. Als nächstes müssen Sie ein Duration festlegen. Die Duration einer Animation gibt an, wie lange der Übergang vom Startwert zum Zielwert dauert. Im Folgenden wird gezeigt, wie Sie die Duration-Eigenschaften auf fünf Sekunden in XAML festlegen.

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

    Im Folgenden wird gezeigt, wie Sie die Duration-Eigenschaften auf fünf Sekunden in Code festlegen.

    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 nach 0.0 übergeht, wodurch das Zielelement von vollständig deckend zu vollständig unsichtbar übergeht. Damit das Element nach dem Verschwinden wieder eingeblendet wird, setzen Sie die AutoReverse-Eigenschaft der Animation auf true. Um die Animation unbegrenzt wiederholen zu können, legen Sie die RepeatBehavior-Eigenschaft auf Forever fest. Im Folgenden wird gezeigt, wie Sie die AutoReverse-Eigenschaften RepeatBehavior in XAML festlegen.

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

    Im Folgenden wird gezeigt, wie Sie die AutoReverse-Eigenschaften RepeatBehavior im Code festlegen.

    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 angehängten Eigenschaften TargetName und TargetProperty, um das Objekt und die Eigenschaft anzugeben, die animiert werden sollen.

  1. Erstellen Sie die Storyboard und fügen Sie die Animation als ihr Kind hinzu. Im Folgenden wird gezeigt, wie Sie das Storyboard in XAML erstellen.

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

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

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    Initialisieren Sie dann die Storyboard und fügen Sie die Animation als ihr Kind hinzu.

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

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

  2. Storyboard muss wissen, wo Sie die Animation anwenden wollen. Verwenden Sie die angehängte Storyboard.TargetName-Eigenschaft, um das zu animierende Objekt anzugeben. Im Folgenden sehen Sie, wie Sie den Zielnamen von DoubleAnimation in MyRectangle in XAML festlegen.

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

    Im Folgenden sehen Sie, wie Sie den Zielnamen von DoubleAnimation in MyRectangle im Code festlegen.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Verwenden Sie die angehängte TargetProperty-Eigenschaft, um die zu animierende Eigenschaft anzugeben. Im Folgenden sehen Sie, wie die Animation so konfiguriert wird, dass sie auf die Opacity-Eigenschaft des Rectangle in XAML zielt.

    <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 sehen Sie, wie die Animation so konfiguriert ist, dass sie auf die Opacity-Eigenschaft des Rectangle im Code abzielt.

    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 in der Übersicht über Storyboards.

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

Der einfachste Weg, ein Storyboard in XAML anzuwenden und zu starten, ist die Verwendung eines Ereignisauslösers. Dieser Abschnitt zeigt, wie Sie Storyboard mit einem Trigger in XAML verknüpfen.

  1. Erstellen Sie ein BeginStoryboard-Objekt und verknüpfen Sie Ihr Storyboard mit diesem. BeginStoryboard ist ein Typ vonTriggerAction, der angewendet wird und eine Storyboard startet.

    <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 eine EventTrigger und fügen Sie die BeginStoryboard zu der Actions-Sammlung hinzu. Legen Sie die RoutedEvent-Eigenschaft von EventTrigger des Routingereignisses fest, das Sie in Storyboard starten möchten. (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 die 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

Der einfachste Weg, ein Storyboard im Code anzuwenden und zu starten, ist die Verwendung eines Event-Handlers. In diesem Abschnitt erfahren Sie, wie Sie Storyboard mit einem Ereignishandler im Code verknüpfen.

  1. Registrieren Sie das Loaded-Ereignis des Rechtecks.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

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

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

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

Vollständiges Beispiel

Der folgende Code zeigt, wie in XAML ein Rechteck erstellt wird, das ein-und ausgeblendet wird.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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>

Der folgende Code zeigt, wie ein Rechteck erstellt wird, das im Code ein- und ausgeblendet wird.

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);
        }
    }
}

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

Animationstypen

Da Animationen Eigenschaftswerte generieren, gibt es verschiedene Animationstypen für unterschiedliche Eigenschaftentypen. Um eine Eigenschaft zu animieren, die ein Double annimmt, wie z. B. die Width-Eigenschaft eines Elements, verwenden Sie eine Animation, die Double-Werte erzeugt. Um eine Eigenschaft zu animieren, die einen Point-Wert annimmt, verwenden Sie eine Animation, die Point-Werte erzeugt, und so weiter. Aufgrund der Anzahl der verschiedenen Eigenschaftentypen, gibt es im System.Windows.Media.Animation-Namespace mehrere Animationsklassen. Glücklicherweise folgen sie einer strengen Benennungskonvention, die es erleichtert, sie voneinander zu unterscheiden:

  • <Typ>Animation

    Bekannt als „From/To/By“ oder „basic“ Animation, laufen die Animationen zwischen einem Start- und Ziel-Wert ab oder durch Hinzufügen eines Offsetwerts zum Startwert.

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

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

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

    Die Beispiele in dieser Übersicht verwenden diese Animationen, da sie am einfachsten zu verwenden sind. From-, To-, By-Animationen werden in der Übersicht über From-,To-, By-Animationen ausführlich beschrieben.

  • <Type>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 in der Übersicht über Keyframe-Animationen ausführlich beschrieben.

  • <Type>AnimationUsingPath

    Pfadanimationen ermöglichen Ihnen einen geometrischen Pfad zu verwenden, um animierte Werte zu erzeugen.

  • <Type>AnimationBase

    Abstrakte Klasse, die einen <Typ>-Wert animiert, wenn Sie implementiert wird. Diese Klasse dient als Basisklasse für <Typ>-Animation und <Typ>-AnimationUsingKeyFrames-Klassen. Sie müssen nur dann direkt mit diesen Klassen arbeiten, wenn Sie eigene benutzerdefinierte Animationen erstellen möchten. Verwenden Sie andernfalls eine <Typ>-Animation oder KeyFrame<Typ>-Animation.

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

Die folgende Tabelle zeigt mehrere allgemeine Animationstypen und einige Eigenschaften, mit denen sie verwendet werden.

Eigenschaftstyp Zugehörige Basisanimation (From/To/By) Zugehörige Keyframe-Animation Zugehörige Pfadanimation Verwendungsbeispiel
Color ColorAnimation ColorAnimationUsingKeyFrames Keine Animieren Sie die Color einer SolidColorBrush oder einer GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animieren Sie die Width einer DockPanel oder einer Height von einer Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animieren Sie die Center-Position einer EllipseGeometry.
String Keine StringAnimationUsingKeyFrames Keine Animieren Sie die Text einer TextBlock oder einer Content von einer Button.

Animationen sind Timeline-Klassen

Alle Animationstypen erben von der Timeline-Klasse; daher sind alle Animationen spezialisierte Typen von Zeitleisten. Timeline definiert einen Zeitabschnitt. Sie können das Zeitverhalten einer Zeitachse bestimmen: die Duration, wie oft sie wiederholt werden und sogar wie schnell die Zeit ablaufen soll.

Da es sich bei einer Animation um ein Timeline handelt, stellt sie auch ein Zeitsegment dar. Eine Animation berechnet auch Ausgabewerte, wenn sie durch das angegebene Zeitsegment (oder Duration) fortschreitet. Während die Animation durchlaufen oder „abgespielt“ wird, wird die ihr zugeordnete Eigenschaft aktualisiert.

Drei häufig verwendete Timing-Eigenschaften sind Duration, AutoReverse und RepeatBehavior.

Duration-Eigenschaft

Wie bereits erwähnt, stellt eine Zeitachse einen Zeitabschnitt dar. Die Länge dieses Segments wird durch die Länge des Duration der Zeitleiste bestimmt, die in der Regel mit einem TimeSpan-Wert angegeben wird. Wenn eine Zeitachse das Ende ihrer Dauer erreicht, hat sie eine Iteration abgeschlossen.

Eine Animation verwendet ihre Duration-Eigenschaft, um ihren aktuellen Wert zu bestimmen. Wenn Sie keinen Duration-Wert für eine Animation angeben, wird 1 Sekunde verwendet, was der Standardwert ist.

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

Stunden:Minuten:Sekunden

Die folgende Tabelle zeigt verschiedene Duration-Einstellungen und die zugehörigen Werte.

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, eine Duration im Code anzugeben, besteht darin, die FromSeconds-Methode zu verwenden, um eine TimeSpan zu erstellen, und dann eine neue Duration-Struktur mit dieser TimeSpan zu deklarieren.

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

AutoReverse

Die AutoReverse-Eigenschaft legt fest, ob eine Zeitleiste rückwärts abgespielt wird, nachdem sie das Ende ihrer Duration erreicht. Setzen Sie die Animationseigenschaft auf true, wird die Animation, nachdem sie das Ende ihrer Duration erreicht hat, rückwärts durchlaufen, wobei sie vom Endwert zurück zum Startwert durchlaufen wird. Standardmäßig ist diese Eigenschaft false.

RepeatBehavior

Die RepeatBehavior-Eigenschaft gibt an, wie oft eine Zeitleiste wiedergegeben wird. Die Iteration von Zeitachsen ist in der Standardeinstellung 1.0, d.h., dass sie einmal durchlaufen und nicht wiederholt werden.

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

Anwenden einer Animation auf eine Eigenschaft

Die vorhergehenden Abschnitte beschreiben die verschiedenen Arten von Animationen und ihre Zeitsteuerungseigenschaften. In diesem Abschnitt wird gezeigt, wie Sie die Animation auf die zu animierende Eigenschaft anwenden. Storyboard-Objekte bieten eine Möglichkeit, Animationen auf Eigenschaften anzuwenden. Storyboard ist eine Container-Zeitleiste, die Zielinformationen für die darin enthaltenen Animationen enthält.

Zielobjekte und -Eigenschaften

Die Storyboard-Klasse stellt die TargetName und TargetProperty angefügten Eigenschaften bereit. Durch Festlegen dieser Eigenschaften wird der Animation mitgeteilt, was animiert werden soll. Bevor eine Animation jedoch auf ein Objekt angewendet werden kann, muss dem Objekt in der Regel ein Name gegeben werden.

Die Zuweisung eines Namens an ein FrameworkElement unterscheidet sich von der Zuweisung eines Namens an ein Freezable-Objekt. Die meisten Steuerelemente und Bereiche sind Frameworkelemente; hingegen sind die meisten rein grafischen Objekte, z.B. Pinsel, Transformationen und Geometrien Freezable-Objekte. Wenn Sie nicht sicher sind, ob ein Typ FrameworkElement oder Freezable ist, lesen Sie den Abschnitt Vererbungshierarchie in der Referenzdokumentation.

  • Um FrameworkElement als Animationsziel festzulegen, geben Sie ihm einen Namen, indem Sie seine Name-Eigenschaft festlegen. Im Code müssen Sie die RegisterName-Methode auch verwenden, um den Elementnamen bei der Seite zu registrieren, zu der er gehört.

  • Um ein Freezable-Objekt in XAML zu einem Animationsziel zu machen, verwenden Sie die Direktive x:Name, um ihm einen Namen zu geben. Im Code verwenden Sie einfach die RegisterName-Methode, um das Objekt bei der Seite zu registrieren, zu der es gehört.

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

Anwenden und Starten von Storyboards

Um ein Storyboard in XAML zu starten, verknüpfen Sie es mit einer EventTrigger. EventTrigger ist ein Objekt, das beschreibt, welche Aktionen ausgeführt werden sollen, wenn ein bestimmtes Ereignis eintritt. Eine dieser Aktionen kann eine BeginStoryboard-Aktion sein, mit der Sie Ihr Storyboard starten. Ereignistrigger ähneln in ihrem Konzept Ereignishandlern, da sie angeben können, wie Ihre Anwendung auf ein bestimmtes Ereignis reagieren soll. Im Gegensatz zum Ereignishandler, können Ereignistrigger vollständig in XAML beschrieben werden; es ist kein weiterer Code erforderlich.

Um einen Storyboard-Code zu starten, können Sie eine EventTrigger- oder eine Begin-Methode der Storyboard-Klasse verwenden.

Interaktives Steuern eines Storyboards

Das vorangegangene Beispiel hat gezeigt, wie Sie ein Storyboard starten können, wenn es eintritt. Sie können ein Storyboard auch interaktiv steuern, nachdem es gestartet wurde: Sie können es anhalten, fortsetzen, stoppen, zu seinem Füllzeitraum vorrücken, suchen und das Storyboard entfernen. Weitere Informationen und ein Beispiel, das zeigt, wie Sie ein Storyboard interaktiv steuern können, finden Sie in der Übersicht über Storyboards.

Was geschieht nach dem Ende einer Animation?

Die FillBehavior-Eigenschaft legt fest, wie sich eine Zeitleiste verhält, wenn sie endet. Standardmäßig beginnt eine Zeitleiste Filling, wenn sie endet. Eine Animation Filling, die ihren endgültigen Ausgabewert beibehält.

Die DoubleAnimation im vorherigen Beispiel wird nicht beendet, weil die RepeatBehavior-Eigenschaft auf Forever festgelegt ist. Im folgenden Beispiel wird ein Rechteck mithilfe einer ähnlichen Animation animiert. Im Gegensatz zum vorherigen Beispiel werden die RepeatBehavior- und AutoReverse-Eigenschaften dieser Animation auf ihren Standardwerten belassen. Aus diesem Grund wechselt die Animation innerhalb von fünf Sekunden von 1 auf 0 und hält dann an.

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

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

Da der FillBehavior-Wert nicht von seinem Standardwert, d. h. HoldEnd, abweicht, behält die Animation ihren endgültigen Wert, d.h. 0, bei, wenn sie endet. Daher bleibt Opacity des Rechtecks nach dem Ende der Animation bei 0. Wenn Sie den Opacity des Rechtecks auf einen anderen Wert setzen, scheint Ihr Code keine Wirkung zu haben, denn die Animation wirkt sich immer noch auf die Opacity-Eigenschaft aus.

Eine Möglichkeit, die Kontrolle über eine animierte Eigenschaft im Code wiederzuerlangen, besteht darin, die BeginAnimation-Methode zu verwenden und für den AnimationTimeline-Parameter null anzugeben. Weitere Informationen und ein Beispiel finden Sie unter Festlegen einer Eigenschaft nach einer Storyboard-Animation.

Beachten Sie, dass das Setzen eines Eigenschaftswerts, der mit einem Active oder Filling animiert ist, zwar keine Auswirkungen zu haben scheint, der Eigenschaftswert sich aber dennoch ändert. Weitere Informationen finden Sie unter der Übersicht über das Animations- und Zeitsteuerungssystem.

Datenbindung und Animieren von Animationen

Die meisten Animationseigenschaften können datengebunden oder animiert werden; so können Sie beispielsweise die Duration-Eigenschaft einer DoubleAnimation. Aufgrund der Funktionsweise des Zeitsteuerungssystems verhalten sich datengebundene oder animierte Animationen jedoch nicht wie andere datengebundene oder animierte Objekte. Um ihr Verhalten zu verstehen, sollten sie wissen, was es bedeutet, eine Animation auf eine Eigenschaft anzuwenden.

Sehen Sie sich das Beispiel im vorigen Abschnitt an, in dem gezeigt wurde, wie Sie das Opacity eines Rechtecks animieren können. Wenn das Rechteck im vorherigen Beispiel geladen wird, wendet sein Ereignisauslöser die Storyboard an. Das Timing-System erstellt eine Kopie des Storyboard und seiner Animation. Diese Kopien werden eingefroren (schreibgeschützt) und daraus werden Clock-Objekte erstellt. Das eigentliche Animieren der Zieleigenschaften erfolgt durch diese Uhren.

Das Zeitgebersystem erstellt eine Uhr für das DoubleAnimation-Objekt und die Eigenschaft, die durch TargetName und TargetProperty des DoubleAnimation angegeben wird. In diesem Fall wendet das Timing-System die Uhr auf die Opacity-Eigenschaft des Objekts mit dem Namen "MyRectangle" an.

Obwohl eine Uhr auch für die Storyboard erstellt wird, wird die Uhr nicht auf Eigenschaften angewendet. Ihr Zweck ist es, ihre untergeordnete Uhr zu steuern, die Uhr, die für die DoubleAnimation erstellt wird.

Damit eine Animation Änderungen der Datenbindung und der Animation widerspiegelt, muss die Uhr erneut generiert werden. Uhren werden nicht automatisch neu generiert. Damit eine Animation die Änderungen widerspiegelt, wenden Sie das Storyboard mit BeginStoryboard- oder der Begin-Methode neu an. Wenn Sie eine dieser beiden Methoden anwenden, startet die Animation neu. Im Code können Sie die Seek-Methode verwenden, um das Storyboard wieder an seine vorherige Position zu verschieben.

Ein Beispiel für eine datengebundene Animation finden Sie unter Key Spline Animation Sample (Beispiel für die Animation von Splines für Keyframes). Weitere Informationen zur Funktionsweise des Animations- und Zeitsteuerungssystems 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 erstellt werden. Im Code können Sie Animationen auf verschiedenste Weise erstellen. Weitere Informationen finden Sie unter Übersicht über die Verfahren zur Animation von Eigenschaften.

Beispiele für Animationen

In den folgenden Beispielen sehen Sie, wie Sie Animationen zu Ihren Anwendungen Hinzufügen können.

Titel Beschreibung
Übersicht über das Animations- und Zeitsteuerungssystem Beschreibt, wie das Timing-System die Timeline- und Clock-Klassen verwendet, mit denen Sie Animationen erstellen können.
Tipps und Tricks zu Animationen Hier sind hilfreiche Tipps zum Beheben von Problemen mit Animationfen, z.B. Leistungsprobleme aufgelistet.
Übersicht über benutzerdefinierte Animationen Beschreibt, wie das Animationssystem mit Keyframes, Animationsklassen oder Pro-Frame-Rückrufen erweitert werden kann.
Übersicht über From/To/By-Animationen Beschreibt, wie Sie eine Animation erstellen, die zwischen zwei Werten wechselt.
Übersicht über Keyframe-Animationen Beschreibt das Erstellen einer Animation mit mehreren Zielwerten, einschließlich der Möglichkeit, die Interpolationsmethode zu steuern.
Beschleunigungsfunktionen Erklärt, wie mathematische Formeln auf die Animationen angewendet werden, um ein realistisches Verhalten, z.B. Sprungeffekte zu erreichen.
Übersicht über Pfadanimationen Beschreibt das Verschieben oder Drehen eines Objekts entlang eines komplexen Pfads.
Übersicht über die Verfahren zur Animation von Eigenschaften Beschreibt Eigenschaftenanimationen mithilfe von Storyboards, lokalen Animationen, Uhren und Pro-Frame-Animationen.
Übersicht über Storyboards Beschreibt, wie Storyboards mit mehreren Zeitachsen zum Erstellen komplexer Animationen verwendet werden.
Übersicht über Zeitsteuerungsverhalten Beschreibt die in Animationen verwendeten Timeline-Typen und -Eigenschaften.
Übersicht über Zeitsteuerungsereignisse Beschreibt die Ereignisse, die auf den Timeline- und Clock-Objekten für die Ausführung von Code an Punkten in der Zeitleiste zur Verfügung stehen, z. B. Beginnen, Anhalten, Fortsetzen, Überspringen oder Stoppen.
Artikel zu Vorgehensweisen Enthält Codebeispiele für die Verwendung von Animationen und Zeitachsen in der Anwendung.
Gewusst-wie-Themen zu Uhren Enthält Codebeispiele für die Verwendung des Clock-Objekts in Ihrer Anwendung.
Themen zur Vorgehensweise mit Keyframes Enthält Codebeispiele für die Verwendung von Keyframe-Animationen in Ihrer Anwendung.
Gewusst-wie-Themen zur Pfadanimation Enthält Codebeispiele für die Verwendung von Pfadanimationen in Ihrer Anwendung.

Verweis