Übersicht über Animationen

 

Veröffentlicht: Juni 2016

Windows Presentation Foundation (WPF) bietet einen leistungsfähigen Satz von Grafiken und Layout-Funktionen, die Ihnen ermöglichen, attraktive Benutzeroberflächen und ansprechende Dokumente erstellen. Animation kann eine ansprechende Benutzeroberfläche noch spektakuläre und nutzbar machen. Indem Sie einfach eine Hintergrundfarbe animieren oder Anwenden einer animierten transformieren, Bildschirmübergänge erstellen oder hilfreiche visuelle Hinweise geben.

Diese Übersicht bietet eine Einführung in die WPF Animations- und Zeitsteuerungssystem. Liegt der Schwerpunkt auf die Animation von WPF -Objekten mithilfe von Storyboards.

Eine Animation entsteht, die erstellt wird, durch die rasche Abfolge einer Reihe von Bildern, jeweils ein wenig voneinander unterscheiden. Das Gehirn nimmt die Gruppe von Bildern als eine einzelne sich ändernde Szene wahr. 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 entspricht. Beispielsweise kann ein Programm, das eine Zeichnung eines Rechtecks langsam angezeigt wird wie folgt arbeiten.

  • Das Programm erstellt einen Zeitgeber.

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

  • Jedes Mal, das Programm den Zeitgeber prüft, berechnet den aktuellen Wert der Deckkraft für das Rechteck basierend auf wie viel Zeit verstrichen ist.

  • Das Programm wird dann das Rechteck mit dem neuen Wert aktualisiert, und zeichnet es neu.

Vor dem WPF, Microsoft Windows mussten Entwickler zum Erstellen und verwalten ihre eigenen Systeme Timing oder spezielle benutzerdefinierte Bibliotheken verwenden. WPFenthält ein effizientes Zeitsteuerungssystem, die mithilfe von verwaltetem Code verfügbar gemacht wird und Extensible Application Markup Language (XAML) und Multithreading tief in die WPF Framework. WPFAnimation erleichtert es, Steuerelemente und andere Grafikobjekte zu animieren.

WPFgesamte Hintergrundarbeit das Verwalten eines Zeitsteuerungssystems und effizienten Neuzeichnen des Bildschirms. Es bietet Timing-Klassen, mit denen Sie den Schwerpunkt auf die Effekte, die Sie erstellen anstatt die Mechanik dieser Effekte erzielen, möchten. WPFAußerdem erleichtert es so erstellen Sie eigene Animationen Verfügbarmachen von Animation Basisklassen, die von denen die Klassen erben können, um benutzerdefinierte Animationen zu erzeugen. Diese benutzerdefinierten Animationen zu viele der Leistungsvorteile des standard-Animationsklassen erhalten.

Wenn Sie verstehen, dass einige wichtige Konzepte zu den Zeitsteuerungssystem WPF Animationen können einfacher zu verwenden sein. Am wichtigsten ist, WPF, animieren Sie Objekte, indem Sie Animationen auf ihre einzelnen Eigenschaften anwenden. Zum Beispiel um ein FrameworkElement zu vergrößern, animieren Sie dessen Breite und Höhe Eigenschaften. Um ein Objekt ausgeblendet, animieren Sie dessen Deckkraft Eigenschaft.

Für eine Eigenschaft Animation-Funktionen verfügen müssen sie die folgenden drei Anforderungen erfüllen:

WPFenthält viele Objekte mit IAnimatable Eigenschaften. Steuerelemente, z. B. Schaltfläche und TabControl, sowie Bereich und Form Objekte erben von DependencyObject. Die meisten Eigenschaften werden Abhängigkeitseigenschaften.

Animationen können fast überall, die Stile und Steuerelementvorlagen enthält. Animationen müssen nicht visual werden; Sie können Objekte animieren, die nicht Teil der Benutzeroberfläche sind, wenn sie die Kriterien erfüllen, die in diesem Abschnitt beschrieben werden.

Dieses Beispiel zeigt, wie Sie eine WPF Animation den Wert einer Abhängigkeitseigenschaft zu animieren. Verwendet eine DoubleAnimation, also eine Art von Animation, die generiert doppelte Werte zu animieren der Deckkraft Eigenschaft eine Rechteck. Daher die Rechteck ein-und ausgeblendet.

