Freigeben über

Animationsübersicht

Windows Presentation Foundation (WPF) bietet eine leistungsstarke Reihe von Grafik- und Layoutfeatures, mit denen Sie attraktive Benutzeroberflächen und ansprechende Dokumente erstellen können. Animationen können eine attraktive Benutzeroberfläche noch spektakulärer und nutzbarer machen. Indem Sie einfach eine Hintergrundfarbe animieren oder eine animierte TransformFarbe anwenden, können Sie dramatische Bildschirmübergänge erstellen oder hilfreiche visuelle Hinweise bereitstellen.

Diese Übersicht enthält eine Einführung in das WPF-Animations- und Timing-System. Sie konzentriert sich auf die Animation von WPF-Objekten mithilfe von Storyboards.

Einführung in Animationen

Animation ist eine Illusion, die durch schnelles Durchlaufen einer Reihe von Bildern entsteht, die sich von der letzten leicht unterscheiden. Das Gehirn nimmt die Gruppe von Bildern als einzelne sich ändernde Szene wahr. Im Film wird diese Illusion mit Kameras geschaffen, die jede Sekunde viele Fotos oder Frames aufzeichnen. Wenn die Frames von einem Projektor wiedergegeben werden, sieht das Publikum ein bewegtes Bild.

Die Animation auf einem Computer ist ähnlich. Beispielsweise kann ein Programm, das eine Zeichnung eines Rechtecks aus der Sicht ausblendt, wie folgt funktionieren.

  • Das Programm erstellt einen Timer.

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

  • Jedes Mal, wenn das Programm den Timer überprüft, berechnet es den aktuellen Deckkraftwert für das Rechteck basierend darauf, wie viel Zeit verstrichen ist.

  • Das Programm aktualisiert dann das Rechteck mit dem neuen Wert und ändert es neu.

Vor WPF mussten Microsoft Windows-Entwickler eigene Timing-Systeme erstellen und verwalten oder spezielle benutzerdefinierte Bibliotheken verwenden. WPF enthält ein effizientes Timing-System, das über verwalteten Code und XAML verfügbar gemacht wird und tief in das WPF-Framework integriert ist. WPF-Animation erleichtert das Animieren von Steuerelementen und anderen grafischen Objekten.

WPF verarbeitet alle Hintergrundarbeiten, um ein Timing-System zu verwalten und den Bildschirm effizient neu zu gestalten. Es bietet Timing-Klassen, mit denen Sie sich auf die Effekte konzentrieren können, die Sie erstellen möchten, anstatt sich mit den Mechanismen zu beschäftigen, um diese Effekte zu erreichen. WPF erleichtert auch das Erstellen eigener Animationen, indem Animationsbasisklassen verfügbar gemacht werden, von denen Ihre Klassen erben können, um angepasste Animationen zu erstellen. Diese benutzerdefinierten Animationen erhalten viele der Leistungsvorteile der Standardanimationsklassen.

WPF-Eigenschaftenanimationssystem

Wenn Sie einige wichtige Konzepte zum Timing-System verstehen, können WPF-Animationen einfacher zu verwenden sein. Am wichtigsten ist, dass Sie in WPF Objekte animieren, indem Sie animationen auf ihre individuellen Eigenschaften anwenden. Um z. B. ein Frameworkelement zu vergrößern, animieren Sie die zugehörigen Width Und Height Eigenschaften. Um ein Objekt aus der Sicht verschwinden zu lassen, animieren Sie dessen Opacity Eigenschaft.

Damit eine Eigenschaft über Animationsfunktionen verfügt, muss sie die folgenden drei Anforderungen erfüllen:

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

Sie können Animationen fast überall verwenden, einschließlich in Formatvorlagen und Steuerelementvorlagen. Animationen müssen nicht visuell sein; Sie können Objekte animieren, die nicht Teil der Benutzeroberfläche sind, wenn sie die in diesem Abschnitt beschriebenen Kriterien erfüllen.

Beispiel: Ein Element ein- und ausblenden, um die Sichtbarkeit zu verändern.

