Общие сведения об эффектах анимацииAnimation Overview

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) предоставляет мощный набор функций для работы с графикой и макетом, позволяющий создавать привлекательные пользовательские интерфейсы и привлекательные документы.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 can make an attractive user interface even more spectacular and usable. Просто анимировать цвет фона или применить анимированный Transform, вы можете создавать значительные переходы экрана или предоставлять полезные визуальные подсказки.By just animating a background color or applying an animated Transform, you can create dramatic screen transitions or provide helpful visual cues.

В этом обзоре содержатся общие сведения о WPFWPF анимации и системе управления временем.This overview provides an introduction to the WPFWPF animation and timing system. Он посвящен анимации WPFWPF объектов с помощью раскадровок.It focuses on the animation of WPFWPF objects by using storyboards.

Введение в анимациюIntroducing Animations

Анимация — это имитация изменений, которая обеспечивается быстрым показом серии слегка отличающихся друг от друга изображений.Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. Мозг человека воспринимает набор изображений как одну непрерывно изменяющуюся картинку.The brain perceives the group of images as a single changing scene. В фильме эта имитация создается за счет применения камер, записывающих множество фотографий (кадров) в секунду.In film, this illusion is created by using cameras that record many photographs, or frames, each second. При воспроизведении кадров проектором зрители видят движущееся изображение.When the frames are played back by a projector, the audience sees a moving picture.

Анимация на компьютере выполняется по аналогичному принципу.Animation on a computer is similar. Например, программа, в которой реализуется исчезновение прямоугольника, может работать следующим образом.For example, a program that makes a drawing of a rectangle fade out of view might work as follows.

  • В программе создается таймер.The program creates a timer.

  • Через заданные временные интервалы проверяется значение таймера для определения истекшего времени.The program checks the timer at set intervals to see how much time has elapsed.

  • При каждой проверке значения таймера вычисляется текущее значение непрозрачности для прямоугольника в зависимости от прошедшего времени.Each time the program checks the timer, it computes the current opacity value for the rectangle based on how much time has elapsed.

  • Затем программа обновляет прямоугольник с использованием нового значения и перерисовывает его.The program then updates the rectangle with the new value and redraws it.

Прежде чем WPFWPF, разработчикам Microsoft Windows пришлось создавать собственные системы управления временем и управлять ими, а также использовать специальные пользовательские библиотеки.Prior to WPFWPF, Microsoft Windows developers had to create and manage their own timing systems or use special custom libraries. WPFWPF содержит эффективную систему управления временем, доступную через управляемый код и Язык XAMLExtensible Application Markup Language (XAML) и тесно интегрированную в WPFWPFную платформу.includes an efficient timing system that is exposed through managed code and Язык XAMLExtensible Application Markup Language (XAML) and that is deeply integrated into the WPFWPF framework. Анимация WPFWPF упрощает анимацию элементов управления и других графических объектов.WPFWPF animation makes it easy to animate controls and other graphical objects.

В WPFWPF эффективно осуществляются все внутренние процессы управления системой времени и перерисовки экрана.WPFWPF handles all the behind-the-scenes work of managing a timing system and redrawing the screen efficiently. Предоставляются классы контроля времени, позволяющие сосредоточиться на создаваемых эффектах, а не на механике их реализации.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 также упрощает создание собственной анимации, предоставляя доступ к базовым классам анимации, из которых пользовательские классы могут наследовать средства создания пользовательской анимации.also makes it easy to create your own animations by exposing animation base classes from which your classes can inherit, to produce customized animations. По сравнению со стандартными пользовательские классы анимации обеспечивают большое преимущество в производительности.These custom animations gain many of the performance benefits of the standard animation classes.

Система анимации свойств WPFWPF Property Animation System

Если вы понимаете несколько важных концепций системы управления временем, удобнее использовать WPFWPF анимации.If you understand a few important concepts about the timing system, WPFWPF animations can be easier to use. Самое важное заключается в том, что в WPFWPFанимация объектов осуществляется путем применения анимации к отдельным свойствам.Most important is that, in WPFWPF, you animate objects by applying animation to their individual properties. Например, чтобы увеличить элемент платформы, можно анимировать его свойства Width и Height.For example, to make a framework element grow, you animate its Width and Height properties. Чтобы сделать объект эффектным от представления, можно анимировать его свойство Opacity.To make an object fade from view, you animate its Opacity property.

