Übersicht über AnimationenAnimation Overview

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) bietet eine leistungsstarke Reihe von Grafik- und Layout-Features, die Ihnen ermöglichen, attraktive Benutzeroberflächen und ansprechende Dokumente zu erstellen.Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides a powerful set of graphics and layout features that enable you to create attractive user interfaces and appealing documents. Animation kann eine ansprechende Benutzeroberfläche noch spektakulärer und benutzerfreundlicher machen.Animation can make an attractive user interface even more spectacular and usable. Indem Sie einfach eine Hintergrundfarbe animieren oder Anwenden einer animierten Transform, können Sie eindrucksvolle Bildschirmübergänge erstellen oder hilfreiche visuelle Hinweise.By just animating a background color or applying an animated Transform, you can create dramatic screen transitions or provide helpful visual cues.

Diese Übersicht bietet eine Einführung in die WPFWPF Animations- und Zeitsteuerungssystem.This overview provides an introduction to the WPFWPF animation and timing system. Der Schwerpunkt liegt auf der Animation von WPFWPF Objekte mithilfe von Storyboards.It focuses on the animation of WPFWPF objects by using storyboards.

Einführung in AnimationenIntroducing Animations

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.Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. Die Abfolge von Bildern wird vom Gehirn als einzelne, sich ändernde Szene wahrgenommen.The brain perceives the group of images as a single changing scene. Im Film wird diese Illusion mithilfe einer Kamera, die viele Fotos, oder Frames, pro Sekunde aufzeichnet, erstellt.In film, this illusion is created by using cameras that record many photographs, or frames, each second. Bei der Wiedergabe der Frames in einem Projektor sieht das Publikum ein bewegtes Bild.When the frames are played back by a projector, the audience sees a moving picture.

Animationen auf einem Computer ist ähnlich.Animation on a computer is similar. Beispielsweise kann ein Programm, das die Zeichnung eines Rechtecks langsam ausblendet wie folgt arbeiten.For example, a program that makes a drawing of a rectangle fade out of view might work as follows.

  • Das Programm erstellt einen Timer.The program creates a timer.

  • Das Programm überprüft den Timer in festgelegten Intervallen, um festzustellen, wie viel Zeit verstrichen ist.The program checks the timer at set intervals to see how much time has elapsed.

  • Jedes Mal wenn das Programm den Timer prüft, berechnet es den aktuellen Durchsichtigkeitswert für das Rechteck, basierend auf der verstrichenen Zeit.Each time the program checks the timer, it computes the current opacity value for the rectangle based on how much time has elapsed.

  • Das Programm übernimmt dann den neuen Wert für das Rechteck und zeichnet es neu.The program then updates the rectangle with the new value and redraws it.

Vor dem WPFWPF, Microsoft WindowsMicrosoft Windows mussten Entwickler erstellen und verwalten ihre eigenen Zeitsteuerungssysteme oder spezielle benutzerdefinierte Bibliotheken verwenden.Prior to WPFWPF, Microsoft WindowsMicrosoft Windows developers had to create and manage their own timing systems or use special custom libraries. WPFWPF enthält ein effizientes Zeitsteuerungssystem, die mithilfe von verwaltetem Code verfügbar gemacht wird und Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) , die umfassend integriert ist, und die WPFWPF Framework.includes an efficient timing system that is exposed through managed code and Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) and that is deeply integrated into the WPFWPF framework. WPFWPF-Animation ermöglicht es, Steuerelemente und andere Grafikobjekte ganz einfach zu animieren.animation makes it easy to animate controls and other graphical objects.

WPFWPF erledigt die gesamte Hintergrundarbeit zum Verwalten eines Zeitsteuerungssystems und zum effizienten Neuzeichnen des Bildschirms.handles all the behind-the-scenes work of managing a timing system and redrawing the screen efficiently. 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.It provides timing classes that enable you to focus on the effects you want to create, instead of the mechanics of achieving those effects. WPFWPF 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.also makes it easy to create your own animations by exposing animation base classes from which your classes can inherit, to produce customized animations. Diese benutzerdefinierten Animationen profitieren von vielen Leistungsvorteilen der Standardanimationsklassen.These custom animations gain many of the performance benefits of the standard animation classes.

Animationssystem für WPF-EigenschaftenWPF Property Animation System

Wenn Sie wissen, dass einige wichtige Konzepte des Zeitsteuerungssystems WPFWPF Animationen können einfacher zu verwenden sein.If you understand a few important concepts about the timing system, WPFWPF animations can be easier to use. Am wichtigsten ist, dass WPFWPF, Animieren von Objekten durch Anwenden von Animationen auf die einzelnen Eigenschaften.Most important is that, in WPFWPF, you animate objects by applying animation to their individual properties. Zum Beispiel um ein FrameworkElement zu vergrößern, animieren Sie dessen Width und Height Eigenschaften.For example, to make a framework element grow, you animate its Width and Height properties. Um ein Objekt auszublenden, animieren Sie dessen Opacity Eigenschaft.To make an object fade from view, you animate its Opacity property.

