Übersicht über AnimationenAnimation Overview

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) bietet einen leistungsstarken Satz an Grafiken und Layoutfeatures, die es 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 einen animierten Transformanwenden, können Sie dramatische Bildschirm Übergänge erstellen oder hilfreiche visuelle Hinweise bereitstellen.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 das WPFWPF Animations-und Zeit Steuerungssystem.This overview provides an introduction to the WPFWPF animation and timing system. Der Schwerpunkt liegt auf der Animation von WPFWPF Objekten 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 WPFWPFmussten Microsoft Windows-Entwickler eigene Zeit Steuerungssysteme erstellen und verwalten oder spezielle benutzerdefinierte Bibliotheken verwenden.Prior to WPFWPF, Microsoft Windows developers had to create and manage their own timing systems or use special custom libraries. WPFWPF enthält ein effizientes Zeit Steuerungssystem, das über verwalteten Code verfügbar gemacht wird und Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), das tief in das WPFWPF Framework integriert ist.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 ein paar wichtige Konzepte des Zeit Steuerungssystems verstanden haben, können WPFWPF Animationen leichter 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 Sie in WPFWPFObjekte animieren, indem Sie Animationen auf die einzelnen Eigenschaften anwenden.Most important is that, in WPFWPF, you animate objects by applying animation to their individual properties. Um z. b. 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. Damit ein Objekt aus der Ansicht ausgeblendet wird, 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.

  • Es muss einer Klasse angehören, die von DependencyObject erbt und die IAnimatable-Schnittstelle implementiert.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 keinen bereitstellt, können Sie eine eigene erstellen.(If WPFWPF does not provide one, you can create your own. Weitere Informationen finden Sie unter Übersicht über benutzerdefinierte Animationen.)See the Custom Animations Overview.)

WPFWPF enthält viele Objekte, die über IAnimatable Eigenschaften verfügen.contains many objects that have IAnimatable properties. Steuerelemente wie Button und TabControlsowie 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: Ein- und Ausblenden eines ElementsExample: Make an Element Fade In and Out of View

In diesem Beispiel wird gezeigt, wie eine WPFWPF Animation verwendet wird, um den Wert einer Abhängigkeits Eigenschaft zu animieren.This example shows how to use a WPFWPF animation to animate the value of a dependency property. Dabei wird eine DoubleAnimationverwendet, bei der es sich um eine Art von Animation handelt, die Double Werte generiert, um die Opacity-Eigenschaft einer Rectanglezu animieren.It uses a DoubleAnimation, which is a type of animation that generates Double values, to animate the Opacity property of a Rectangle. Folglich werden die Rectangle in der Ansicht ausgeblendet.As a result, the Rectangle fades in and out of view.

Im ersten Teil des Beispiels wird ein Rectangle-Element erstellt.The first part of the example creates a Rectangle element. In den folgenden Schritten wird gezeigt, wie eine Animation erstellt und auf die Opacity Eigenschaft des Rechtecks angewendet wird.The steps that follow show how to create an animation and apply it to the rectangle's Opacity property.

Im folgenden Beispiel wird gezeigt, wie ein Rectangle-Element in einer StackPanel in XAML erstellt wird.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>