Свойство, поддерживающее анимацию, должно удовлетворять следующим трем требованиям.For a property to have animation capabilities, it must meet the following three requirements:

  • Свойство является свойством зависимостей.It must be a dependency property.

  • Он должен принадлежать классу, который наследуется от DependencyObject и реализует интерфейс IAnimatable.It must belong to a class that inherits from DependencyObject and implements the IAnimatable interface.

  • Доступен совместимый тип анимации.There must be a compatible animation type available. (Если WPFWPF не предоставляет его, можно создать собственный.(If WPFWPF does not provide one, you can create your own. См. раздел Общие сведения о пользовательской анимации.)See the Custom Animations Overview.)

WPFWPF содержит множество объектов, которые имеют свойства IAnimatable.contains many objects that have IAnimatable properties. Такие элементы управления, как Button и TabControl, а также Panel и Shape объекты наследуют от DependencyObject.Controls such as Button and TabControl, and also Panel and Shape objects inherit from DependencyObject. Большинство их свойств являются свойствами зависимостей.Most of their properties are dependency properties.

Анимацию можно использовать практически везде, где используются стили и шаблоны элементов управления.You can use animations almost anywhere, which includes in styles and control templates. Анимация не обязательно должна быть визуальной; можно анимировать и объекты, не являющиеся частью пользовательского интерфейса, если они соответствуют описанным в этом разделе условиям.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.

Пример. Реализация исчезновения и появления элементаExample: Make an Element Fade In and Out of View

В этом примере показано, как использовать анимацию WPFWPF для анимации значения свойства зависимостей.This example shows how to use a WPFWPF animation to animate the value of a dependency property. Он использует DoubleAnimation, который является типом анимации, создающей Double значения, для анимации свойства Opacity Rectangle.It uses a DoubleAnimation, which is a type of animation that generates Double values, to animate the Opacity property of a Rectangle. В результате Rectangle исчезает и выходит из представления.As a result, the Rectangle fades in and out of view.

В первой части примера создается элемент Rectangle.The first part of the example creates a Rectangle element. Ниже показано, как создать анимацию и применить ее к свойству Opacity прямоугольника.The steps that follow show how to create an animation and apply it to the rectangle's Opacity property.

Ниже показано, как создать элемент Rectangle в StackPanel в 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>

Ниже показано, как создать элемент Rectangle в StackPanel в коде.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

Часть 1. Создание объекта DoubleAnimationPart 1: Create a DoubleAnimation

Одним из способов сделать элемент недоступным для просмотра является анимация его свойства Opacity.One way to make an element fade in and out of view is to animate its Opacity property. Так как свойство Opacity имеет тип Double, требуется анимация, создающая значения типа Double.Because the Opacity property is of type Double, you need an animation that produces double values. Одной из таких анимаций является DoubleAnimation.A DoubleAnimation is one such animation. DoubleAnimation создает переход между двумя значениями типа Double.A DoubleAnimation creates a transition between two double values. Чтобы указать его начальное значение, необходимо задать свойство From.To specify its starting value, you set its From property. Чтобы указать конечное значение, необходимо задать свойство To.To specify its ending value, you set its To property.

  1. Значение непрозрачности 1.0 делает объект полностью непрозрачным, а значение непрозрачности 0.0 делает его полностью невидимым.An opacity value of 1.0 makes the object completely opaque, and an opacity value of 0.0 makes it completely invisible. Чтобы переход анимации с 1.0 на 0.0 вы установили для свойства From значение 1.0, а для свойства To — значение 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. Ниже показано, как создать DoubleAnimation в XAML.The following shows how to create a DoubleAnimation in XAML.

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

    Ниже показано, как создать DoubleAnimation в коде.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. Далее необходимо указать Duration.Next, you must specify a Duration. Duration анимации указывает время перехода от начального значения к целевому значению.The Duration of an animation specifies how long it takes to go from its starting value to its destination value. Ниже показано, как задать для Duration значение 5 секунд в 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" />
    

    Ниже показано, как установить Duration в течение пяти секунд в коде.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. Предыдущий код показал анимацию, которая переходит с 1.0 на 0.0, что приводит к исчезновению целевого элемента от полностью непрозрачного до полного невидимого.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. Чтобы вернуть элемент в представление после исчезновения, установите для свойства AutoReverse анимации значение true.To make the element fade back into view after it vanishes, set the AutoReverse property of the animation to true. Чтобы сделать анимацию неопределенной, установите для свойства RepeatBehavior значение Forever.To make the animation repeat indefinitely, set its RepeatBehavior property to Forever. Ниже показано, как задать свойства AutoReverse и RepeatBehavior в 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"/>
    

    Ниже показано, как задать свойства AutoReverse и RepeatBehavior в коде.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
    