Damit eine Eigenschaft animierbar ist, müssen die folgenden drei Anforderungen erfüllt sein:For a property to have animation capabilities, it must meet the following three requirements:

  • Es muss sich um eine Abhängigkeitseigenschaft handeln.It must be a dependency property.

  • Er muss zu einer Klasse, die von erbt gehören DependencyObject und implementiert die IAnimatable Schnittstelle.It must belong to a class that inherits from DependencyObject and implements the IAnimatable interface.

  • Es muss ein kompatibler Animationstyp verfügbar sein.There must be a compatible animation type available. (Wenn WPFWPF ist nicht zur Verfügung stellt, können Sie Ihre eigenen erstellen.(If WPFWPF does not provide one, you can create your own. Finden Sie unter den Übersicht über benutzerdefinierte Animationen.)See the Custom Animations Overview.)

WPFWPF enthält viele Objekte mit IAnimatable Eigenschaften.contains many objects that have IAnimatable properties. Steuert, wie z. B. Button und TabControl, sowie Panel und Shape Objekte erben von DependencyObject.Controls such as Button and TabControl, and also Panel and Shape objects inherit from DependencyObject. Die meisten Eigenschaften sind Abhängigkeitseigenschaften.Most of their properties are dependency properties.

Animationen können fast überall verwendet werden, auch in Stil- und Steuerelementvorlagen.You can use animations almost anywhere, which includes in styles and control templates. 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.Animations do not have to be visual; you can animate objects that are not part of the user interface if they meet the criteria that are described in this section.

Beispiel: Ausblenden eines Elements undExample: Make an Element Fade In and Out of View

Dieses Beispiel zeigt, wie Sie mit einem WPFWPF Animation den Wert einer Abhängigkeitseigenschaft zu animieren.This example shows how to use a WPFWPF animation to animate the value of a dependency property. Verwendet eine DoubleAnimation, d.h. eine Art von Animation, die generiert Double Werten animiert die Opacity Eigenschaft eine Rectangle.It uses a DoubleAnimation, which is a type of animation that generates Double values, to animate the Opacity property of a Rectangle. Daher die Rectangle ein-und ausgeblendet wird.As a result, the Rectangle fades in and out of view.

Der erste Teil des Beispiels erstellt eine Rectangle Element.The first part of the example creates a Rectangle element. Die folgenden Schritte zeigen, wie eine Animation erstellt, und wenden Sie diese in des Rechtecks des Opacity Eigenschaft.The steps that follow show how to create an animation and apply it to the rectangle's Opacity property.

Das folgende Beispiel zeigt, wie Sie erstellen eine Rectangle Element in einem StackPanel in XAML.The following shows how to create a Rectangle element in a StackPanel in XAML.

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

Das folgende Beispiel zeigt, wie Sie erstellen eine Rectangle Element in einem StackPanel im Code.The following shows how to create a Rectangle element in a StackPanel in code.

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 DoubleAnimationPart 1: Create a DoubleAnimation

Ist eine Möglichkeit, ein Element ein-und auszublenden, animieren seiner Opacity Eigenschaft.One way to make an element fade in and out of view is to animate its Opacity property. Da die Opacity Eigenschaft ist vom Typ Double, benötigen Sie eine Animation, die double-Werte erzeugt.Because the Opacity property is of type Double, you need an animation that produces double values. Ein DoubleAnimation ist eine solche Animation.A DoubleAnimation is one such animation. Ein DoubleAnimation erstellt einen Übergang zwischen zwei double-Werten.A DoubleAnimation creates a transition between two double values. Um den Startwert anzugeben, legen Sie dessen From Eigenschaft.To specify its starting value, you set its From property. Um den Endwert anzugeben, legen Sie dessen To Eigenschaft.To specify its ending value, you set its To property.

  1. Durchlässigkeitswert 1.0 wird das Objekt vollständig deckend und Durchlässigkeitswert 0.0 wird es vollständig unsichtbar.An opacity value of 1.0 makes the object completely opaque, and an opacity value of 0.0 makes it completely invisible. Der Animation Übergang von 1.0 zu 0.0 Festlegen der From Eigenschaft 1.0 und die zugehörige To Eigenschaft, um 0.0.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 eine DoubleAnimation in XAML.The following shows how to create a DoubleAnimation in XAML.

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

    Das folgende Beispiel zeigt, wie Sie erstellen eine DoubleAnimation im Code.The following shows how to create a DoubleAnimation in code.

    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 angeben einer Duration.Next, you must specify a Duration. Die Duration einer Animation gibt an, wie lange es dauert, gehen vom Startwert zum Zielwert.The Duration of an animation specifies how long it takes to go from its starting value to its destination value. Das folgende Beispiel zeigt, wie Sie festlegen der Duration auf fünf Sekunden in XAML.The following shows how to set the Duration to five seconds in XAML.

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

    Das folgende Beispiel zeigt, wie Sie festlegen der Duration auf fünf Sekunden im Code.The following shows how to set the Duration to five seconds in code.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
    
  3. Der obige Code zeigt eine Animation, die von wechselt 1.0 zu 0.0, wodurch das Zielelement von vollständig deckend zu vollständig unsichtbar übergeht.The previous code showed an animation that transitions from 1.0 to 0.0, which causes the target element to fade from completely opaque to completely invisible. Das Element wieder eingeblendet, nachdem kann legen fest, um die AutoReverse -Eigenschaft der Animation zum true.To make the element fade back into view after it vanishes, set the AutoReverse property of the animation to true. Um die Animation endlos wiederholt wird, legen Sie dessen RepeatBehavior Eigenschaft Forever.To make the animation repeat indefinitely, set its RepeatBehavior property to Forever. Das folgende Beispiel zeigt, wie Sie festlegen der AutoReverse und RepeatBehavior Eigenschaften in XAML.The following shows how to set the AutoReverse and RepeatBehavior properties in XAML.

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

    Das folgende Beispiel zeigt, wie Sie festlegen der AutoReverse und RepeatBehavior Eigenschaften im Code.The following shows how to set the AutoReverse and RepeatBehavior properties in code.

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