Im folgenden wird gezeigt, wie ein Rectangle-Element in einer StackPanel im Code erstellt wird.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

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

  1. Bei einem Deckkraft Wert von 1.0 wird das Objekt vollständig nicht transparent, und ein Deckkraft Wert von 0.0 macht ihn 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. Damit der Animations Übergang von 1.0 zu 0.0 wird, legen Sie dessen Eigenschaft From auf 1.0 und die To-Eigenschaft auf 0.0fest.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. Im folgenden wird gezeigt, wie ein DoubleAnimation in XAML erstellt wird.The following shows how to create a DoubleAnimation in XAML.

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

    Im folgenden wird gezeigt, wie Sie eine DoubleAnimation im Code erstellen.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 einen Durationangeben.Next, you must specify a Duration. Der Duration einer Animation gibt an, wie lange es dauert, bis der Startwert in seinen Zielwert wechselt.The Duration of an animation specifies how long it takes to go from its starting value to its destination value. Im folgenden wird gezeigt, wie die Duration auf fünf Sekunden in XAML festgelegt wird.The following shows how to set the Duration to five seconds in XAML.

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

    Im folgenden wird gezeigt, wie die Duration auf fünf Sekunden im Code festgelegt wird.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 vorherige Code hat eine Animation gezeigt, die von 1.0 zu 0.0übergeht, was bewirkt, dass das Ziel Element von vollständig undurchsichtigem in vollständig unsichtbar wird.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. Legen Sie die AutoReverse-Eigenschaft der Animation auf truefest, damit das Element nach dem verschwinden wieder ausgeblendet wird.To make the element fade back into view after it vanishes, set the AutoReverse property of the animation to true. Legen Sie die RepeatBehavior-Eigenschaft auf Foreverfest, damit die Animation unbegrenzt wiederholt wird.To make the animation repeat indefinitely, set its RepeatBehavior property to Forever. Das folgende Beispiel zeigt, wie Sie die Eigenschaften AutoReverse und RepeatBehavior in XAML festlegen.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"/>
    

    Im folgenden wird gezeigt, wie Sie die Eigenschaften AutoReverse und RepeatBehavior im Code festlegen.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 eines StoryboardsPart 2: Create a Storyboard

Wenn Sie eine Animation auf ein Objekt anwenden möchten, erstellen Sie eine Storyboard und verwenden die TargetName und TargetProperty angefügten Eigenschaften, um das zu animierende Objekt und die Eigenschaft anzugeben.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 Sie die Storyboard, und fügen Sie die Animation als untergeordnetes Element hinzu.Create the Storyboard and add the animation as its child. Im folgenden wird gezeigt, wie die Storyboard in XAML erstellt wird.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>
    

    Um die Storyboard im Code zu erstellen, deklarieren Sie eine Storyboard Variable 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. Der Storyboard muss wissen, wo die Animation angewendet werden soll.The Storyboard has to know where to apply the animation. Verwenden Sie die Storyboard.TargetName angefügte-Eigenschaft, um das zu animierende Objekt anzugeben.Use the Storyboard.TargetName attached property to specify the object to animate. Im folgenden wird gezeigt, wie Sie den Zielnamen der DoubleAnimation auf MyRectangle in XAML festlegen.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>
    

    Im folgenden wird gezeigt, wie der Zielname der DoubleAnimation auf MyRectangle im Code festgelegt wird.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 Sie die TargetProperty angefügte-Eigenschaft, um die zu animierende Eigenschaft anzugeben.Use the TargetProperty attached property to specify the property to animate. Im folgenden wird gezeigt, wie die Animation so konfiguriert wird, dass Sie die Opacity-Eigenschaft des Rectangle in XAML als Ziel hat.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>
    

    Im folgenden Beispiel wird gezeigt, wie die Animation so konfiguriert wird, dass Sie die Opacity-Eigenschaft der Rectangle im Code als Ziel hat.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 zur TargetProperty Syntax und weitere Beispiele finden Sie in der Übersicht über Storyboards.For more information about TargetProperty syntax and for additional examples, see the Storyboards Overview.

Teil 3 (XAML): Zuordnen des Storyboards zu einem TriggerPart 3 (XAML): Associate the Storyboard with a Trigger

Die einfachste Möglichkeit, eine Storyboard in XAMLXAML anzuwenden und zu starten, ist die Verwendung eines Ereignis Auslösers.The easiest way to apply and start a Storyboard in XAMLXAML is to use an event trigger. In diesem Abschnitt wird gezeigt, wie Sie die Storyboard einem-in XAML-Code zuordnen.This section shows how to associate the Storyboard with a trigger in XAML.

  1. Erstellen Sie ein BeginStoryboard Objekt, und ordnen Sie es dem Storyboard zu.Create a BeginStoryboard object and associate your storyboard with it. Ein BeginStoryboard ist ein TriggerAction, der einen Storyboardanwendet und startet.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 Sie eine EventTrigger, und fügen Sie die BeginStoryboard der Actions Auflistung hinzu.Create an EventTrigger and add the BeginStoryboard to its Actions collection. Legen Sie die RoutedEvent-Eigenschaft des EventTrigger auf das-Routing Ereignis fest, für das der Storyboardgestartet werden soll.Set the RoutedEvent property of the EventTrigger to the routed event that you want to start the Storyboard. (Weitere Informationen zu Routing Ereignissen finden Sie unter Übersicht über Routing Ereignisse.)(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. Fügen Sie die EventTrigger der Triggers-Auflistung des Rechtecks hinzu.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): Zuordnen des Storyboards zu einem EreignishandlerPart 3 (Code): Associate the Storyboard with an Event Handler