Часть 2. Создание раскадровкиPart 2: Create a Storyboard

Чтобы применить анимацию к объекту, создайте Storyboard и используйте присоединенные свойства TargetName и TargetProperty, чтобы указать объект и свойство для анимации.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. Создайте Storyboard и добавьте анимацию в качестве дочерней.Create the Storyboard and add the animation as its child. Ниже показано, как создать Storyboard в 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>
    

    Чтобы создать Storyboard в коде, объявите переменную Storyboard на уровне класса.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
    

    Затем инициализируйте Storyboard и добавьте анимацию в качестве дочернего элемента.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. Storyboard необходимо указать, куда применять анимацию.The Storyboard has to know where to apply the animation. Используйте присоединенное свойство Storyboard.TargetName, чтобы указать объект для анимации.Use the Storyboard.TargetName attached property to specify the object to animate. Ниже показано, как задать целевое имя DoubleAnimation для MyRectangle в 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>
    

    Ниже показано, как задать целевое имя DoubleAnimation для MyRectangle в коде.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. Используйте присоединенное свойство TargetProperty, чтобы указать свойство для анимации.Use the TargetProperty attached property to specify the property to animate. Ниже показано, как настроить анимацию для свойства Opacity Rectangle в 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>
    

    Ниже показано, как настроить анимацию для свойства Opacity Rectangle в коде.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))
    

Дополнительные сведения о синтаксисе TargetProperty и дополнительные примеры см. в разделе Общие сведения о раскадровках.For more information about TargetProperty syntax and for additional examples, see the Storyboards Overview.

Часть 3 (XAML). Связывание раскадровки с триггеромPart 3 (XAML): Associate the Storyboard with a Trigger