Der erste Teil des Beispiels erstellt ein Rechteck Element. Die folgenden Schritte zeigen, wie eine Animation erstellt und auf des Rechtecks anwenden Deckkraft Eigenschaft.

Das folgende Beispiel zeigt, wie Sie erstellen ein Rechteck Element in einer StackPanel in XAML.

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

Das folgende Beispiel zeigt, wie Sie erstellen ein Rechteck Element in einer StackPanel im Code.

            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, Animieren der Deckkraft Eigenschaft. Da die Deckkraft -Eigenschaft ist vom Typ doppelte, benötigen Sie eine Animation, die double-Werte erzeugt. Ein DoubleAnimation ist eine solche Animation. Ein DoubleAnimation erstellt einen Übergang zwischen zwei double-Werte. Wenn Startwert angeben möchten, legen Sie seine aus Eigenschaft. Um den Endwert anzugeben, legen Sie seine auf Eigenschaft.

  1. Durchlässigkeitswert 1.0 wird das Objekt transparent und Durchlässigkeitswert 0.0 ist es unsichtbar. To make the animation transition from 1.0 to 0.0 you set its From property to 1.0 and its To property to 0.0. Das folgende Beispiel zeigt, wie Sie erstellen ein DoubleAnimation in XAML.

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

    Das folgende Beispiel zeigt, wie Sie erstellen ein DoubleAnimation im Code.

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

  2. Als Nächstes geben Sie einen Dauer. Die Dauer einer Animation gibt an, wie lange der Übergang vom Startwert zum Zielwert dauert. Das folgende Beispiel zeigt, wie Sie festlegen der Dauer auf fünf Sekunden in XAML.

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

    Das folgende Beispiel zeigt, wie Sie festlegen der Dauer auf fünf Sekunden im Code.

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

  3. Der obige Code zeigt eine Animation, die von übergeht 1.0 zu 0.0, wodurch das Zielelement aus transparent vollständig unsichtbar erreicht. Damit das Element Ausblenden nach wieder eingeblendet wird, setzen die AutoReverse -Eigenschaft der Animation, true. Um die Animation endlos wiederholt wird, legen Sie seine RepeatBehavior -Eigenschaft ewig. Das folgende Beispiel zeigt die Vorgehensweise bei der AutoReverse und RepeatBehavior Eigenschaften in XAML.

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

    Das folgende Beispiel zeigt die Vorgehensweise bei der AutoReverse und RepeatBehavior Eigenschaften im Code.

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

Teil 2: Erstellen Sie ein Storyboard