Teil 2: Erstellen Sie ein StoryboardPart 2: Create a Storyboard

Zum Anwenden einer Animation auf ein Objekt, das Sie erstellen eine Storyboard und verwenden Sie die TargetName und TargetProperty angefügten Eigenschaften zum Angeben des Objekts und die zu animierende Eigenschaft.To apply an animation to an object, you create a Storyboard and use the TargetName and TargetProperty attached properties to specify the object and property to animate.

  1. Erstellen der Storyboard und fügen Sie die Animation als untergeordnetes Element hinzu.Create the Storyboard and add the animation as its child. Das folgende Beispiel zeigt, wie Sie erstellen die Storyboard in XAML.The following shows how to create the Storyboard in XAML.

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

    Zum Erstellen der Storyboard im Code deklariert eine Storyboard Variablen auf Klassenebene.To create the Storyboard in code, declare a Storyboard variable at the class level.

    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 untergeordnetes Element hinzu.Then initialize the Storyboard and add the animation as its child.

    myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myDoubleAnimation);
    
    myStoryboard = New Storyboard()
    myStoryboard.Children.Add(myDoubleAnimation)
    
  2. Die Storyboard wissen, wo die Animation angewendet wurde.The Storyboard has to know where to apply the animation. Verwenden der Storyboard.TargetName angefügte Eigenschaft, um die zu animierende Objekt anzugeben.Use the Storyboard.TargetName attached property to specify the object to animate. Das folgende Beispiel zeigt, wie Sie den Zielnamen der Festlegen der DoubleAnimation zu MyRectangle in XAML.The following shows how to set the target name of the DoubleAnimation to 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 zu MyRectangle im Code.The following shows how to set the target name of the DoubleAnimation to MyRectangle in code.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. Verwenden der TargetProperty angefügten Eigenschaft, um die zu animierende Eigenschaft anzugeben.Use the TargetProperty attached property to specify the property to animate. Das folgende Beispiel zeigt, wie die Animation konfiguriert ist Ziel der Opacity Eigenschaft der Rectangle in XAML.The following shows how the animation is configured to target the Opacity property of the Rectangle 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 Opacity Eigenschaft der Rectangle im Code.The following shows how the animation is configured to target the Opacity property of the Rectangle in code.

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

Weitere Informationen zu TargetProperty Syntax und weitere Beispiele finden Sie unter den Übersicht über Storyboards.For more information about TargetProperty syntax and for additional examples, see the Storyboards Overview.

Teil 3 (XAML): Ordnen Sie das Storyboard mit einem TriggerPart 3 (XAML): Associate the Storyboard with a Trigger

Die einfachste Möglichkeit zum Anwenden und Starten einer Storyboard in XAMLXAML ist die Verwendung ein Ereignistriggers.The easiest way to apply and start a Storyboard in XAMLXAML is to use an event trigger. In diesem Abschnitt wird gezeigt, wie zum Zuordnen der Storyboard mit einem Trigger in XAML.This section shows how to associate the Storyboard with a trigger in XAML.

  1. Erstellen Sie eine BeginStoryboard Objekt aus, und ordnen Sie ihm das Storyboard zu.Create a BeginStoryboard object and associate your storyboard with it. Ein BeginStoryboard ist eine Art von TriggerAction , die angewendet wird, und startet eine Storyboard.A BeginStoryboard is a type of TriggerAction that applies and starts a 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 auf seine Actions Auflistung.Create an EventTrigger and add the BeginStoryboard to its Actions collection. Legen Sie die RoutedEvent Eigenschaft der EventTrigger auf das Routingereignis, das Sie starten möchten die Storyboard.Set the RoutedEvent property of the EventTrigger to the routed event that you want to start the Storyboard. (Weitere Informationen zu Routingereignissen finden Sie unter den Übersicht über Routingereignisse.)(For more information about routed events, see the Routed Events Overview.)

    <!-- 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 auf die Triggers -Auflistung des Rechtecks.Add the EventTrigger to the Triggers collection of the Rectangle.

    <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): Ordnen Sie das Storyboard mit einem EreignishandlerPart 3 (Code): Associate the Storyboard with an Event Handler

Die einfachste Möglichkeit zum Anwenden und Starten einer Storyboard im Code ist die Verwendung ein ereignishandlers.The easiest way to apply and start a Storyboard in code is to use an event handler. In diesem Abschnitt wird gezeigt, wie zum Zuordnen der Storyboard mit einem Ereignishandler im Code.This section shows how to associate the Storyboard with an event handler in code.

  1. Registrieren Sie sich für die Loaded -Ereignis des Rechtecks.Register for the Loaded event of the rectangle.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. Deklarieren Sie den Ereignishandler.Declare the event handler. Verwenden Sie im Ereignishandler, der Begin Methode, um das Storyboard anzuwenden.In the event handler, use the Begin method to apply the storyboard.

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

Der folgende Code zeigt ein Rechteck erstellt wird, das in XAML ein-und ausgeblendet wird.The following shows how to create a rectangle that fades in and out of view in XAML.