Die einfachste Möglichkeit, eine Storyboard im Code anzuwenden und zu starten, ist die Verwendung eines Ereignis Handlers.The easiest way to apply and start a Storyboard in code is to use an event handler. In diesem Abschnitt wird gezeigt, wie Sie die Storyboard einem Ereignishandler im Code zuordnen.This section shows how to associate the Storyboard with an event handler in code.

  1. Registrieren Sie sich für das 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 die 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

Das folgende Beispiel zeigt, wie 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. Verwenden Sie zum Animieren einer Eigenschaft, die eine Doubleannimmt, wie z. b. die Width-Eigenschaft eines Elements, eine Animation, die Double Werte erzeugt.To animate a property that takes a Double, such as the Width property of an element, use an animation that produces Double values. Verwenden Sie zum Animieren einer Eigenschaft, die einen Pointannimmt, eine Animation, die Point Werte erzeugt, usw.To animate a property that takes a Point, use an animation that produces Point values, and so on. Aufgrund der Anzahl unterschiedlicher Eigenschafts Typen gibt es mehrere Animations Klassen im 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:

  • <Type>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 from/to/by-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 werden in der Übersicht über Keyframe-Animationenausführlich beschrieben.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 einen <Typ>-Wert animiert, wenn Sie implementiert wird.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 empfiehlt es sich, den <- Typ> Animations Klassen wie DoubleAnimation und ColorAnimationzu verwenden.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.

EigenschaftstypProperty 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 VerwendungsbeispielUsage example
Color ColorAnimation ColorAnimationUsingKeyFrames KeineNone Animieren des Color einer SolidColorBrush oder eines GradientStop.Animate the Color of a SolidColorBrush or a GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animieren Sie den Width einer DockPanel oder die Height einer Button.Animate the Width of a DockPanel or the Height of a Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animieren der Center Position eines EllipseGeometry.Animate the Center position of an EllipseGeometry.
String KeineNone StringAnimationUsingKeyFrames KeineNone Animieren Sie den Text einer TextBlock oder die Content einer Button.Animate the Text of a TextBlock or the Content of a Button.

Animationen sind Timeline-KlassenAnimations Are Timelines

Alle Animations Typen erben von der Timeline-Klasse. Daher sind 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 der einen Zeitabschnitt definiert.A Timeline defines a segment of time. Sie können das Zeit Steuerungs Verhalten einer Zeitachse angeben: die Duration, die Häufigkeit, mit der es wiederholt wird, und sogar die Geschwindigkeit der 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 eine Timelineist, stellt Sie auch einen Zeitabschnitt dar.Because an animation is a Timeline, it also represents a segment of time. Eine Animation berechnet auch Ausgabewerte, während Sie das angegebene Zeitsegment (oder Duration) durchläuft.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 Zeit Steuerungseigenschaften sind Duration, AutoReverseund 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 Segments wird durch den Duration der Zeitachse bestimmt, der in der Regel mit einem TimeSpan Wert angegeben wird.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 Ihren aktuellen Wert zu bestimmen.An animation uses its Duration property to determine its current value. Wenn Sie für eine Animation keinen Duration Wert angeben, wird eine Sekunde verwendet. Dies ist die Standardeinstellung.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)-Attribut Syntax 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

In der folgenden Tabelle werden mehrere Duration Einstellungen und deren resultierende Werte angezeigt.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, eine Duration im Code anzugeben, besteht darin, die FromSeconds-Methode zu verwenden, um eine TimeSpanzu erstellen, und dann eine neue Duration Struktur mithilfe dieses TimeSpanzu deklarieren.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 über Duration Werte und die gesamte Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)-Syntax finden Sie in der 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 abgespielt wird, nachdem Sie das Ende der Durationerreicht hat.The AutoReverse property specifies whether a timeline plays backward after it reaches the end of its Duration. Wenn Sie diese Animations Eigenschaft auf truefestlegen, kehrt eine Animation wieder her, nachdem Sie das Ende der Durationerreicht hat, wobei der Endwert wieder auf den Startwert zurückgesetzt wird.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. Standardmäßig ist diese Eigenschaft false.By default, this property is false.