Um eine Animation auf ein Objekt anzuwenden, erstellen Sie eine Storyboard und die "TargetName" und TargetProperty Eigenschaften zum Angeben des Objekts und die zu animierende Eigenschaft angefügt.

  1. Erstellen der Storyboard und fügen Sie die Animation als untergeordnetes Element hinzu. Das folgende Beispiel zeigt, wie Sie erstellen die Storyboard in XAML.

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

    Erstellen der Storyboard im Code deklariert eine Storyboard Variablen auf Klassenebene.

        public partial class MainWindow : Window
        {
            private Storyboard myStoryboard;
    

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

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

  2. Die Storyboard wissen, wo die Animation angewendet wurde. Verwenden der Storyboard.TargetName angefügte Eigenschaft, um das zu animierende Objekt angeben. Das folgende Beispiel zeigt, wie Sie den Zielnamen der Festlegen der DoubleAnimation auf MyRectangle in XAML.

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

    Das folgende Beispiel zeigt, wie Sie den Zielnamen der Festlegen der DoubleAnimation auf MyRectangle im Code.

                Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    

  3. Verwenden der TargetProperty angefügte Eigenschaft, um die zu animierende Eigenschaft angeben. Das folgende Beispiel zeigt, wie die Animation konfiguriert ist Ziel der Deckkraft Eigenschaft der Rechteck in XAML.

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

    Das folgende Beispiel zeigt, wie die Animation konfiguriert ist Ziel der Deckkraft Eigenschaft der Rechteck im Code.

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

Weitere Informationen zu TargetProperty Syntax und zusätzliche Beispiele finden Sie in der Storyboards Overview.

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

Die einfachste Möglichkeit, anwenden und Starten einer Storyboard in XAML ist die Verwendung ein Ereignistriggers. Dieser Abschnitt beschreibt das Zuordnen der Storyboard mit einem Trigger in XAML.

  1. Erstellen einer BeginStoryboard Objekt, und ordnen Sie ihm das Storyboard zu. Ein BeginStoryboard ist ein TriggerAction , die angewendet wird, und startet einen Storyboard.

              <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 einer EventTrigger und Hinzufügen der BeginStoryboard , seine Aktionen Auflistung. Legen Sie die RoutedEvent Eigenschaft der EventTrigger zu den Ereignissen, die Sie starten möchten die Storyboard. (Weitere Informationen zu Routingereignissen finden Sie unter der Ereignisübersicht weitergeleitet.)

            <!-- 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. Hinzufügen der EventTrigger an der Trigger -Auflistung des Rechtecks.

        <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, anwenden und Starten einer Storyboard im Code wird einen Ereignishandler verwenden. Dieser Abschnitt beschreibt das Zuordnen der Storyboard mit einem Ereignishandler im Code.

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

                myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    

  2. Deklarieren Sie den Ereignishandler. Verwenden Sie im Ereignishandler, der beginnen Methode, um das Storyboard anzuwenden.

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

Vollständiges Beispiel

Der folgende Code zeigt ein Rechteck zu erstellen, die 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>

Der folgende Code zeigt ein Rechteck zu erstellen, die 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);
        }
    }
}

Da Animationen Eigenschaftswerte generieren, gibt es verschiedene Animationstypen für verschiedene Eigenschaftentypen. Eine Eigenschaft animieren, akzeptiert ein doppelte, wie z. B. die Breite Eigenschaft eines Elements, verwenden Sie eine Animation, erzeugt doppelte Werte. Eine Eigenschaft animieren, akzeptiert ein Punkt, verwenden Sie eine Animation, erzeugt Punkt Werte usw.. Aufgrund der Anzahl der verschiedenen Eigenschaftentypen, es gibt mehrere Animationsklassen in der System.Windows.Media.Animation Namespace. Glücklicherweise folgen sie eine strenge Benennungskonvention, die es erleichtert, sie zu unterscheiden:

  • < Typ> Animation

    Bekannt als "From/To/By" oder "basic" Animation, animieren diese zwischen einem Start- und Ziel-Wert oder durch Hinzufügen eines Offsetwerts zum Startwert.

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

    • Um einen Endwert angeben möchten, legen Sie die To-Eigenschaft der Animation.

    • Um einen Offsetwert angeben, legen Sie die Eigenschaft der Animation.

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

  • < Typ> AnimationUsingKeyFrames-Klasse

    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 ausführlich beschrieben werden die Übersicht über Keyframe-Animationen.

  • < Typ> AnimationUsingPath

    Pfadanimationen können Sie mithilfe eines geometrischen Pfads animierten Werte zu erstellen.

  • < Typ> AnimationBase

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

In den meisten Fällen sollten Sie mithilfe der <> </> Typ> Animation-Klassen, z. B. DoubleAnimation und ColorAnimation.

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

EigenschaftentypZugehörige Basic (From/To/By) animationZugehörige Keyframe-animationZugehörige PfadanimationBeispiel für die Verwendung
FarbeColorAnimationColorAnimationUsingKeyFramesKeineAnimate the Color of a SolidColorBrush or a GradientStop.
DoubleDoubleAnimationDoubleAnimationUsingKeyFramesDoubleAnimationUsingPathAnimate the Width of a DockPanel or the Height of a Button.
PunktPointAnimationPointAnimationUsingKeyFramesPointAnimationUsingPathAnimieren der Center position ein EllipseGeometry.
StringKeineStringAnimationUsingKeyFramesKeineAnimate the Text of a TextBlock or the Content of a Button.

Animationen sind Timeline-Klassen

Alle Animationstypen erben von der Zeitachse -Klasse; daher sind alle Animationen spezialisierte Typen von Zeitplänen. Ein Zeitachse definiert einen Zeitabschnitt. Sie können angeben, die Zeitverhalten einer Zeitachse: seine Dauer, wie oft es wiederholt wird und sogar wie schnell die Zeit für das Objekt abläuft.