<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.The following shows how to create a rectangle that fades in and out of view in code.

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

AnimationstypenAnimation Types

Da Animationen Eigenschaftswerte generieren, gibt es verschiedene Animationstypen für unterschiedliche Eigenschaftentypen.Because animations generate property values, different animation types exist for different property types. Zum Animieren einer Eigenschaft, die akzeptiert eine Double, z. B. die Width Eigenschaft eines Elements, verwenden Sie eine Animation, die erzeugt Double Werte.To animate a property that takes a Double, such as the Width property of an element, use an animation that produces Double values. Zum Animieren einer Eigenschaft, die akzeptiert eine Point, verwenden Sie eine Animation, die erzeugt Point Werte und So weiter.To animate a property that takes a Point, use an animation that produces Point values, and so on. Aufgrund der Anzahl der verschiedenen Eigenschaftentypen, es gibt mehrere Animationsklassen in die System.Windows.Media.Animation Namespace.Because of the number of different property types, there are several animation classes in the System.Windows.Media.Animation namespace. Glücklicherweise folgen sie einer strengen Benennungskonvention, die es erleichtert, sie voneinander zu unterscheiden:Fortunately, they follow a strict naming convention that makes it easy to differentiate between them:

  • <Typ> Animation<Type>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.Known as a "From/To/By" or "basic" animation, these animate between a starting and destination value, or by adding an offset value to its starting value.

    • Legen Sie die From-Eigenschaft der Animation fest, um einen Startwert anzugeben.To specify a starting value, set the From property of the animation.

    • Legen Sie die To-Eigenschaft der Animation fest, um einen Endwert anzugeben.To specify an ending value, set the To property of the animation.

    • Legen Sie die By-Eigenschaft der Animation fest, um einen Offsetwert anzugeben.To specify an offset value, set the By property of the animation.

    Die Beispiele in dieser Übersicht verwenden diese Animationen, da sie am einfachsten zu verwenden sind.The examples in this overview use these animations, because they are the simplest to use. From/To/By-Animationen werden in der Übersicht über die to--Animationen ausführlich beschrieben.From/To/By animations are described in detail in the From/To/By Animations Overview.

  • <Type>AnimationUsingKeyFrames<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.Key frame animations are more powerful than From/To/By animations because you can specify any number of target values and even control their interpolation method. Einige Typen können nur mit Keyframe-Animationen animiert werden.Some types can only be animated with key frame animations. Keyframe-Animationen ausführlich beschrieben werden die Übersicht über Keyframe Animationen.Key frame animations are described in detail in the Key-Frame Animations Overview.

  • <Type>AnimationUsingPath<Type>AnimationUsingPath

    Pfadanimationen ermöglichen Ihnen einen geometrischen Pfad zu verwenden, um animierte Werte zu erzeugen.Path animations enable you to use a geometric path in order to produce animated values.

  • <Type>AnimationBase<Type>AnimationBase

    Abstrakte Klasse, die animiert, wenn Sie sie implementieren eine < Typ> Wert.Abstract class that, when you implement it, animates a <Type> value. Diese Klasse dient als Basisklasse für < Typ> Animation und < Typ> AnimationUsingKeyFrames-Klassen.This class serves as the base class for <Type>Animation and <Type>AnimationUsingKeyFrames classes. Sie müssen nur dann direkt mit diesen Klassen arbeiten, wenn Sie eigene benutzerdefinierte Animationen erstellen möchten.You have to deal directly with these classes only if you want to create your own custom animations. Verwenden Sie andernfalls eine < Typ>-Animation oder KeyFrame<Typ> Animation.Otherwise, use a <Type>Animation or KeyFrame<Type>Animation.

In den meisten Fällen sollten Sie verwenden die < Typ> Animation-Klassen, z. B. DoubleAnimation und ColorAnimation.In most cases, you will want to use the <Type>Animation classes, such as DoubleAnimation and ColorAnimation.

Die folgende Tabelle zeigt mehrere allgemeine Animationstypen und einige Eigenschaften, mit denen sie verwendet werden.The following table shows several common animation types and some properties with which they are used.

EigenschaftentypProperty type Zugehörige Basisanimation (From/To/By)Corresponding basic (From/To/By) animation Zugehörige Keyframe-AnimationCorresponding key frame animation Zugehörige PfadanimationCorresponding Path Animation Beispiel für die VerwendungUsage example
Color ColorAnimation ColorAnimationUsingKeyFrames KeinerNone Animieren der Color von einem SolidColorBrush oder GradientStop.Animate the Color of a SolidColorBrush or a GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animieren der Width von einer DockPanel oder Height von eine Button.Animate the Width of a DockPanel or the Height of a Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animieren der Center position eine EllipseGeometry.Animate the Center position of an EllipseGeometry.
String KeinerNone StringAnimationUsingKeyFrames KeinerNone Animieren der Text von einer TextBlock oder Content von eine Button.Animate the Text of a TextBlock or the Content of a Button.

Animationen sind Timeline-KlassenAnimations Are Timelines

Alle Animationstypen erben von der Timeline Klasse; daher werden alle Animationen spezialisierte Typen von Zeitachsen.All the animation types inherit from the Timeline class; therefore, all animations are specialized types of timelines. Ein Timeline definiert einen Zeitabschnitt.A Timeline defines a segment of time. Sie können angeben, die Zeitsteuerungsverhalten einer Zeitachse: die Duration, wie oft sie wiederholt werden und sogar wie schnell die Zeit.You can specify the timing behaviors of a timeline: its Duration, how many times it is repeated, and even how fast time progresses for it.