Самый простой способ применить и запустить Storyboard в XAMLXAML — использовать триггер события.The easiest way to apply and start a Storyboard in XAMLXAML is to use an event trigger. В этом разделе показано, как связать Storyboard с триггером в XAML.This section shows how to associate the Storyboard with a trigger in XAML.

  1. Создайте объект BeginStoryboard и свяжите с ним раскадровку.Create a BeginStoryboard object and associate your storyboard with it. BeginStoryboard — это тип TriggerAction, который применяет и запускает 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. Создайте EventTrigger и добавьте BeginStoryboard в коллекцию Actions.Create an EventTrigger and add the BeginStoryboard to its Actions collection. Задайте для свойства RoutedEvent EventTrigger перенаправленное событие, которое необходимо запустить Storyboard.Set the RoutedEvent property of the EventTrigger to the routed event that you want to start the Storyboard. (Дополнительные сведения о перенаправленных событиях см. в разделе Общие сведения о перенаправленных событиях.)(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. Добавьте EventTrigger в коллекцию Triggers прямоугольника.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>
    

Часть 3 (код). Связывание раскадровки с обработчиком событийPart 3 (Code): Associate the Storyboard with an Event Handler

Самый простой способ применить и запустить Storyboard в коде — использовать обработчик событий.The easiest way to apply and start a Storyboard in code is to use an event handler. В этом разделе показано, как связать Storyboard с обработчиком событий в коде.This section shows how to associate the Storyboard with an event handler in code.

  1. Зарегистрируйтесь для Loadedного события прямоугольника.Register for the Loaded event of the rectangle.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. Объявите обработчик событий.Declare the event handler. В обработчике событий используйте метод Begin, чтобы применить раскадровку.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
    

Полный примерComplete Example

Ниже показано, как создать прямоугольник, который исчезает и выходит из представления в XAML.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>

Далее показано, как создать прямоугольник, который исчезает и появляется, в коде.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

Типы анимацииAnimation Types

Поскольку анимация создает значения свойств, для различных типов свойств существуют различные типы анимации.Because animations generate property values, different animation types exist for different property types. Чтобы анимировать свойство, которое принимает Double, например свойство Width элемента, используйте анимацию, которая создает значения Double.To animate a property that takes a Double, such as the Width property of an element, use an animation that produces Double values. Чтобы анимировать свойство, которое принимает Point, используйте анимацию, создающую Point значения и т. д.To animate a property that takes a Point, use an animation that produces Point values, and so on. Из-за количества различных типов свойств в System.Windows.Media.Animation пространстве имен существует несколько классов анимации.Because of the number of different property types, there are several animation classes in the System.Windows.Media.Animation namespace. Имена классов следуют строгому соглашению, благодаря чему их легко различать.Fortunately, they follow a strict naming convention that makes it easy to differentiate between them:

  • <Type>Animation<Type>Animation

    Такая анимация называется "базовой" (или From/To/By) и производится либо от начального до конечного значения, либо посредством добавления значения смещения к начальному значению.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.

    • Чтобы установить начальное значение, присвойте значение свойству From анимации.To specify a starting value, set the From property of the animation.

    • Чтобы установить конечное значение, присвойте значение свойству To анимации.To specify an ending value, set the To property of the animation.

    • Чтобы установить значение смещения, присвойте значение свойству By анимации.To specify an offset value, set the By property of the animation.

    В примерах этого раздела используются анимации этого класса, поскольку они являются наиболее простыми в использовании.The examples in this overview use these animations, because they are the simplest to use. Сведения об анимации From/To/By подробно описаны в обзоре анимации From/To/By.From/To/By animations are described in detail in the From/To/By Animations Overview.

  • <Type>AnimationUsingKeyFrames<Type>AnimationUsingKeyFrames

    Анимация с использованием ключевых кадров является более эффективным средством, чем анимация класса From/To/By, поскольку при ее использовании можно задать любое число конечных значений, а также управлять методами их интерполяции.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. Некоторые типы могут быть анимированы только с помощью анимации с ключевыми кадрами.Some types can only be animated with key frame animations. Анимация по ключевым кадрам подробно описана в разделе Общие сведения об анимации по ключевым кадрам.Key frame animations are described in detail in the Key-Frame Animations Overview.

  • <Type>AnimationUsingPath<Type>AnimationUsingPath

    Анимация с использованием пути позволяет использовать геометрический путь для создания анимации значений.Path animations enable you to use a geometric path in order to produce animated values.

  • <Type>AnimationBase<Type>AnimationBase

    Абстрактный класс, при реализации которого анимируется значение типа <Type>.Abstract class that, when you implement it, animates a <Type> value. Этот класс служит базовым классом для классов <Type>Animation и <Type>AnimationUsingKeyFrames.This class serves as the base class for <Type>Animation and <Type>AnimationUsingKeyFrames classes. Эти классы используются непосредственно только для создания пользовательской анимации.You have to deal directly with these classes only if you want to create your own custom animations. В противном случае следует использовать классы <Type>Animation или KeyFrame<Type>Animation.Otherwise, use a <Type>Animation or KeyFrame<Type>Animation.

В большинстве случаев потребуется использовать <тип> класс анимации, например DoubleAnimation и ColorAnimation.In most cases, you will want to use the <Type>Animation classes, such as DoubleAnimation and ColorAnimation.

В следующей таблице приведены несколько общих типов анимации, а также некоторые свойства, с которыми они используются.The following table shows several common animation types and some properties with which they are used.

Тип свойстваProperty type Соответствующая базовая (From/To/By) анимацияCorresponding basic (From/To/By) animation Соответствующая анимация с ключевыми кадрамиCorresponding key frame animation Соответствующая анимация с использованием путиCorresponding Path Animation Пример использованияUsage example
Color ColorAnimation ColorAnimationUsingKeyFrames НетNone Анимация Color SolidColorBrush или GradientStop.Animate the Color of a SolidColorBrush or a GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Анимация Width DockPanel или Height Button.Animate the Width of a DockPanel or the Height of a Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Анимация Center расположения EllipseGeometry.Animate the Center position of an EllipseGeometry.
String НетNone StringAnimationUsingKeyFrames НетNone Анимация Text TextBlock или Content Button.Animate the Text of a TextBlock or the Content of a Button.

Анимации представляет собой шкалу времениAnimations Are Timelines

Все типы анимации наследуются от класса Timeline; Таким образом, все анимации являются специализированными типами временных шкал.All the animation types inherit from the Timeline class; therefore, all animations are specialized types of timelines. Timeline определяет сегмент времени.A Timeline defines a segment of time. Можно указать временные характеристики временной шкалы: ее Duration, количество повторений и даже время, в течение которого она выполняется.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.

Поскольку анимация является Timeline, она также представляет сегмент времени.Because an animation is a Timeline, it also represents a segment of time. Анимация также вычисляет выходные значения по мере продвижения по заданному сегменту времени (или Duration).An animation also calculates output values as it progresses through its specified segment of time (or Duration). По мере выполнения (воспроизведения) анимации обновляется свойство, с которым она связана.As the animation progresses, or "plays," it updates the property that it is associated with.

Три часто используемых свойства времени: Duration, AutoReverseи RepeatBehavior.Three frequently used timing properties are Duration, AutoReverse, and RepeatBehavior.

Свойство DurationThe Duration Property

Как упоминалось ранее, временная шкала представляет собой сегмент времени.As previously mentioned, a timeline represents a segment of time. Длина этого сегмента определяется Duration временной шкалы, которая обычно указывается с помощью TimeSpan значения.The length of that segment is determined by the Duration of the timeline, which is usually specified by using a TimeSpan value. По достижении конца временной шкалы времени ее выполнение завершается.When a timeline reaches the end of its duration, it has completed an iteration.

Для определения текущего значения анимации используется свойство Duration.An animation uses its Duration property to determine its current value. Если для анимации не указано значение Duration, используется по умолчанию 1 секунда.If you do not specify a Duration value for an animation, it uses 1 second, which is the default.

Следующий синтаксис демонстрирует упрощенную версию синтаксиса атрибута Язык XAMLExtensible Application Markup Language (XAML) для свойства Duration.The following syntax shows a simplified version of the Язык XAMLExtensible Application Markup Language (XAML) attribute syntax for the Duration property.

часов : минут : секундhours : minutes : seconds

В следующей таблице показано несколько параметров Duration и их результирующих значений.The following table shows several Duration settings and their resulting values.

ПараметрSetting Возвращаемое значениеResulting value
0:0:5.50:0:5.5 5,5 секунды.5.5 seconds.
0:30:5.50:30:5.5 30 минут и 5,5 секунды.30 minutes and 5.5 seconds.
1:30:5.51:30:5.5 1 час, 30 минут и 5,5 секунды.1 hour, 30 minutes, and 5.5 seconds.

Одним из способов указания Duration в коде является использование метода FromSeconds для создания TimeSpan, а затем объявление новой структуры Duration с помощью 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.

Дополнительные сведения о Duration значениях и полном синтаксисе Язык XAMLExtensible Application Markup Language (XAML) см. в разделе Структура Duration.For more information about Duration values and the complete Язык XAMLExtensible Application Markup Language (XAML) syntax, see the Duration structure.

Свойство AutoReverseAutoReverse

Свойство AutoReverse указывает, будет ли временная шкала воспроизводиться назад после достижения конца Duration.The AutoReverse property specifies whether a timeline plays backward after it reaches the end of its Duration. Если задать для этого свойства анимации значение true, анимация будет отменяться после достижения конца Duration, начиная с ее конечного значения и заканчивая начальным значением.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. По умолчанию это свойство имеет значение false.By default, this property is false.

RepeatBehaviorRepeatBehavior

Свойство RepeatBehavior указывает, сколько раз будет воспроизводиться временная шкала.The RepeatBehavior property specifies how many times a timeline plays. По умолчанию временные шкалы имеют число итераций 1.0. Это означает, что они воспроизводятся один раз и не повторяются.By default, timelines have an iteration count of 1.0, which means they play one time and do not repeat at all.

Дополнительные сведения об этих свойствах и других см. в разделе Общие сведения о поведении времени.For more information about these properties and others, see the Timing Behaviors Overview.

Применение анимации к свойствуApplying an Animation to a Property

В предыдущих разделах описаны различные типы анимации и их свойства времени.The previous sections describe the different types of animations and their timing properties. В этом подразделе показано, как применить анимацию к свойству.This section shows how to apply the animation to the property that you want to animate. Storyboard объекты предоставляют один из способов применения анимации к свойствам.Storyboard objects provide one way to apply animations to properties. Storyboard — это временная шкала контейнера , которая предоставляет сведения о целевой информации для содержащихся в ней анимаций.A Storyboard is a container timeline that provides targeting information for the animations it contains.

Целевые объекты и свойстваTargeting Objects and Properties

Класс Storyboard предоставляет TargetName и TargetProperty вложенные свойства.The Storyboard class provides the TargetName and TargetProperty attached properties. Эти свойства определяют анимируемые объекты.By setting these properties on an animation, you tell the animation what to animate. Чтобы использовать объект в качестве целевого объекта анимации, обычно следует присвоить ему имя.However, before an animation can target an object, the object must usually be given a name.

Присвоение имени FrameworkElement отличается от присвоения имени объекту Freezable.Assigning a name to a FrameworkElement differs from assigning a name to a Freezable object. Большинство элементов управления и панелей являются элементами среды. Однако большинство чисто графических объектов, в том числе кисти, преобразования и геометрические объекты, являются фиксируемыми объектами.Most controls and panels are framework elements; however, most purely graphical objects, such as brushes, transforms, and geometries, are freezable objects. Если вы не уверены, является ли тип FrameworkElement или Freezable, см. раздел Иерархия наследования в справочной документации.If you are not sure whether a type is a FrameworkElement or a Freezable, refer to the Inheritance Hierarchy section of its reference documentation.

  • Чтобы создать FrameworkElement цели анимации, присвойте ей имя, задав его свойство Name.To make a FrameworkElement an animation target, you give it a name by setting its Name property. В коде также необходимо использовать метод RegisterName, чтобы зарегистрировать имя элемента со страницей, к которой он принадлежит.In code, you must also use the RegisterName method to register the element name with the page to which it belongs.

  • Чтобы сделать объект Freezable целевым объектом анимации в XAMLXAML, используйте директиву x:Name , чтобы присвоить ей имя.To make a Freezable object an animation target in XAMLXAML, you use the x:Name Directive to assign it a name. В коде просто используется метод RegisterName для регистрации объекта со страницей, к которой он принадлежит.In code, you just use the RegisterName method to register the object with the page to which it belongs.

В следующих разделах приводится пример именования элемента в XAMLXAML и коде.The sections that follow provide an example of naming an element in XAMLXAML and code. Более подробные сведения об именовании и нацеливании см. в разделе Общие сведения о раскадровках.For more detailed information about naming and targeting, see the Storyboards Overview.

Применение и запуск раскадровкиApplying and Starting Storyboards

Чтобы запустить раскадровку в XAMLXAML, свяжите ее с EventTrigger.To start a storyboard in XAMLXAML, you associate it with an EventTrigger. EventTrigger — это объект, который описывает действия, выполняемые при наступлении указанного события.An EventTrigger is an object that describes what actions to take when a specified event occurs. Одно из этих действий может быть BeginStoryboard действием, которое используется для запуска раскадровки.One of those actions can be a BeginStoryboard action, which you use to start your storyboard. Триггеры событий по концепции аналогичны обработчикам событий, так как они позволяют задать реакцию приложения на конкретное событие.Event triggers are similar in concept to event handlers because they enable you to specify how your application responds to a particular event. В отличие от обработчиков событий, триггеры событий можно полностью описать в XAMLXAML; никакой другой код не требуется.Unlike event handlers, event triggers can be fully described in XAMLXAML; no other code is required.

Чтобы запустить Storyboard в коде, можно использовать EventTrigger или использовать метод Begin класса Storyboard.To start a Storyboard in code, you can use an EventTrigger or use the Begin method of the Storyboard class.

Интерактивное управление раскадровкойInteractively Control a Storyboard

В предыдущем примере показано, как запустить Storyboard при возникновении события.The previous example showed how to start a Storyboard when an event occurs. Можно также интерактивно управлять Storyboard после запуска: вы можете приостановить, возобновить, остановить, перейти к его периоду заполнения, найти и удалить 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. Дополнительные сведения и пример, демонстрирующий интерактивное управление Storyboard, см. в разделе Общие сведения о раскадровках.For more information and an example that shows how to interactively control a Storyboard, see the Storyboards Overview.

Что происходит по завершении анимации?What Happens After an Animation Ends?

Свойство FillBehavior указывает, как ведет себя временная шкала при ее завершении.The FillBehavior property specifies how a timeline behaves when it ends. По умолчанию временная шкала начинается Filling по завершении.By default, a timeline starts Filling when it ends. Анимация, Filling, содержит конечное выходное значение.An animation that is Filling holds its final output value.

DoubleAnimation в предыдущем примере не заканчивается, так как свойство RepeatBehavior имеет значение Forever.The DoubleAnimation in the previous example does not end because its RepeatBehavior property is set to Forever. В следующем примере прямоугольник анимируется с помощью аналогичной анимации.The following example animates a rectangle by using a similar animation. В отличие от предыдущего примера, свойства RepeatBehavior и AutoReverse этой анимации остаются в значениях по умолчанию.Unlike the previous example, the RepeatBehavior and AutoReverse properties of this animation are left at their default values. Таким образом, анимация выполняется от 1 до 0 в течение пяти секунд, а затем останавливается.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))