Da eine Animation eine Zeitachse, auch einen Zeitabschnitt dar. Berechnet eine Animation auch Ausgabewerte, während ihr Zeitabschnitt Mal durchlaufen (oder Dauer). Wie die Ausführung der Animation erfolgt, oder "Wiedergabe" wird die Eigenschaft, der zugeordneten aktualisiert.

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

Die Duration-Eigenschaft

Wie bereits erwähnt stellt eine Zeitachse einen Zeitabschnitt dar. Die Länge dieses Abschnitts wird anhand der Dauer der Zeitachse, die normalerweise mit ist eine TimeSpan Wert. Wenn eine Zeitachse das Ende ihrer Dauer erreicht, hat es eine Iteration abgeschlossen.

Eine Animation verwendet die Dauer -Eigenschaft können Sie den aktuellen Wert zu bestimmen. Wenn Sie keinen angeben einer Dauer Wert für eine Animation Sekunde, was der Standardeinstellung verwendet.

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

hours : minutes : seconds

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

EinstellungErgebniswert
0:0:5.5Exchange&5;.5 Sekunden.
0:30:5.530 Minuten und 5,5 Sekunden.
1:30:5.51 Stunde, 30 Minuten und 5,5 Sekunden.

Eine Möglichkeit zum Angeben einer Dauer im Code ist die Verwendung der FromSeconds Methode zum Erstellen einer TimeSpan, deklarieren Sie eine neue Dauer Struktur verwenden, die TimeSpan.

Weitere Informationen zu Dauer Werte und die vollständige Extensible Application Markup Language (XAML) -Syntax finden Sie unter der Dauer Struktur.

AutoReverse

Die AutoReverse -Eigenschaft gibt an, ob eine Zeitachse rückwärts durchlaufen wird, nach des Endes des erreichen seine Dauer. Wenn Sie diese Animationseigenschaft auf true, eine Animation kehrt nach des Endes des erreichen seine Dauer, während der Wiedergabe vom Endwert zum Startwert zurück. Diese Eigenschaft ist standardmäßig false.

RepeatBehavior

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

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

In den vorherigen Abschnitten werden die verschiedenen Arten von Animationen und ihre Zeitsteuerungseigenschaften beschrieben. In diesem Abschnitt wird gezeigt, wie die Animation auf die Eigenschaft angewendet, die Sie animieren möchten. Storyboard Objekte bieten eine Möglichkeit, Animationen auf Eigenschaften anzuwenden. Ein Storyboard ist ein Containerzeitachse , Zielinformationen für die darin enthaltenen Animationen bereitstellt.

Zielobjekte und-Eigenschaften

Die Storyboard -Klasse stellt die TargetName und TargetProperty angefügte Eigenschaften. Durch Festlegen dieser Eigenschaften für eine Animation, weisen Sie die Animation zu animieren. Allerdings vor eine Animation ein Objekt angewendet werden kann, muss das Objekt in der Regel ein Name zugewiesen werden.

Ein Name zugewiesen ein FrameworkElement unterscheidet sich ein Name zugewiesen ein Freezable Objekt. Die meisten Steuerelemente und Bereiche sind Framework-Elemente. Allerdings sind die meisten rein grafische Objekte, z. B. Pinsel, Transformationen und Geometrien freezable-Objekte. Wenn Sie nicht sicher sind, ob ein Typ ist ein FrameworkElement oder eine Freezable, finden Sie in der Vererbungshierarchie Abschnitt der Dokumentation.

  • Vornehmen einer FrameworkElement ein Animationsziel, Sie geben sie einen Namen durch Festlegen seiner Name Eigenschaft. Im Code müssen Sie außerdem verwenden die RegisterName Methode, um den Elementnamen mit der Seite registrieren, zu der er gehört.

  • Zu einer Freezable -Objekt ein Animationsziel in XAML, verwenden Sie die X: Name-Direktive es sich um einen Namen zuzuweisen. Im Code verwenden Sie einfach die RegisterName Methode, um das Objekt mit der Seite zu registrieren, zu der er gehört.