Da eine Animation ist eine Timeline, es stellt auch einen Zeitabschnitt dar.Because an animation is a Timeline, it also represents a segment of time. Eine Animation auch Ausgabewerte berechnet, über die angegebenen Zeitabschnitt wechselt (oder Duration).An animation also calculates output values as it progresses through its specified segment of time (or Duration). Während die Animation durchlaufen oder „abgespielt“ wird, wird die ihr zugeordnete Eigenschaft aktualisiert.As the animation progresses, or "plays," it updates the property that it is associated with.

Drei häufig verwendete Zeitsteuerungseigenschaften sind Duration, AutoReverse, und RepeatBehavior.Three frequently used timing properties are Duration, AutoReverse, and RepeatBehavior.

Die Duration-EigenschaftThe Duration Property

Wie bereits erwähnt, stellt eine Zeitachse einen Zeitabschnitt dar.As previously mentioned, a timeline represents a segment of time. Die Länge dieses Abschnitts richtet sich nach der Duration der Zeitachse, die in der Regel mithilfe des Parameters eine TimeSpan Wert.The length of that segment is determined by the Duration of the timeline, which is usually specified by using a TimeSpan value. Wenn eine Zeitachse das Ende ihrer Dauer erreicht, hat sie eine Iteration abgeschlossen.When a timeline reaches the end of its duration, it has completed an iteration.

Eine Animation verwendet die Duration Eigenschaft, um den aktuellen Wert zu bestimmen.An animation uses its Duration property to determine its current value. Wenn Sie keinen angeben einer Duration Wert für eine Animation, Sekunde, die Standardeinstellung verwendet.If you do not specify a Duration value for an animation, it uses 1 second, which is the default.

Die folgende Syntax zeigt eine vereinfachte Version der Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) -Attributsyntax für die Duration Eigenschaft.The following syntax shows a simplified version of the Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) attribute syntax for the Duration property.

Stunden : Minuten : Sekundenhours : minutes : seconds

Die folgende Tabelle zeigt verschiedene Duration Einstellungen und die zugehörigen Werte.The following table shows several Duration settings and their resulting values.

EinstellungSetting ErgebniswertResulting value
0:0:5.50:0:5.5 5.5 Sekunden.5.5 seconds.
0:30:5.50:30:5.5 30 Minuten und 5,5 Sekunden.30 minutes and 5.5 seconds.
1:30:5.51:30:5.5 1 Stunde, 30 Minuten und 5,5 Sekunden.1 hour, 30 minutes, and 5.5 seconds.

Eine Möglichkeit zum Angeben einer Duration im Code ist die Verwendung der FromSeconds Methode zum Erstellen einer TimeSpan, deklariert dann eine neue Duration Struktur verwenden, die TimeSpan.One way to specify a Duration in code is to use the FromSeconds method to create a TimeSpan, then declare a new Duration structure using that TimeSpan.

Weitere Informationen zu Duration Werte und die vollständige Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) -Syntax finden Sie unter den Duration Struktur.For more information about Duration values and the complete Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) syntax, see the Duration structure.

AutoReverseAutoReverse

Die AutoReverse Eigenschaft gibt an, ob eine Zeitachse rückwärts durchlaufen wird, nachdem das Ende erreicht seiner Duration.The AutoReverse property specifies whether a timeline plays backward after it reaches the end of its Duration. Wenn Sie diese Animationseigenschaft auf true, eine Animation kehrt nach des Endes von erreichen der Duration, während der Wiedergabe vom Endwert zurück zum Startwert.If you set this animation property to true, an animation reverses after it reaches the end of its Duration, playing from its ending value back to its starting value. Diese Eigenschaft ist standardmäßig false.By default, this property is false.

RepeatBehaviorRepeatBehavior

Die RepeatBehavior Eigenschaft gibt an, wie oft eine Zeitachse durchlaufen wird.The RepeatBehavior property specifies how many times a timeline plays. In der Standardeinstellung haben Zeitachsen einen Iterationszähler von 1.0, d. h. sie eine Zeit und überhaupt nicht wiederholen.By default, timelines have an iteration count of 1.0, which means they play one time and do not repeat at all.

Weitere Informationen zu diesen und anderen Eigenschaften finden Sie unter den Übersicht über Zeitsteuerungsverhalten.For more information about these properties and others, see the Timing Behaviors Overview.

Anwenden einer Animation auf eine EigenschaftApplying an Animation to a Property

Die vorhergehenden Abschnitte beschreiben die verschiedenen Arten von Animationen und ihre Zeitsteuerungseigenschaften.The previous sections describe the different types of animations and their timing properties. In diesem Abschnitt wird gezeigt, wie Sie die Animation auf die zu animierende Eigenschaft anwenden.This section shows how to apply the animation to the property that you want to animate. Storyboard Objekte stellen eine Möglichkeit zum Anwenden von Animationen auf Eigenschaften.Storyboard objects provide one way to apply animations to properties. Ein Storyboard ist eine Containerzeitachse , die Zielinformationen für die darin enthaltenen Animationen bereitstellt.A Storyboard is a container timeline that provides targeting information for the animations it contains.

Zielobjekte und -EigenschaftenTargeting Objects and Properties

