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

В Windows Presentation Foundation (WPF) представлен полный набор функций для работы с графикой и макетом, позволяющих создавать привлекательные пользовательские интерфейсы и документы. Применение анимации позволяет сделать пользовательский интерфейс еще более наглядным и удобным в использовании. Используйте анимацию цвета фона или объекта Transform для создания экранных эффектов перехода или отображения визуальных подсказок.

В этом разделе представлены общие сведения об анимации и системе управления временем WPF. Этот раздел посвящен анимации объектов WPF с использованием раскадровки.

В этом разделе содержатся следующие подразделы.

• Введение в анимацию
• Система анимации свойств WPF
• Пример. Реализация исчезновения и появления элемента
• Типы анимации
• Применение анимации к свойству
• Интерактивное управление раскадровкой
• Что происходит по завершении анимации?
• Привязка данных и анимирование анимации
• Другие способы анимации
• Примеры анимации
• Связанные разделы
• Ссылки

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

Анимация — это имитация изменений, которая обеспечивается быстрым показом серии слегка отличающихся друг от друга изображений. Мозг человека воспринимает группу изображений как одну непрерывно изменяющуюся картинку. В фильмах такой эффект достигается за счет применения камер, записывающих множество фотографий (кадров) в секунду. При воспроизведении кадров проектором зрители видят движущееся изображение.

Анимация на компьютере выполняется по аналогичному принципу. Например, программа, в которой реализуется исчезновение прямоугольника, может работать следующим образом.

• В программе создается таймер.

• Через заданные временные интервалы проверяется значение таймера для определения истекшего времени.

• При каждой проверке значения таймера вычисляется текущее значение непрозрачности для прямоугольника в зависимости от прошедшего времени.

• Затем прямоугольник обновляется с использованием нового значения и перерисовывается.

До появления WPF, Microsoft Windows разработчики были вынуждены создавать и поддерживать собственные системы управления временем либо использовать специальные пользовательские библиотеки. В WPF входит эффективная система контроля времени, которая доступна посредством управляемого кода и Extensible Application Markup Language (XAML). Она тесно интегрирована с платформой WPF. Анимация WPF упрощает анимацию элементов управления и других графических объектов.

В WPF эффективно осуществляются все внутренние процессы управления системой времени и перерисовки экрана. Предоставляются классы контроля времени, позволяющие сосредоточиться на создаваемых эффектах, а не на механике их реализации. WPF также упрощает создание собственной анимации, предоставляя доступ к базовым классам анимации, из которых пользовательские классы могут наследовать средства создания пользовательской анимации. По сравнению со стандартными, пользовательские классы анимации обеспечивают большое преимущество в производительности.

Система анимации свойств WPF

Для более эффективного использования анимации в WPF следует знать основные понятия системы управления временем. Наиболее важно то, что в WPF анимация объектов осуществляется путем применения анимации к свойствам этих объектов. Например, чтобы увеличить размер элемента среды, следует анимировать его свойства Width и Height. Чтобы скрыть объект, следует анимировать его свойство Opacity.

Свойство, поддерживающее анимацию, должно удовлетворять следующим трем требованиям:

• Свойство является свойством зависимостей.

• Свойство принадлежит классу, который наследуется от класса DependencyObject и реализует интерфейс IAnimatable.

• Доступен совместимый тип анимации. (Если такой тип не предоставляется в WPF, можно создать собственный. См. раздел Общие сведения о пользовательской анимации.)

WPF содержит множество объектов со свойствами IAnimatable. Такие элементы управления, как Button и TabControl, а также объекты Panel и Shape наследуются от класса DependencyObject. Большинство их свойств являются свойствами зависимостей.

Анимацию можно использовать практически везде, где используются стили и шаблоны элементов управления. Анимация не обязательно должна быть визуальной; можно анимировать и объекты, не являющиеся частью пользовательского интерфейса, если они соответствуют описанным в этом разделе условиям.

Пример. Реализация исчезновения и появления элемента

В этом примере описывается порядок использования анимации WPF для анимации значения свойства зависимостей. Для этого используется класс DoubleAnimation, который представляет собой тип анимации, создающий значения типа Double для анимации свойства Opacity объекта Rectangle. В результате объект Rectangle исчезает и появляется.