RepeatBehaviorRepeatBehavior

Die RepeatBehavior-Eigenschaft gibt an, wie oft eine Zeitachse abgespielt wird.The RepeatBehavior property specifies how many times a timeline plays. Standardmäßig haben Zeitachsen eine Iterations Anzahl von 1.0. Dies bedeutet, dass Sie einmal abgespielt werden und nicht wiederholt werden.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 Eigenschaften und anderen Eigenschaften finden Sie unter Übersicht über Zeit Steuerungs Verhalten.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 bieten eine Möglichkeit, Animationen auf Eigenschaften anzuwenden.Storyboard objects provide one way to apply animations to properties. Eine Storyboard ist eine Container Zeitachse , die Ziel Informationen 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 die TargetProperty angefügten Eigenschaften bereit.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.

Das Zuweisen eines Namens zu einem FrameworkElement unterscheidet sich vom Zuweisen eines Namens zu einem 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, ob ein Typ ein FrameworkElement oder ein Freezableist, lesen Sie den Abschnitt Vererbungs Hierarchie in der zugehörigen Referenz Dokumentation.If you are not sure whether a type is a FrameworkElement or a Freezable, refer to the Inheritance Hierarchy section of its reference documentation.

  • Wenn Sie einen FrameworkElement einem Animations Ziel erstellen möchten, geben Sie ihm einen Namen, indem Sie dessen Name-Eigenschaft festlegen.To make a FrameworkElement an animation target, you give it a name by setting its Name property. Im Code müssen Sie auch die RegisterName-Methode verwenden, um den Elementnamen mit der Seite zu registrieren, zu der er gehört.In code, you must also use the RegisterName method to register the element name with the page to which it belongs.

  • Wenn Sie ein Freezable Objekt in XAMLXAMLals Animations Ziel festlegen möchten, verwenden Sie die x:Name-Direktive , 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 bei der Seite zu registrieren, zu der es gehört.In code, you just use the RegisterName method to register the object with the page to which it belongs.

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

Anwenden und Starten von StoryboardsApplying and Starting Storyboards

Um ein Storyboard in XAMLXAMLzu starten, verknüpfen Sie es mit einem EventTrigger.To start a storyboard in XAMLXAML, you associate it with an EventTrigger. Ein EventTrigger ist ein Objekt, das beschreibt, welche Aktionen ausgeführt werden sollen, wenn ein bestimmtes Ereignis eintritt.An EventTrigger is an object that describes what actions to take when a specified event occurs. Eine dieser Aktionen kann eine BeginStoryboard Aktion sein, 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 zu Ereignis Handlern können Ereignis Trigger vollständig in XAMLXAMLbeschrieben werden. Es ist kein weiterer Code erforderlich.Unlike event handlers, event triggers can be fully described in XAMLXAML; no other code is required.

Um eine Storyboard im Code zu starten, können Sie eine EventTrigger verwenden oder die Begin-Methode der Storyboard-Klasse verwenden.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 vorherigen Beispiel wurde gezeigt, wie ein Storyboard gestartet wird, wenn ein Ereignis auftritt.The previous example showed how to start a Storyboard when an event occurs. Sie können eine Storyboard auch interaktiv steuern, nachdem Sie gestartet wurde: Sie können die Storyboardanhalten, fortsetzen, anhalten, Sie in den Füllzeitraum verschieben, suchen und entfernen.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 eine Storyboardinteraktiv gesteuert werden kann, finden Sie in der Ü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 sich eine Zeitachse beim Ende verhält.The FillBehavior property specifies how a timeline behaves when it ends. Standardmäßig beginnt eine Zeitachse Filling, wenn Sie endet.By default, a timeline starts Filling when it ends. Eine Animation, die Filling ist, enthält ihren endgültigen Ausgabewert.An animation that is Filling holds its final output value.