Die Storyboard -Klasse stellt die TargetName und TargetProperty angefügten Eigenschaften.The Storyboard class provides the TargetName and TargetProperty attached properties. Durch Festlegen dieser Eigenschaften wird der Animation mitgeteilt, was animiert werden soll.By setting these properties on an animation, you tell the animation what to animate. Bevor eine Animation jedoch auf ein Objekt angewendet werden kann, muss dem Objekt in der Regel ein Name gegeben werden.However, before an animation can target an object, the object must usually be given a name.

Zuweisen eines Namens zu einer FrameworkElement unterscheidet sich vom Zuweisen eines Namens zu einer Freezable Objekt.Assigning a name to a FrameworkElement differs from assigning a name to a Freezable object. Die meisten Steuerelemente und Bereiche sind Frameworkelemente; hingegen sind die meisten rein grafischen Objekte, z.B. Pinsel, Transformationen und Geometrien Freezable-Objekte.Most controls and panels are framework elements; however, most purely graphical objects, such as brushes, transforms, and geometries, are freezable objects. Wenn Sie nicht sicher sind, gibt an, ob ein Typ ist ein FrameworkElement oder Freezable, finden Sie in der Vererbungshierarchie Abschnitt der jeweiligen Referenzdokumentation.If you are not sure whether a type is a FrameworkElement or a Freezable, refer to the Inheritance Hierarchy section of its reference documentation.

  • Vornehmen einer FrameworkElement ein Animationsziel Sie benennen Sie sie durch Festlegen seiner Name Eigenschaft.To make a FrameworkElement an animation target, you give it a name by setting its Name property. Sie müssen auch verwenden, im Code die RegisterName Methode, um den Elementnamen mit der Seite registrieren, zu dem er gehört.In code, you must also use the RegisterName method to register the element name with the page to which it belongs.

  • Vornehmen einer Freezable -Objekt ein Animationsziel in XAMLXAML, Sie verwenden die X: Name Directive um ihm einen Namen zuzuweisen.To make a Freezable object an animation target in XAMLXAML, you use the x:Name Directive to assign it a name. Im Code verwenden Sie einfach die RegisterName Methode, um das Objekt mit der Seite zu registrieren, zu dem er gehört.In code, you just use the RegisterName method to register the object with the page to which it belongs.

Geben Sie ein Beispiel für das Benennen eines Elements in die folgenden Abschnitten XAMLXAML und Code.The sections that follow provide an example of naming an element in XAMLXAML and code. Ausführlichere Informationen zum Benennen und adressieren, finden Sie unter den Übersicht über Storyboards.For more detailed information about naming and targeting, see the Storyboards Overview.

Anwenden und Starten von StoryboardsApplying and Starting Storyboards

Zum Starten eines Storyboards XAMLXAML, ordnen sie einer EventTrigger.To start a storyboard in XAMLXAML, you associate it with an EventTrigger. Ein EventTrigger ist ein Objekt, das beschreibt, welche Aktionen auf, wenn ein bestimmtes Ereignis auftritt.An EventTrigger is an object that describes what actions to take when a specified event occurs. Eine dieser Aktionen sein kann eine BeginStoryboard Aktion, die Sie verwenden, um das Storyboard zu starten.One of those actions can be a BeginStoryboard action, which you use to start your storyboard. Ereignistrigger ähneln in ihrem Konzept Ereignishandlern, da sie angeben können, wie Ihre Anwendung auf ein bestimmtes Ereignis reagieren soll.Event triggers are similar in concept to event handlers because they enable you to specify how your application responds to a particular event. Im Gegensatz zum Ereignishandler, können Ereignistrigger vollständig beschrieben werden XAMLXAML; es ist kein weiterer Code erforderlich.Unlike event handlers, event triggers can be fully described in XAMLXAML; no other code is required.

Starten einer Storyboard im Code können Sie eine EventTrigger oder verwenden Sie die Begin -Methode der der Storyboard Klasse.To start a Storyboard in code, you can use an EventTrigger or use the Begin method of the Storyboard class.

Interaktives Steuern eines StoryboardsInteractively Control a Storyboard

Im vorherige Beispiel wurde gezeigt, wie zu einem Storyboard bei Auftreten eines Ereignisses.The previous example showed how to start a Storyboard when an event occurs. Sie können auch interaktiv steuern eine Storyboard nach dem Start: Sie können anhalten, fortsetzen, beenden, können Sie es auf seines Füllbereichs, suchen und Entfernen der Storyboard.You can also interactively control a Storyboard after it starts: you can pause, resume, stop, advance it to its fill period, seek, and remove the Storyboard. Weitere Informationen und ein Beispiel, das zeigt, wie Sie interaktiv steuern eine Storyboard, finden Sie unter den Übersicht über Storyboards.For more information and an example that shows how to interactively control a Storyboard, see the Storyboards Overview.

Was geschieht nach dem Ende einer Animation?What Happens After an Animation Ends?

Die FillBehavior Eigenschaft gibt an, wie eine Zeitachse verhält, wenn sie endet.The FillBehavior property specifies how a timeline behaves when it ends. Standardmäßig eine Zeitachse gestartet wird, Filling endet.By default, a timeline starts Filling when it ends. Eine Animation, die Filling behält ihren endgültigen Ausgabewert.An animation that is Filling holds its final output value.