Поскольку его FillBehavior не были изменены по умолчанию, что HoldEnd, анимация сохраняет свое окончательное значение 0 при завершении.Because its FillBehavior was not changed from its default value, which is HoldEnd, the animation holds its final value, 0, when it ends. Таким образом, Opacity прямоугольника остается в 0 после окончания анимации.Therefore, the Opacity of the rectangle remains at 0 after the animation ends. Если задать для Opacity прямоугольника другое значение, код не будет оказывать никакого влияния, так как анимация по-прежнему влияет на свойство Opacity.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.

Одним из способов восстановить управление анимированным свойством в коде является использование метода BeginAnimation и указание значения NULL для параметра AnimationTimeline.One way to regain control of an animated property in code is to use the BeginAnimation method and specify null for the AnimationTimeline parameter. Дополнительные сведения и пример см. в разделе Задание свойства после его анимации с помощью раскадровки.For more information and an example, see Set a Property After Animating It with a Storyboard.

Обратите внимание, что, несмотря на то, что задание значения свойства с Active или Filling анимация не оказывает никакого влияния, значение свойства изменяется.Note that, although setting a property value that has an Active or Filling animation appears to have no effect, the property value does change. Дополнительные сведения см. в разделе Обзор анимации и системы управления временем.For more information, see the Animation and Timing System Overview.