В первой части примера создается элемент Rectangle. В последующих шагах описывается порядок создания анимации и ее применения к свойству Opacity прямоугольника.

Далее показано, как создать элемент Rectangle в элементе управления StackPanel, используя разметку XAML.

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

Далее показано, как создать элемент Rectangle в элементе управления StackPanel, используя код.

Dim myPanel As StackPanel = New StackPanel
myPanel.Margin = New Thickness(10)

Dim myRectangle As Rectangle = 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

StackPanel myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

Rectangle myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;

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

Одним из способов создания эффекта исчезновения и появления элемента является анимация его свойства Opacity. Поскольку свойство Opacity имеет тип Double, используется анимация, в которой создаются значения типа Double. Например, можно использовать анимацию класса DoubleAnimation. Объект DoubleAnimation используется для создания перехода между двумя значениями типа Double. Чтобы задать начальное значение, установите свойство From. Чтобы задать конечное значение, установите свойство To.

1. Значение непрозрачности 1.0 делает объект полностью непрозрачным, а значение 0.0 — полностью невидимым. Чтобы реализовать анимацию перехода от значения 1.0 к 0.0, присвойте свойству From значение 1.0, а свойству To — значение 0.0. Ниже показано, как создать элемент DoubleAnimation в разметке XAML.

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

   Ниже показано, как создать элемент DoubleAnimation в коде.

   Dim myDoubleAnimation As DoubleAnimation = New DoubleAnimation()
   myDoubleAnimation.From = 1.0
   myDoubleAnimation.To = 0.0
   

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

2. Далее необходимо установить свойство Duration. Свойство Duration анимации определяет длительность перехода от начального к конечному значению. Далее показано, как задать для свойства Duration значение пяти секунд в разметке XAML.

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

   Далее показано, как задать для свойства Duration значение пяти секунд в коде.

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

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

3. В предыдущем примере была приведена анимация, с помощью которой реализуется переход от значения 1.0 к 0.0. В результате этого состояние целевого элемента изменяется от полностью непрозрачного до полностью невидимого. Чтобы отобразить элемент после его исчезновения, установите для свойства анимации AutoReverse значение true. Чтобы циклически повторять анимацию, установите для свойства RepeatBehavior значение Forever. Далее показано, как задать свойства AutoReverse и RepeatBehavior в разметке XAML.

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

   Далее показано, как задать свойства AutoReverse и RepeatBehavior в коде.

   myDoubleAnimation.AutoReverse = True
   myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
   

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

Часть 2. Создание раскадровки

Чтобы применить анимацию к объекту, создайте объект Storyboard и используйте вложенные свойства зависимостей TargetName и TargetProperty для задания анимации объекту и свойству.

1. Создайте класс Storyboard и добавьте к нему анимацию в качестве дочернего класса. Далее показано, как создать объект Storyboard в разметке XAML.

   Для создания объекта Storyboard в коде объявите переменную Storyboard на уровне класса.

   Class MainWindow
   
       Private myStoryboard As Storyboard
   

   public partial class MainWindow : Window
   {
       private Storyboard myStoryboard;
   

   Затем инициализируйте объект Storyboard и добавьте к нему анимацию в качестве дочернего объекта.

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

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

2. В объекте Storyboard следует определить объект, к которому применяется анимация. Используйте вложенное свойство зависимостей Storyboard.TargetName, чтобы указать объект, который требуется анимировать. Далее показано, как задать для объекта DoubleAnimation целевое имя MyRectangle в разметке XAML.

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

   Далее показано, как задать для объекта DoubleAnimation целевое имя MyRectangle в коде.

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
   

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

3. Используйте вложенное свойство зависимостей TargetProperty, чтобы указать свойство, которое требуется анимировать. Далее показано, как настроить анимацию свойства Opacity объекта Rectangle в разметке 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 в коде.

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

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

Дополнительные сведения о синтаксисе TargetProperty и дополнительные примеры см. в разделе Общие сведения о Storyboard.

Часть 3 (XAML). Связывание раскадровки с триггером

Самый простой способ применить и запустить объект Storyboard в XAML — это использование триггера событий. В этом разделе показано, как связать объект Storyboard с триггером в разметке XAML.

1. Создайте объект BeginStoryboard и свяжите его с раскадровкой. Объект BeginStoryboard имеет тип TriggerAction, который используется для применения и запуска объекта 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. Присвойте свойству RoutedEvent объекта EventTrigger перенаправленное событие, которое используется для запуска объекта Storyboard. (Дополнительные сведения о перенаправленных событиях см. в разделе Общие сведения о перенаправленных событиях.)

   <!-- 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 элемента 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 (код). Связывание раскадровки с обработчиком событий

Самый простой способ применить и запустить объект Storyboard — это использование обработчика событий. В этом разделе показано, как связать объект Storyboard с обработчиком событий в коде.

1. Зарегистрируйте событие Loaded прямоугольника.

   AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
   

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

2. Объявите обработчик событий. В обработчике событий используйте метод Begin для применения раскадровки.

   Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
       myStoryboard.Begin(Me)
   End Sub
   

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

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

Далее показано, как создать прямоугольник, который исчезает и появляется, в разметке XAML.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://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>

Далее показано, как создать прямоугольник, который исчезает и появляется, в коде.

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

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);
        }
    }
}

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