Die DoubleAnimation im vorherigen Beispiel wird nicht beendet, da die RepeatBehavior -Eigenschaftensatz auf Forever.The DoubleAnimation in the previous example does not end because its RepeatBehavior property is set to Forever. Im folgenden Beispiel wird ein Rechteck mithilfe einer ähnlichen Animation animiert.The following example animates a rectangle by using a similar animation. Im Gegensatz zum vorherigen Beispiel ist die RepeatBehavior und AutoReverse -Eigenschaften dieser Animation bleiben die Standardwerte bei.Unlike the previous example, the RepeatBehavior and AutoReverse properties of this animation are left at their default values. Aus diesem Grund wechselt die Animation innerhalb von fünf Sekunden von 1 auf 0 und hält dann an.Therefore, the animation progresses from 1 to 0 over five seconds and then stops.

<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 die FillBehavior wurde nicht geändert werden, von seinem Standardwert, d.h. HoldEnd, behält die Animation den Endwert 0 (null), wenn sie endet.Because its FillBehavior was not changed from its default value, which is HoldEnd, the animation holds its final value, 0, when it ends. Aus diesem Grund die Opacity der Rechteck bleibt bei 0, nachdem die Animation endet.Therefore, the Opacity of the rectangle remains at 0 after the animation ends. Setzen Sie die Opacity des Rechtecks auf einen anderen Wert Code keine Auswirkung, haben wird angezeigt, da die Animation immer noch beeinträchtigt die Opacity Eigenschaft.If you set the Opacity of the rectangle to another value, your code appears to have no effect, because the animation is still affecting the Opacity property.

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.One way to regain control of an animated property in code is to use the BeginAnimation method and specify null for the AnimationTimeline parameter. Weitere Informationen und ein Beispiel finden Sie unter Festlegen einer Eigenschaft nach Animation mit einem Storyboard.For more information and an example, see Set a Property After Animating It with a Storyboard.

Beachten Sie, dass, obwohl das Festlegen eines Eigenschaftswerts, der hat eine Active oder Filling Animation scheinbar keine Auswirkung, die den Wert der Eigenschaft ändert.Note that, although setting a property value that has an Active or Filling animation appears to have no effect, the property value does change. Weitere Informationen finden Sie unter den Animation und zeitliche Steuerung Systemübersicht.For more information, see the Animation and Timing System Overview.

Datenbindung und Animieren von AnimationenData Binding and Animating Animations

Die meisten Animationseigenschaften können an Daten gebunden oder animiert sein; Sie können z. B. Animieren der Duration Eigenschaft eine DoubleAnimation.Most animation properties can be data bound or animated; for example, you can animate the Duration property of a DoubleAnimation. Aufgrund der Funktionsweise des Zeitsteuerungssystems verhalten sich datengebundene oder animierte Animationen jedoch nicht wie andere datengebundene oder animierte Objekte.However, because of the way the timing system works, data bound or animated animations do not behave like other data bound or animated objects. Um ihr Verhalten zu verstehen, sollten sie wissen, was es bedeutet, eine Animation auf eine Eigenschaft anzuwenden.To understand their behavior, it helps to understand what it means to apply an animation to a property.

Finden Sie im Beispiel im vorherigen Abschnitt wurde gezeigt, wie Sie animieren, die die Opacity eines Rechtecks.Refer to the example in the previous section that showed how to animate the Opacity of a rectangle. Wenn das Rechteck im vorherigen Beispiel geladen wird, wendet der Ereignistrigger das Storyboard.When the rectangle in the previous example is loaded, its event trigger applies the Storyboard. Das Zeitsteuerungssystem erstellt eine Kopie der Storyboard und seiner Animation.The timing system creates a copy of the Storyboard and its animation. Diese Kopien werden gesperrt (schreibgeschützt) und Clock Objekte daraus erstellt werden.These copies are frozen (made read-only) and Clock objects are created from them. Das eigentliche Animieren der Zieleigenschaften erfolgt durch diese Uhren.These clocks do the actual work of animating the targeted properties.

Das Zeitsteuerungssystem erstellt eine Uhr für die DoubleAnimation und wendet sie auf das Objekt und Eigenschaft, die angegeben wird die TargetName und TargetProperty von der DoubleAnimation.The timing system creates a clock for the DoubleAnimation and applies it to the object and property that is specified by the TargetName and TargetProperty of the DoubleAnimation. In diesem Fall gilt das Zeitsteuerungssystem die Uhr um die Opacity -Eigenschaft des Objekts mit dem Namen "MyRectangle" angewendet.In this case, the timing system applies the clock to the Opacity property of the object that is named "MyRectangle."

Obwohl für ebenfalls eine Uhr erstellt wird der Storyboard, die Uhr nicht auf alle Eigenschaften, die angewendet wird.Although a clock is also created for the Storyboard, the clock is not applied to any properties. Der Zweck besteht seine untergeordneten Uhr zu steuern, die für erstellt wird die DoubleAnimation.Its purpose is to control its child clock, the clock that is created for the DoubleAnimation.

Damit eine Animation Änderungen der Datenbindung und der Animation widerspiegelt, muss die Uhr erneut generiert werden.For an animation to reflect data binding or animation changes, its clock must be regenerated. Uhren werden nicht automatisch neu generiert.Clocks are not regenerated for you automatically. Um eine Animation Änderungen vornehmen möchten, wenden Sie erneut an das Storyboard mit einem BeginStoryboard oder Begin Methode.To make an animation reflect changes, reapply its storyboard by using a BeginStoryboard or the Begin method. Wenn Sie eine dieser beiden Methoden anwenden, startet die Animation neu.When you use either of these methods, the animation restarts. Im Code können Sie die Seek Methode, um im Storyboard zur vorherigen Position zurück.In code, you can use the Seek method to shift the storyboard back to its previous position.