Привязка данных и анимирование анимацииData Binding and Animating Animations

Большинство свойств анимации могут быть привязанными к данным или анимированными. Например, можно анимировать свойство Duration DoubleAnimation.Most animation properties can be data bound or animated; for example, you can animate the Duration property of a DoubleAnimation. Однако в связи с особенностями работы системы времени поведение привязки данных или анимированных анимаций отличается от других случаев привязки данных и анимирования объектов.However, because of the way the timing system works, data bound or animated animations do not behave like other data bound or animated objects. Чтобы понять их поведение, следует понять значение применения анимации к свойству.To understand their behavior, it helps to understand what it means to apply an animation to a property.

См. пример в предыдущем разделе, в котором показано, как анимировать Opacity прямоугольника.Refer to the example in the previous section that showed how to animate the Opacity of a rectangle. При загрузке прямоугольника в предыдущем примере его триггер события применяет Storyboard.When the rectangle in the previous example is loaded, its event trigger applies the Storyboard. Система времени создает копию Storyboard и ее анимацию.The timing system creates a copy of the Storyboard and its animation. Эти копии заморожены (доступны только для чтения), а объекты Clock создаются из них.These copies are frozen (made read-only) and Clock objects are created from them. Эти объекты используются для выполнения фактических действий по анимации целевых свойств.These clocks do the actual work of animating the targeted properties.