Поскольку анимация создает значения свойств, для различных типов свойств существуют различные типы анимации. Для анимации свойства, которое принимает значение Double, например свойства Width элемента, необходимо использовать анимацию, создающую значения Double. Для анимации свойства, которое принимает значение Point, необходимо использовать анимацию, создающую значения Point, и т. д. Поскольку существует множество различных типов свойств, в пространстве имен System.Windows.Media.Animation представлены несколько классов анимации. Имена классов следуют строгому соглашению, благодаря чему их легко различать:

• <Тип>Animation

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

  • Чтобы установить начальное значение, присвойте значение свойству From анимации.

  • Чтобы установить конечное значение, присвойте значение свойству To анимации.

  • Чтобы установить значение смещения, присвойте значение свойству By анимации.

  В примерах этого раздела используются анимации этого класса, поскольку они являются наиболее простыми в использовании. Дополнительные сведения об анимации класса "From/To/By" см. в разделе Общие сведения об анимациях From/To/By.

• <Тип>AnimationUsingKeyFrames

  Анимация с использованием полных кадров является более эффективным средством, чем анимация класса "From/To/By", поскольку при ее использовании можно задать любое число конечных значений, а также управлять методами их интерполяции. Некоторые типы могут быть анимированы только с помощью анимации с полными кадрами. Дополнительные сведения об анимации с полными кадрами см. в разделе Общие сведения об анимации по ключевым кадрам.

• <Тип>AnimationUsingPath

  Анимация с использованием пути позволяет использовать геометрический путь для создания анимации значений.

• <Тип>AnimationBase

  Абстрактный класс, при реализации которого анимируется значение типа <Тип>. Этот класс является базовым для классов <Тип>Animation и <Тип>AnimationUsingKeyFrames. Эти классы используются непосредственно только для создания пользовательской анимации. В противном случае следует использовать классы <Тип>Animation или KeyFrame<Тип>Animation.

В большинстве случаев следует использовать классы <Тип>Animation, например DoubleAnimation и ColorAnimation.

В следующей таблице приведены несколько общих типов анимации, а также некоторые свойства, с которыми они используются.

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

Все типы анимации наследуются от класса Timeline и, следовательно, являются специализированными типами шкалы времени. Класс Timeline определяет сегмент времени. Можно задать характер поведения во времени временной шкалы, ее свойство Duration, число повторений, а также скорость течения времени.

Поскольку анимация принадлежит классу Timeline, она также представляет сегмент времени. При использовании анимации также вычисляются выходные значения по мере прохождения заданных сегментов времени (или свойства Duration). По мере выполнения (воспроизведения) анимации обновляется свойство, с которым она связана.

Наиболее часто используются свойства времени Duration, AutoReverse и RepeatBehavior.

Свойство Duration