Ein Beispiel für eine datengebundene Animation finden Sie unter Key Spline Animation Sample.For an example of a data bound animation, see Key Spline Animation Sample. Weitere Informationen zur Funktionsweise des Animations- und Zeitsteuerungssystem finden Sie unter Animation und zeitliche Steuerung Systemübersicht.For more information about how the animation and timing system works, see Animation and Timing System Overview.

Andere Möglichkeiten für AnimationenOther Ways to Animate

Die Beispiele in dieser Übersicht zeigen, wie Animationen mithilfe von Storyboards erstellt werden.The examples in this overview show how to animate by using storyboards. Im Code können Sie Animationen auf verschiedenste Weise erstellen.When you use code, you can animate in several other ways. Weitere Informationen finden Sie unter den Eigenschaft Techniken-Übersicht über Animationen.For more information, see the Property Animation Techniques Overview.

Beispiele für AnimationenAnimation Samples

In den folgenden Beispielen sehen Sie, wie Sie Animationen zu Ihren Anwendungen Hinzufügen können.The following samples can help you start adding animation to your applications.

TitelTitle BeschreibungDescription
Übersicht über das Animations- und ZeitsteuerungssystemAnimation and Timing System Overview Beschreibt, wie das Zeitsteuerungssystem verwendet die Timeline und Clock Klassen, die Ihnen beim Erstellen von Animationen ermöglichen.Describes how the timing system uses the Timeline and Clock classes, which allow you to create animations.
Tipps und Tricks zu AnimationenAnimation Tips and Tricks Hier sind hilfreiche Tipps zum Beheben von Problemen mit Animationfen, z.B. Leistungsprobleme aufgelistet.Lists helpful tips for solving issues with animations, such as performance.
Übersicht über benutzerdefinierte AnimationenCustom Animations Overview Beschreibt, wie das Animationssystem mit Keyframes, Animationsklassen oder Pro-Frame-Rückrufen erweitert werden kann.Describes how to extend the animation system with key frames, animation classes, or per-frame callbacks.
Übersicht über From/To/By-AnimationenFrom/To/By Animations Overview Beschreibt, wie Sie eine Animation erstellen, die zwischen zwei Werten wechselt.Describes how to create an animation that transitions between two values.
Übersicht über Keyframe-AnimationenKey-Frame Animations Overview Beschreibt das Erstellen einer Animation mit mehreren Zielwerten, einschließlich der Möglichkeit, die Interpolationsmethode zu steuern.Describes how to create an animation with multiple target values, including the ability to control the interpolation method.
BeschleunigungsfunktionenEasing Functions Erklärt, wie mathematische Formeln auf die Animationen angewendet werden, um ein realistisches Verhalten, z.B. Sprungeffekte zu erreichen.Explains how to apply mathematical formulas to your animations to get realistic behavior, such as bouncing.
Übersicht über PfadanimationenPath Animations Overview Beschreibt das Verschieben oder Drehen eines Objekts entlang eines komplexen Pfads.Describes how to move or rotate an object along a complex path.
Übersicht über die Verfahren zur Animation von EigenschaftenProperty Animation Techniques Overview Beschreibt Eigenschaftenanimationen mithilfe von Storyboards, lokalen Animationen, Uhren und Pro-Frame-Animationen.Describes property animations using storyboards, local animations, clocks, and per-frame animations.
Übersicht über StoryboardsStoryboards Overview Beschreibt, wie Storyboards mit mehreren Zeitachsen zum Erstellen komplexer Animationen verwendet werden.Describes how to use storyboards with multiple timelines to create complex animations.
Übersicht über ZeitsteuerungsverhaltenTiming Behaviors Overview Beschreibt die Timeline Typen und Eigenschaften, die in Animationen verwendeten.Describes the Timeline types and properties used in animations.
Übersicht über ZeitsteuerungsereignisseTiming Events Overview Beschreibt die Ereignisse, die auf die Timeline und Clock -Objekten zum Ausführen des Codes an Punkten auf der Zeitachse, z. B. starten, anhalten, fortsetzen, überspringen oder beenden.Describes the events available on the Timeline and Clock objects for executing code at points in the timeline, such as begin, pause, resume, skip, or stop.
Themen zu VorgehensweisenHow-to Topics Enthält Codebeispiele für die Verwendung von Animationen und Zeitachsen in der Anwendung.Contains code examples for using animations and timelines in your application.
Clocks How-to Topics (Themen zur Vorgehensweise zu Uhren)Clocks How-to Topics Enthält Codebeispiele für die Verwendung der Clock Objekt in der Anwendung.Contains code examples for using the Clock object in your application.
Key-Frame How-to Topics (Themen zur Vorgehensweise zu Keyframes)Key-Frame How-to Topics Enthält Codebeispiele für die Verwendung von Keyframe-Animationen in Ihrer Anwendung.Contains code examples for using key-frame animations in your application.
Path Animation How-to Topics (Themen zur Vorgehensweise zur Pfadanimation)Path Animation How-to Topics Enthält Codebeispiele für die Verwendung von Pfadanimationen in Ihrer Anwendung.Contains code examples for using path animations in your application.

ReferenzReference