Система времени создает часы для DoubleAnimation и применяет ее к объекту и свойству, заданному TargetName и TargetProperty 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. В этом случае система времени применяет часы к свойству Opacity объекта с именем «Миректангле».In this case, the timing system applies the clock to the Opacity property of the object that is named "MyRectangle."

Хотя для Storyboardтакже создаются часы, часы не применяются к свойствам.Although a clock is also created for the Storyboard, the clock is not applied to any properties. Он предназначен для управления дочерними часами, часов, созданных для DoubleAnimation.Its purpose is to control its child clock, the clock that is created for the DoubleAnimation.

Для отражения анимацией привязки данных или изменений анимации следует обновить ее часы.For an animation to reflect data binding or animation changes, its clock must be regenerated. Автоматическое обновление часов не поддерживается.Clocks are not regenerated for you automatically. Чтобы анимация отражала изменения, повторно примените ее раскадровку с помощью BeginStoryboard или метода Begin.To make an animation reflect changes, reapply its storyboard by using a BeginStoryboard or the Begin method. При использовании любого из этих методов анимация запускается повторно.When you use either of these methods, the animation restarts. В коде можно использовать метод Seek, чтобы переместить раскадровку обратно в предыдущую точку.In code, you can use the Seek method to shift the storyboard back to its previous position.