Как было сказано выше, временная шкала представляет собой сегмент времени. Длина этого сегмента определяется значением свойства Duration шкалы времени, которое обычно задается с помощью свойства TimeSpan. По достижении конца шкалы времени ее выполнение завершается.

Свойство Duration используется для определения текущего значения анимации. Если значение свойства Duration анимации не задано, по умолчанию используется значение, равное одной секунде.

В следующем примере синтаксиса показана упрощенная версия синтаксиса атрибута Extensible Application Markup Language (XAML) для свойства Duration.

В следующей таблице приведены некоторые параметры объекта Duration и возвращаемые ими значения.

Одним из способов задания объекта Duration в коде является использование метода FromSeconds для создания объекта TimeSpan, после чего объявляется новая структура Duration, в которой используется заданный объект TimeSpan.

Дополнительные сведения о значениях Duration и полный синтаксис Extensible Application Markup Language (XAML) см. в описании структуры Duration.

Свойство AutoReverse

Свойство AutoReverse задает обратное воспроизведение шкалы времени по достижении конца ее свойства Duration. Если установить для этого свойства анимации значение true, по достижении конца свойства Duration выполняется обратное воспроизведение анимации (от конечного значения к начальному). По умолчанию это свойство имеет значение false.

Свойство RepeatBehavior

Свойство RepeatBehavior определяет число воспроизведений шкалы времени. По умолчанию для временной шкалы устанавливается число итераций, равное 1.0 (воспроизведение происходит один раз и не повторяется).

Дополнительные сведения об этих и других свойствах см. в разделе Общие сведения о характере поведения во времени.

Применение анимации к свойству

В предыдущих разделах описаны различные типы анимации и их свойства времени. В этом подразделе показано, как применить анимацию к свойству. Объекты Storyboard служат средством применения анимации к свойствам. Объект Storyboard является контейнерной шкалой времени, предоставляющей сведения об анимации, которую она содержит.

Целевые объекты и свойства

В классе Storyboard представлены вложенные свойства зависимостей TargetName и TargetProperty. Эти свойства определяют анимируемые объекты. Чтобы использовать объект в качестве целевого объекта анимации, обычно следует присвоить ему имя.

Присваивание имени объекту FrameworkElement отличается от присваивания имени объекту Freezable. Большинство элементов управления и панелей являются элементами среды. Однако большинство чисто графических объектов, в том числе кисти, преобразования и геометрические объекты, являются фиксируемыми объектами. Чтобы определить, принадлежит ли тип классу FrameworkElement или Freezable, обратитесь к разделу Иерархия наследования данной справочной документации.

• Чтобы использовать объект FrameworkElement в качестве целевого объекта анимации, присвойте ему имя с помощью свойства Name. В коде необходимо также использовать метод RegisterName для регистрации имени элемента на странице, которой он принадлежит.

• Чтобы анимировать объект Freezable в XAML, присвойте ему имя с помощью атрибута Директива x:Name. В коде следует использовать метод RegisterName для регистрации объекта на странице, которой он принадлежит.

В следующих разделах приводится пример присваивания имени элементу в XAML и коде. Дополнительные сведения о присваивании имен и определении целевых объектов см. в разделе Общие сведения о Storyboard.

Применение и запуск раскадровки

Чтобы запустить раскадровку в XAML, свяжите ее с объектом EventTrigger. Объект EventTrigger используется для описания действий, выполняемых при возникновении заданного события. Например, можно задать действие BeginStoryboard, которое используется для запуска раскадровки. Триггеры событий по концепции аналогичны обработчикам событий, так как они позволяют задать реакцию приложения на конкретное событие. В отличие от обработчиков событий, триггеры событий могут быть полностью описаны в XAML без использования другого кода.

Чтобы запустить объект Storyboard в коде, можно использовать объект EventTrigger или метод Begin класса Storyboard.

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

В предыдущем примере показан порядок запуска объекта Storyboard при возникновении события. После запуска объекта Storyboard им можно управлять в интерактивном режиме: можно приостановить, возобновить, остановить, перейти к периоду заполнения, выполнить поиск и удалить объект Storyboard. Дополнительные сведения и пример, описывающий порядок управления объектом Storyboard в интерактивном режиме, см. в разделе Общие сведения о Storyboard.

Что происходит по завершении анимации?

Свойство FillBehavior определяет поведение по завершении шкалы времени. По умолчанию по завершении шкалы времени запускается функция Filling. Конечное значение анимации, для которой установлено значение Filling, сохраняется.

В предыдущем примере выполнение объекта DoubleAnimation не заканчивается, поскольку его свойству RepeatBehavior присвоено значение Forever. В следующем примере прямоугольник анимируется с помощью аналогичной анимации. В отличие от предыдущего примера, значения свойств RepeatBehavior и AutoReverse этой анимации остаются заданными по умолчанию. Таким образом, анимация выполняется от 1 до 0 в течение пяти секунд, после чего останавливается.

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

            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

Поскольку свойство FillBehavior анимации не изменено и содержит значение по умолчанию (HoldEnd), по завершении анимации сохраняется ее конечное значение (0). Таким образом, свойство Opacity прямоугольника по завершении анимации имеет значение 0. Если установить другое значение свойства Opacity прямоугольника, видимых изменений не произойдет, поскольку свойство Opacity по-прежнему управляется анимацией.

Чтобы возвратить управление анимированным свойством, используйте в коде метод BeginAnimation и присвойте параметру AnimationTimeline значение null. Дополнительные сведения и пример см. в разделе Практическое руководство. Установка свойства после его анимации с помощью раскадровки.

Обратите внимание, что при установке значения свойства, для которого анимации присвоено значение Active или Filling видимые изменения не происходят, но значение свойства все же изменяется. Дополнительные сведения см. в разделе Общие сведения об анимации и системе управления временем.

Привязка данных и анимирование анимации

Большинство свойств анимации могут быть связаны с данными либо анимированы. Например, можно анимировать свойство Duration объекта DoubleAnimation. Однако в связи с особенностями работы системы времени поведение привязки данных или анимированных анимаций отличается от других случаев привязки данных и анимирования объектов. Чтобы понять их поведение, следует понять значение применения анимации к свойству.

Обратитесь к примеру предыдущего раздела, в котором демонстрируется порядок анимации свойства Opacity прямоугольника. При загрузке прямоугольника в предыдущем примере его обработчик событий применяет объект Storyboard. Система времени создает копию объекта Storyboard и его анимации. Эти копии фиксируются (устанавливаются в режим "только для чтения"), а на их базе создаются объекты Clock. Эти объекты используются для выполнения фактических действий по анимации целевых свойств.

В системе времени создаются часы для объекта DoubleAnimation, которые применяются к объекту и свойству, заданным с помощью свойств TargetName и TargetProperty объекта DoubleAnimation. В этом случае система времени применяет часы к свойству Opacity объекта с именем "MyRectangle".

Несмотря на то, что часы также создаются для объекта Storyboard, они не применяется к его свойствам. Они используются для управления дочерними часами, которые создаются для объекта DoubleAnimation.

Для отражения анимацией привязки данных или изменений анимации следует обновить ее часы. Автоматическое обновление часов не поддерживается. Чтобы отразить изменения в анимации, повторно примените соответствующую раскадровку с помощью объекта BeginStoryboard или метода Begin. При использовании любого из этих методов анимация запускается повторно. В коде можно использовать метод Seek для возврата раскадровки в предыдущее положение.

Пример анимации с привязкой к данным см. в файле Key Spline Animation Sample. Дополнительные сведения о работе анимации и системы времени см. в разделе Общие сведения об анимации и системе управления временем.

Другие способы анимации

В примерах этого раздела демонстрируется анимация с помощью раскадровок. При использовании кода можно производить анимацию различными способами. Дополнительные сведения см. в разделе Общие сведения о методах анимации свойств.

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

В следующих примерах описывается порядок добавления анимации в приложения.

• From, To, and By Animation Target Values Sample

  Описание различных параметров анимации "From/To/By".

• Animation Timing Behavior Sample

  Описание способов управления поведением анимации во времени. В этом примере также описывается порядок привязки данных для конечного значения анимации.

Связанные разделы

Ссылки

Timeline

Storyboard

BeginStoryboard

Clock

Журнал изменений