In diesem Beispiel wird gezeigt, wie Sie mithilfe einer WPF-Animation den Wert einer Abhängigkeitseigenschaft animieren. Es verwendet eine DoubleAnimation, eine Art von Animation, die Double Werte generiert, um die Opacity-Eigenschaft eines Rectangle zu animieren. Dies führt dazu, dass die Rectangle Sichtbarkeit verblasst und wieder auftaucht.

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

Im Folgenden wird gezeigt, wie Sie ein Rectangle Element in einem StackPanel XAML-Code 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 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 Double-Animation

Eine Möglichkeit zum Ein- und Ausblenden eines Elements besteht darin, seine Opacity Eigenschaft zu animieren. Da die Opacity Eigenschaft vom Typ Doubleist, benötigen Sie eine Animation, die doppelte Werte erzeugt. Eine DoubleAnimation ist eine solche Animation. A DoubleAnimation erstellt einen Übergang zwischen zwei doppelten Werten. Um den Anfangswert anzugeben, legen Sie dessen From Eigenschaft fest. Um den Endwert anzugeben, legen Sie dessen To Eigenschaft fest.

  1. Ein Deckkraftwert, der 1.0 das Objekt vollständig undurchsichtig macht, und ein Deckkraftwert 0.0 macht es vollständig unsichtbar. Um den Übergang der Animation von 1.0 zu 0.0 zu erreichen, setzen Sie ihre From-Eigenschaft auf 1.0 und ihre To-Eigenschaft auf 0.0. Im Folgenden wird gezeigt, wie Sie eine DoubleAnimation in XAML erstellen.

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

    Im Folgenden wird gezeigt, wie Sie ein DoubleAnimation im 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 eine Duration. Die Duration Animation gibt an, wie lange es dauert, von seinem Startwert zum Zielwert zu wechseln. Im folgenden Beispiel wird gezeigt, wie Sie in XAML Duration auf fünf Sekunden einstellen.

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

    Im Folgenden wird gezeigt, wie Sie Duration im Code auf fünf Sekunden einstellen.

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

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

  3. Im vorherigen Code wurde eine Animation gezeigt, die einen Übergang von 1.0 zu 0.0 darstellt, wodurch das Zielelement von vollständig undurchsichtig zu vollständig unsichtbar übergeht. Wenn das Element nach dem Verschwinden wieder in die Ansicht eingeblendet werden soll, legen Sie die AutoReverse Eigenschaft der Animation auf true. Wenn die Animation auf unbestimmte Zeit wiederholt werden soll, legen Sie dessen RepeatBehavior Eigenschaft auf Forever. Im Folgenden wird gezeigt, wie die Eigenschaften AutoReverse und RepeatBehavior 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 Eigenschaften AutoReverse und RepeatBehavior 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 eine Storyboard und verwenden die TargetNameTargetProperty angefügten Eigenschaften, um das zu animierende Objekt und die Eigenschaft anzugeben.

  1. Erstellen Sie die Storyboard Animation, und fügen Sie sie als untergeordnetes Element hinzu. Im Folgenden wird das Erstellen des Storyboard XAML-Codes veranschaulicht.

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

    Um 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 das Storyboard-Element und fügen Sie die Animation als untergeordnetes Element hinzu.

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

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

  2. Das Storyboard muss wissen, wo die Animation angewendet werden soll. Verwenden Sie die Storyboard.TargetName angefügte Eigenschaft, um das zu animierende Objekt anzugeben. Im Folgenden wird gezeigt, wie der Zielname von DoubleAnimation zu MyRectangle im XAML-Code festgelegt wird.

    <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 der Zielname vom DoubleAnimation auf MyRectangle im Code festgelegt wird.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Verwenden Sie die TargetProperty zugefügte Eigenschaft, um die zu animierende Eigenschaft anzugeben. Im Folgenden wird gezeigt, wie die Animation so konfiguriert ist, dass sie auf die Opacity Eigenschaft des Rectangle XAML-Codes ausgerichtet ist.

    <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 Animation so konfiguriert ist, dass sie auf die Eigenschaft Opacity 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ätzlichen Beispielen finden Sie in der Storyboards-Übersicht.

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