Пример анимации с привязкой к данным см. в разделе Пример анимации по ключевым сплайнам.For an example of a data bound animation, see Key Spline Animation Sample. Дополнительные сведения о работе анимации и системы управления временем см. в разделе Общие сведения об анимации и системеуправления временем.For more information about how the animation and timing system works, see Animation and Timing System Overview.

Другие способы анимацииOther Ways to Animate

В примерах этого раздела демонстрируется анимация с помощью раскадровок.The examples in this overview show how to animate by using storyboards. При использовании кода можно выполнять анимацию различными способами.When you use code, you can animate in several other ways. Дополнительные сведения см. в статье Общие сведения о методах анимации свойств.For more information, see the Property Animation Techniques Overview.

Примеры анимацииAnimation Samples

В следующих примерах описывается порядок добавления анимации в приложения.The following samples can help you start adding animation to your applications.

ЗаголовокTitle ОписаниеDescription
Общие сведения об анимации и системе управления временемAnimation and Timing System Overview Описывает, как система управления временем использует классы Timeline и Clock, которые позволяют создавать анимации.Describes how the timing system uses the Timeline and Clock classes, which allow you to create animations.
Советы и рекомендации по анимацииAnimation Tips and Tricks Список полезных советов по устранению проблем с анимацией, например проблем производительности.Lists helpful tips for solving issues with animations, such as performance.
Общие сведения о пользовательской анимацииCustom Animations Overview Описание способов расширения системы анимации полными кадрами, классами анимации и покадровым обратным вызовом.Describes how to extend the animation system with key frames, animation classes, or per-frame callbacks.
Общие сведения об анимациях From, To и ByFrom/To/By Animations Overview Описание способов создания анимации, которая переходит между двумя значениями.Describes how to create an animation that transitions between two values.
Общие сведения об анимации по ключевым кадрамKey-Frame Animations Overview Описание способов создания анимации с несколькими целевыми значениями, включая возможность управления методом интерполяции.Describes how to create an animation with multiple target values, including the ability to control the interpolation method.
Функции плавностиEasing Functions Описание способов применения математических формул к анимациям для получения реалистичного поведения, такого как подскок.Explains how to apply mathematical formulas to your animations to get realistic behavior, such as bouncing.
Общие сведения об анимации с использованием путиPath Animations Overview Описание способов перемещения или поворота объекта по сложному пути.Describes how to move or rotate an object along a complex path.
Общие сведения о методах анимации свойствProperty Animation Techniques Overview Описание анимации свойств с помощью раскадровок, локальных анимаций, часов и покадровой анимации.Describes property animations using storyboards, local animations, clocks, and per-frame animations.
Общие сведения о раскадровкеStoryboards Overview Описание способов использования раскадровок с несколькими временными шкалами для создания сложных анимаций.Describes how to use storyboards with multiple timelines to create complex animations.
Общие сведения о характере поведения во времениTiming Behaviors Overview Описывает типы Timeline и свойства, используемые в анимации.Describes the Timeline types and properties used in animations.
Общие сведения о временных событияхTiming Events Overview Описание событий, доступных в Timeline и Clock объектов для выполнения кода в точках временной шкалы, таких как begin, пауза, возобновление, пропуск или остановка.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 Примеры кода для использования анимаций и временных шкал в приложении.Contains code examples for using animations and timelines in your application.
Разделы руководства, посвященные часамClocks How-to Topics Содержит примеры кода для использования объекта Clock в приложении.Contains code examples for using the Clock object in your application.
Практические руководства, посвященные анимации по ключевым кадрамKey-Frame How-to Topics Примеры кода для использования покадровой анимации в приложении.Contains code examples for using key-frame animations in your application.
Практические руководства, посвященные анимации по контуруPath Animation How-to Topics Примеры кода для применения анимации с использованием пути в приложении.Contains code examples for using path animations in your application.

Справочные сведенияReference