Die folgenden Abschnitte enthalten ein Beispiel Benennen eines Elements in XAML und Code. Ausführlichere Informationen zum Benennen und abzielen, finden Sie unter der Storyboards Overview.

Anwenden und Starten von Storyboards

So starten Sie ein Storyboard in XAML, ordnen Sie es ein EventTrigger. Ein EventTrigger ist ein Objekt, das beschreibt, welche Aktionen durchgeführt werden, wenn ein bestimmtes Ereignis auftritt. Eine solche Aktion kann eine BeginStoryboard Aktion, die Sie verwenden, um das Storyboard zu starten. Ereignistrigger ähneln Konzept Ereignishandler da können Sie angeben, wie Ihre Anwendung auf ein bestimmtes Ereignis reagiert. Im Gegensatz zum Ereignishandler Ereignistrigger kann vollständig beschrieben XAML; es ist kein weiterer Code erforderlich.

Starten einer Storyboard im Code können Sie ein EventTrigger oder verwenden Sie die beginnen Methode der Storyboard Klasse.

Das vorherige Beispiel zeigte Starten einer Storyboard bei Auftreten eines Ereignisses. Sie können auch interaktiv steuern einer Storyboard nach dem Start: Sie können anhalten, fortsetzen, beenden, werden sie zur seines, suchen und Entfernen der Storyboard. Weitere Informationen und ein Beispiel, das zeigt, wie Sie interaktiv steuern einer Storyboard, finden Sie unter der Storyboards Overview.

Die FillBehavior -Eigenschaft gibt das Verhalten am Ende der Zeitachse. Standardmäßig beginnt eine Zeitachse füllen endet. Eine Animation, füllen enthält den endgültige Ausgabe-Wert.

Die DoubleAnimation im vorherigen Beispiel wird nicht beendet, da die RepeatBehavior -Eigenschaft wird festgelegt, um ewig. Im folgende Beispiel wird ein Rechteck mithilfe einer ähnlichen Animation animiert. Im Gegensatz zum vorherigen Beispiel ist die RepeatBehavior und AutoReverse Eigenschaften dieser Animation sind Links, die Standardwerte. Aus diesem Grund wird die Animation wechselt von 1 auf 0 innerhalb von 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));

Da die FillBehavior wurde nicht von den Standardwert HoldEnd, behält die Animation Endwert, 0, wenn er beendet wird. Aus diesem Grund die Deckkraft der Rechteck bleibt bei 0, nachdem die Animation beendet. Wenn Sie festlegen, die Deckkraft des Rechtecks auf einen anderen Wert Code keine Auswirkung hat wird angezeigt, da die Animation immer noch beeinträchtigt wird die Deckkraft Eigenschaft.

Eine Möglichkeit, die Kontrolle über eine animierte Eigenschaft im Code ist die Verwendung der BeginAnimation Methode und geben Sie null für den AnimationTimeline Parameter. Weitere Informationen und ein Beispiel finden Sie unter legen Sie eine Eigenschaft nach animieren sie ein Storyboard.

Beachten Sie, dass zwar über einem Eigenschaftswert festlegen, der eine Active oder füllen Animation angezeigt wird, keine Auswirkung hat, den Wert der Eigenschaft ändert. Weitere Informationen finden Sie unter der Animation and Timing System Overview.

Die meisten Animationseigenschaften können Daten gebunden oder animiert werden; Sie können z. B. Animieren der Dauer Eigenschaft ein DoubleAnimation. Jedoch aufgrund der Funktionsweise des Zeitsteuerungssystems Daten datengebundene oder animierte Animationen nicht wie andere Verhalten gebunden wurde oder animierte Objekte. Um ihr Verhalten zu verstehen, sollten sie wissen, was es bedeutet, eine Animation auf eine Eigenschaft anzuwenden.

Finden Sie im Beispiel im vorherigen Abschnitt wurde gezeigt, wie Sie animieren, die die Deckkraft eines Rechtecks. Ereignistrigger angewendet wird, wenn das Rechteck im vorherigen Beispiel geladen wird, die Storyboard. Das Zeitsteuerungssystem erstellt eine Kopie der Storyboard und die Animation. Diese Kopien werden gesperrt (schreibgeschützt) und Uhr Objekte daraus erstellt werden. Das eigentliche Animieren der Zieleigenschaften erfolgt durch diese Uhren.