Die einfachste Möglichkeit zum Anwenden und Starten eines Storyboard XAML-Codes besteht darin, einen Ereignistrigger zu verwenden. In diesem Abschnitt wird gezeigt, wie man den Storyboard mit einem Trigger in XAML verknüpft.

  1. Erstellen Sie ein BeginStoryboard Objekt und verknüpfen Sie Ihr Storyboard damit. Ein BeginStoryboard ist eine Art von TriggerAction, die angewendet wird und ein 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 ein EventTrigger und fügen Sie das BeginStoryboard zur Sammlung seiner Actions hinzu. Legen Sie die RoutedEvent-Eigenschaft des EventTrigger auf das Routingereignis fest, das Sie mit Storyboard starten möchten. (Weitere Informationen zu Routingereignissen finden Sie in der Ü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 das EventTrigger zur Triggers Sammlung 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

Die einfachste Möglichkeit, einen Storyboard Code anzuwenden und zu starten, besteht darin, einen Ereignishandler zu verwenden. In diesem Abschnitt wird gezeigt, wie Sie den Storyboard mit einem Ereignishandler im Code verknüpfen.

  1. Registrieren Sie sich für das Loaded Ereignis des Rechtecks.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. Deklarieren Sie den Ereignishandler. Verwenden Sie im Ereignishandler die Begin Methode, 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

Im Folgenden wird gezeigt, wie Sie ein Rechteck erstellen, das in XAML 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>

Im Folgenden wird gezeigt, wie Sie ein Rechteck erstellen, das im Programmcode 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, sind für unterschiedliche Eigenschaftstypen unterschiedliche Animationstypen vorhanden. Verwenden Sie zum Animieren einer Eigenschaft, die ein Double benötigt, wie die Width-Eigenschaft eines Elements, eine Animation, die Double-Werte erzeugt. Um eine Eigenschaft zu animieren, die eine Point nutzt, verwenden Sie eine Animation, die Point Werte produziert, und so weiter. Aufgrund der Anzahl verschiedener Eigenschaftentypen gibt es mehrere Animationsklassen im System.Windows.Media.Animation Namespace. Glücklicherweise folgen sie einer strengen Benennungskonvention, die es leicht macht, zwischen ihnen zu unterscheiden:

  • < Typ>Animation

    Diese Animationen, bekannt als "From/To/By"- oder "Basic"-Animationen, bewegen sich zwischen einem Startwert und einem Zielwert oder durch Hinzufügen eines Offset-Wertes zu ihrem Startwert.

    • Um einen Startwert anzugeben, legen Sie die From-Eigenschaft der Animation fest.

    • Um einen Endwert anzugeben, legen Sie die To-Eigenschaft der Animation fest.

    • Um einen Offsetwert anzugeben, legen Sie die By-Eigenschaft der Animation fest.

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

  • < Typ>AnimationUsingKeyFrames

    Keyframeanimationen sind leistungsstärker als From/To/By-Animationen, da Sie eine beliebige Anzahl von Zielwerten angeben und sogar ihre Interpolationsmethode steuern können. Einige Typen können nur mit Keyframeanimationen animiert werden. Keyframeanimationen werden in der Übersicht überKey-Frame Animationen ausführlich beschrieben.

  • < Typ>AnimationUsingPath

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

  • < Art>AnimationBase

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

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

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

Immobilientyp Entsprechende grundlegende Animation (Von/Nach/Durch) Entsprechende Key-Frame-Animation Entsprechende Pfadanimation Verwendungsbeispiel
Color ColorAnimation ColorAnimationUsingKeyFrames Nichts Animieren Sie das Color eines SolidColorBrush oder eines GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animieren Sie den Width von einem DockPanel oder den Height eines Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animieren der Center Position eines EllipseGeometry.
String Nichts StringAnimationUsingKeyFrames Nichts Animieren Sie den Text von einem TextBlock oder den Content eines Button.

Animationen sind Zeitachsen

Alle Animationstypen erben von der Timeline Klasse. Daher sind alle Animationen spezielle Arten von Zeitachsen. A Timeline definiert ein Zeitsegment. Sie können das Timing-Verhalten einer Zeitleiste angeben: Duration, wie oft sie wiederholt wird und sogar, wie schnell die Zeit dafür vergeht.

Da es sich bei einer Animation um eine TimelineAnimation handelt, stellt sie auch ein Zeitsegment dar. Eine Animation ermittelt auch Ausgabewerte, während sie durch den vorgesehenen Zeitabschnitt (oder Duration) fortschreitet. Wenn die Animation abläuft oder "abgespielt" wird, aktualisiert sie die Eigenschaft, der sie zugeordnet ist.

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

Die Dauereigenschaft

Wie bereits erwähnt, stellt eine Zeitleiste ein Zeitsegment dar. Die Länge dieses Abschnitts wird durch die Duration Zeitachse bestimmt, die normalerweise mithilfe eines TimeSpan Werts angegeben wird. Wenn ein Ablauf das Ende seiner Laufzeit erreicht, hat er eine Iteration abgeschlossen.

Eine Animation verwendet ihre Duration Eigenschaft, um den aktuellen Wert zu bestimmen. Wenn Sie keinen Duration Wert für eine Animation angeben, wird 1 Sekunde verwendet, was die Standardeinstellung ist.

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

Stunden:Minuten:Sekunden

Die folgende Tabelle enthält mehrere Duration Einstellungen und deren resultierende Werte.

Konfiguration 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 eines Duration im Code ist die Verwendung der FromSeconds Methode zum Erstellen einer TimeSpan, dann Deklarieren einer neuen Duration Struktur mit diesem TimeSpan.

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

AutoReverse

Die AutoReverse Eigenschaft gibt an, ob eine Zeitachse rückwärts wiedergegeben wird, nachdem sie das Ende ihrer Duration erreicht hat. Wenn Sie diese Animationseigenschaft auf true festlegen, kehrt die Animation um, nachdem sie ihr Ende erreicht hat, und spielt vom Endwert zurück zum Startwert. Standardmäßig ist diese Eigenschaft false.

Wiederholungsverhalten

Die RepeatBehavior-Eigenschaft gibt an, wie oft eine Zeitachse abgespielt wird. Standardmäßig haben Zeitachsen eine Iterationsanzahl von 1.0, was bedeutet, dass sie einmal abgespielt werden und sich gar nicht wiederholen.

Weitere Informationen zu diesen Eigenschaften und anderen Eigenschaften finden Sie unter " Timing Behaviors Overview".

Anwenden einer Animation auf eine Eigenschaft

In den vorherigen Abschnitten werden die verschiedenen Arten von Animationen und deren Anzeigedauereigenschaften beschrieben. In diesem Abschnitt wird gezeigt, wie Sie die Animation auf die Eigenschaft anwenden, die Sie animieren möchten. Storyboard Objekte bieten eine Möglichkeit, Animationen auf Eigenschaften anzuwenden. Eine Storyboard ist eine Containerzeitleiste, die Zielinformationen für die darin enthaltenen Animationen bereitstellt.

Anvisieren von Objekten und Eigenschaften

Die Storyboard Klasse stellt die TargetName und TargetProperty angefügten Eigenschaften bereit. Indem Sie diese Eigenschaften für eine Animation festlegen, teilen Sie der Animation mit, was animiert werden soll. Bevor eine Animation jedoch auf ein Objekt abzielen kann, muss das Objekt in der Regel einen Namen erhalten.

Das Zuweisen eines Namens zu einem FrameworkElement Objekt unterscheidet sich von der Zuweisung eines Namens zu einem Freezable Objekt. Die meisten Steuerelemente und Panels sind Frameworkelemente; Die meisten rein grafischen Objekte wie Pinsel, Transformationen und Geometrien sind freizierbare Objekte. Wenn Sie nicht sicher sind, ob ein Typ ein FrameworkElement oder ein Freezableist, lesen Sie den Abschnitt "Vererbungshierarchie " der Referenzdokumentation.

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

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

Die folgenden Abschnitte enthalten ein Beispiel für die Benennung eines Elements in XAML und Code. Ausführlichere Informationen zur Benennung und Zielbestimmung finden Sie in der Storyboards-Übersicht.

Anwenden und Starten von Storyboards

Um ein Storyboard in XAML zu starten, verbinden Sie es mit einem EventTrigger. Ein EventTrigger Objekt, das beschreibt, welche Aktionen ausgeführt werden sollen, wenn ein angegebenes Ereignis auftritt. Eine dieser Aktionen kann eine BeginStoryboard Aktion sein, die Sie zum Starten Ihres Storyboards verwenden. Ereignistrigger ähneln dem Konzept von Ereignishandlern, da sie es Ihnen ermöglichen, anzugeben, wie Ihre Anwendung auf ein bestimmtes Ereignis reagiert. Im Gegensatz zu Ereignishandlern können Ereignistrigger in XAML vollständig beschrieben werden. Kein anderer Code ist erforderlich.

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

Interaktives Steuern eines Storyboards

Im vorherigen Beispiel wurde gezeigt, wie ein Storyboard ausgelöst wird, wenn ein Ereignis eintritt. Sie können Storyboard auch interaktiv steuern, nachdem es gestartet wurde: Sie können es anhalten, weiterführen, beenden, zum Füllzeitraum vorspulen, suchen und Storyboard entfernen. Weitere Informationen und ein Beispiel zum interaktiven Steuern eines Steuerelements Storyboardfinden Sie unter " Storyboards Overview".

Was geschieht nach Beendigung einer Animation?

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

Das DoubleAnimation-Beispiel im vorherigen Absatz endet nicht, weil seine RepeatBehavior-Eigenschaft auf Forever gesetzt ist. Im folgenden Beispiel wird ein Rechteck mithilfe einer ähnlichen Animation animiert. Im Gegensatz zum vorherigen Beispiel bleiben die RepeatBehavior Eigenschaften und AutoReverse Eigenschaften dieser Animation bei ihren Standardwerten erhalten. Daher verläuft die Animation von 1 bis 0 über fünf Sekunden 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 sein FillBehavior nicht von seinem Standardwert, HoldEnd, geändert wurde, behält die Animation ihren Endwert, 0, bei, wenn sie endet. Daher verbleibt das Opacity Rechteck bei 0, nachdem die Animation beendet wurde. Wenn Sie das Opacity Rechteck auf einen anderen Wert festlegen, hat ihr Code anscheinend keine Auswirkung, da sich die Animation noch auf die Opacity Eigenschaft auswirkt.

Eine Möglichkeit, die Steuerung einer animierten Eigenschaft im Code wieder zu erlangen, besteht darin, die BeginAnimation Methode zu verwenden und null für den AnimationTimeline Parameter anzugeben. Weitere Informationen und ein Beispiel finden Sie unter Festlegen einer Eigenschaft nach dem Animieren mit einem Storyboard.

Beachten Sie, dass sich der Eigenschaftswert ändert, obwohl das Festlegen eines Eigenschaftswerts mit einer Active oder Filling Animation scheinbar keine Auswirkungen hat. Weitere Informationen finden Sie unter " Animation and Timing System Overview".

Datenbindung und Animationen

Die meisten Animationseigenschaften können datengebunden oder animiert werden; zum Beispiel können Sie die Duration-Eigenschaft einer DoubleAnimation animieren. Aufgrund der Funktionsweise des Timing-Systems verhalten sich datengebundene oder animierte Animationen jedoch nicht wie andere datengebundene oder animierte Objekte. Um ihr Verhalten zu verstehen, ist es hilfreich herauszufinden, was es bedeutet, eine Animation auf eine Eigenschaft anzuwenden.

Verweisen Sie auf das Beispiel im vorherigen Abschnitt, in dem gezeigt wurde, wie sie das Opacity Rechteck animieren. Wenn das Rechteck im vorherigen Beispiel geladen wird, wendet dessen Ereignistrigger die Storyboard. Das Timing-System erstellt eine Kopie der Storyboard und seiner Animation. Diese Kopien werden eingefroren (als schreibgeschützt erstellt) und Clock Objekte werden daraus erstellt. Diese Uhren erledigen die eigentliche Arbeit beim Animieren der zielbezogenen Eigenschaften.

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

Obwohl für die Storyboard eine Uhr erstellt wird, wird sie auf keine Eigenschaften angewendet. Sein Zweck ist es, seine untergeordnete Uhr zu steuern, diejenige, welche für die DoubleAnimation erstellt wurde.

Damit eine Animation Datenbindungs- oder Animationsänderungen widerspiegelt, muss die Uhr neu generiert werden. Uhren werden nicht automatisch für Sie regeneriert. Um eine Animation Änderungen widerspiegeln zu lassen, wenden Sie das Storyboard mithilfe einer BeginStoryboard oder der Begin Methode erneut an. Wenn Sie eine dieser Methoden verwenden, wird die Animation neu gestartet. Im Code können Sie die Seek Methode verwenden, um das Storyboard zurück zur vorherigen Position zu verschieben.

Ein Beispiel für eine datengebundene Animation finden Sie unter Key Spline Animation Sample. Weitere Informationen zur Funktionsweise des Animations- und Anzeigedauersystems finden Sie unter Animation und Timing System Overview.

Andere Möglichkeiten zum Animieren

Die Beispiele in dieser Übersicht zeigen, wie man mit Storyboards animiert. Wenn Sie Code verwenden, können Sie auf verschiedene andere Weise animieren. Weitere Informationen finden Sie in der Übersicht über Eigenschaftsanimationstechniken.

Animationsbeispiele

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

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.
Animation-Tipps und Tricks Listet hilfreiche Tipps zum Beheben von Problemen mit Animationen auf, z. B. leistung.
Übersicht über benutzerdefinierte Animationen Beschreibt, wie das Animationssystem mit Keyframes, Animationsklassen oder Rückrufen pro Frame erweitert wird.
Von/Nach/Durch Animationen Übersicht Beschreibt, wie eine Animation erstellt wird, die zwischen zwei Werten wechselt.
Übersicht über Keyframe-Animationen Beschreibt, wie eine Animation mit mehreren Zielwerten erstellt wird, einschließlich der Möglichkeit, die Interpolationsmethode zu steuern.
Übergangsfunktionen Erläutert, wie Sie mathematische Formeln auf Ihre Animationen anwenden, um ein realistisches Verhalten wie z. B. Das Springen zu erzielen.
Pfadanimationen – Übersicht Beschreibt, wie ein Objekt entlang eines komplexen Pfads verschoben oder gedreht wird.
Übersicht über die Verfahren zur Animation von Eigenschaften Beschreibt Eigenschaftenanimationen mithilfe von Storyboards, lokalen Animationen, Uhren und Animationen pro Frame.
Übersicht über Storyboards Beschreibt, wie Sie Storyboards mit mehreren Zeitachsen verwenden, um komplexe Animationen zu erstellen.
Übersicht über Timing-Verhaltensweisen Beschreibt die Timeline Typen und Eigenschaften, die in Animationen verwendet werden.
Übersicht über Zeitsteuerungsereignisse Beschreibt die Ereignisse, die an den Objekten Timeline und Clock für die Ausführung von Code zu bestimmten Zeitpunkten verfügbar sind, wie zum Beispiel "Beginn", "Anhalten", "Fortsetzen", "Überspringen" oder "Beenden".
Hilfe & Anleitung Enthält Codebeispiele für die Verwendung von Animationen und Zeitachsen in Ihrer Anwendung.
Anleitungsthemen für Uhren Enthält Codebeispiele für die Verwendung des Clock Objekts in Ihrer Anwendung.
Hilfe & Anleitung zu Keyframes Enthält Codebeispiele für die Verwendung von Keyframeanimationen in Ihrer Anwendung.
Hilfe & Anleitung zur Pfadanimation Enthält Codebeispiele für die Verwendung von Pfadanimationen in Ihrer Anwendung.

Referenz