Die DoubleAnimation im vorherigen Beispiel endet nicht, da die RepeatBehavior-Eigenschaft auf Foreverfestgelegt ist.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 werden die RepeatBehavior-und AutoReverse Eigenschaften dieser Animation mit ihren Standardwerten belassen.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 der zugehörige FillBehavior nicht von seinem Standardwert geändert wurde (HoldEnd), behält die Animation den endgültigen Wert 0, 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. Daher bleibt die Opacity des Rechtecks nach Ende der Animation bei 0.Therefore, the Opacity of the rectangle remains at 0 after the animation ends. Wenn Sie die Opacity des Rechtecks auf einen anderen Wert festlegen, scheint der Code keine Auswirkung zu haben, da die Animation weiterhin die Opacity Eigenschaft beeinflusst.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, eine animierte Eigenschaft im Code wieder zu steuern, besteht darin, die BeginAnimation-Methode zu verwenden und NULL für den AnimationTimeline-Parameter anzugeben.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 dem Animieren mit einem Storyboard.For more information and an example, see Set a Property After Animating It with a Storyboard.

Beachten Sie Folgendes: Obwohl das Festlegen eines Eigenschafts Werts, der über eine Active-oder Filling Animation verfügt, keine Auswirkung hat, ändert sich der Eigenschafts Wert.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 Übersicht über das Animations-und Zeit Steuerungssystem.For more information, see the Animation and Timing System Overview.

Datenbindung und Animieren von AnimationenData Binding and Animating Animations

Die meisten Animations Eigenschaften können Daten gebunden oder animiert sein. Beispielsweise können Sie die Duration-Eigenschaft einer DoubleAnimationanimieren.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.

Lesen Sie das Beispiel im vorherigen Abschnitt, in dem gezeigt wurde, wie die Opacity eines Rechtecks animiert werden.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 wurde, wendet der Ereignis--Auslösung den Storyboardan.When the rectangle in the previous example is loaded, its event trigger applies the Storyboard. Das Zeit Steuerungssystem erstellt eine Kopie der Storyboard und der zugehörigen Animation.The timing system creates a copy of the Storyboard and its animation. Diese Kopien sind fixiert (schreibgeschützt) und Clock Objekte 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 Zeit Steuerungssystem erstellt eine Uhr für die DoubleAnimation und wendet Sie auf das Objekt und die Eigenschaft an, die durch die TargetName und TargetProperty der DoubleAnimationangegeben werden.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 wendet das Zeit Steuerungssystem die Uhr auf die Opacity-Eigenschaft des Objekts mit dem Namen "myrechteck" an.In this case, the timing system applies the clock to the Opacity property of the object that is named "MyRectangle."

Obwohl eine Uhr auch für die Storyboarderstellt wird, wird die Uhr nicht auf Eigenschaften angewendet.Although a clock is also created for the Storyboard, the clock is not applied to any properties. Der Zweck besteht darin, die untergeordnete Uhr zu steuern, die Uhr, die für die DoubleAnimationerstellt wird.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 widerzuspiegeln, wenden Sie das Storyboard erneut an, indem Sie eine BeginStoryboard oder die Begin-Methode verwenden.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 verwenden, um das Storyboard zurück zur vorherigen Position zu verschieben.In code, you can use the Seek method to shift the storyboard back to its previous position.

Ein Beispiel für eine Daten gebundene Animation finden Sie unter Beispiel für eine KeySpline-Animation.For an example of a data bound animation, see Key Spline Animation Sample. Weitere Informationen zur Funktionsweise des Animations-und Zeit Steuerungssystems finden Sie unter Übersicht über das Animations-und Zeit Steuerungssystem.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 in der Übersicht über die Eigenschaften Animationstechniken.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 Zeit Steuerungssystem die Klassen Timeline und Clock verwendet, mit denen Sie Animationen erstellen können.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 verwendet werden.Describes the Timeline types and properties used in animations.
Übersicht über ZeitsteuerungsereignisseTiming Events Overview Beschreibt die Ereignisse, die auf dem Timeline und Clock Objekten zum Ausführen von Code an Punkten in der Zeitachse verfügbar sind, wie z. b. Begin, Pause, Resume, Skip oder Break.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.
How-to Topics (Themen zur Vorgehensweise)How-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 des Clock-Objekts 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.
Gewusst-wie-Themen zur PfadanimationPath 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.

VerweisReference