Das Zeitsteuerungssystem erstellt eine Uhr für die DoubleAnimation und wendet sie auf das Objekt und die Eigenschaft, die durch angegeben ist die TargetName und TargetProperty von der DoubleAnimation. In diesem Fall gilt das Zeitsteuerungssystem Uhr der Deckkraft -Eigenschaft des Objekts mit dem Namen "MyRectangle" angewendet.

Zwar ebenfalls eine Uhr für erstellt die Storyboard, die Uhr auf Eigenschaften angewendet wird. Sein Zweck besteht darin, seine untergeordneten Uhr, die Uhr zu steuern, die für erstellt wird die DoubleAnimation.

Für eine Animation Daten Bindung oder Animation widerzuspiegeln muss die Uhr erneut generiert werden. Uhren werden nicht automatisch neu generiert. Damit eine Animation aktualisiert wird, wenden Sie erneut an das Storyboard mit einer BeginStoryboard oder beginnen Methode. Wenn Sie eine dieser Methoden verwenden, startet die Animation neu. Im Code können Sie die Seek Methode, um im Storyboard zur vorherigen Position zurück.

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

In den Beispielen in dieser Übersicht wird die Animation von mit Storyboards. Wenn Sie Code verwenden, können Sie auf verschiedene Weise animieren. Weitere Informationen finden Sie unter der Property Animation Techniques Overview.

In den folgenden Beispielen können Sie beim Hinzufügen von Animationen zu einer Anwendung starten.

TitelBeschreibung
Das Animations- und Zeitsteuerungssystem SystemübersichtBeschreibt, wie das Zeitsteuerungssystem verwendet die Zeitachse und Uhr Klassen, die Sie beim Erstellen von Animationen ermöglichen.
Animation-Tipps und TricksListen Sie hilfreiche Tipps zum Beheben von Problemen mit Animationen, z. B. die Leistung.
Übersicht über benutzerdefinierte AnimationenBeschreibt, wie das Animationssystem mit Keyframes, Animationsklassen oder pro-Frame-Rückrufe zu erweitern.
Übersicht über From/To/By-AnimationenBeschreibt, wie Sie eine Animation erstellen, die zwischen zwei Werten wechselt.
Übersicht über Keyframe AnimationenBeschreibt das Erstellen einer Animation mit mehreren Zielwerten, einschließlich der Möglichkeit, die Interpolationsmethode steuern.
BeschleunigungsfunktionenErklärt, wie mathematische Formeln für die Animationen, um realistische Verhalten, z. B. Zurückweisen anwenden.
Übersicht über PfadanimationenBeschreibt das Verschieben oder Drehen eines Objekts entlang eines Pfads komplexer.
Property Animation Techniques OverviewBeschreibt Eigenschaftenanimationen mit Storyboards, lokalen Animationen, Uhren und pro-Frame-Animationen.
Übersicht über StoryboardsBeschreibt, wie Storyboards mit mehreren Zeitachsen zum Erstellen komplexer Animationen.
Übersicht über ZeitsteuerungsverhaltenBeschreibt die Zeitachse Typen und Eigenschaften für Animationen.
Übersicht über ZeitsteuerungsereignisseBeschreibt die Ereignisse, die auf die Zeitachse und Uhr -Objekte zum Ausführen des Codes an Punkten auf der Zeitachse, z. B. starten, anhalten, fortsetzen, überspringen oder beenden.
Gewusst-wie-ThemenEnthält Codebeispiele für die Verwendung von Animationen und Zeitachsen in der Anwendung.
Uhren Gewusst-wie-ThemenEnthält Codebeispiele für die Verwendung der Uhr Objekt in der Anwendung.
Themen zur Keyframe-Enthält Codebeispiele für die Verwendung von Keyframe-Animationen in Ihrer Anwendung.
Pfad-Themen zur PfadanimationEnthält Codebeispiele für die Verwendung von Pfadanimationen in der Anwendung.

Zeitachse

Storyboard

BeginStoryboard

Uhr

Anzeigen: