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

Статья
06/02/2023

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

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

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

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

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

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

До появления WPF разработчики Microsoft Windows были вынуждены создавать и поддерживать собственные системы управления временем либо использовать специальные пользовательские библиотеки. WPF включает эффективную систему времени, которая предоставляется с помощью управляемого кода и 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 в коде.

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. Создание объекта DoubleAnimation

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

Значение непрозрачности 1.0 делает объект полностью непрозрачным, а значение непрозрачности 0.0 — полностью невидимым. Чтобы реализовать анимацию перехода от 1.0 к 0.0, задайте для свойства From значение 1.0, а для свойства To — значение 0.0. Ниже показано, как создать DoubleAnimation в разметке XAML.
```
<DoubleAnimation From="1.0" To="0.0" />
```
Ниже показано, как создать DoubleAnimation в коде.
```
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
```
Далее необходимо указать 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))
```
В предыдущем примере была приведена анимация, с помощью которой реализуется переход от 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 для указания объекта и свойства, которые нужно анимировать.

Создайте Storyboard и добавьте анимацию в качестве его дочернего элемента. Ниже показано, как создать Storyboard в разметке XAML.
```
<Storyboard>
    <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
```
Чтобы создать Storyboard в коде, объявите переменную Storyboard на уровне класса.
```
public partial class MainWindow : Window
{
    private Storyboard myStoryboard;
```
```
Class MainWindow

    Private myStoryboard As Storyboard
```
Затем инициализируйте Storyboard и добавьте анимацию в качестве его дочернего элемента.
```
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
```
```
myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
```
Для 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)
```

Используйте присоединенное свойство 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.

Создайте объект 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>

Создайте EventTrigger и добавьте BeginStoryboard в его коллекцию Actions. Задайте для свойства RoutedEvent объекта EventTrigger перенаправленное событие, которое используется для запуска объекта Storyboard. (Дополнительные сведения о перенаправленных событиях см. в разделе Общие сведения о перенаправленных событиях.)
```

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

Добавьте EventTrigger в коллекцию Triggers прямоугольника.

<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 с обработчиком событий в коде.

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

myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

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

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

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

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

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

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

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

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

<Type>Animation

Такая анимация называется "базовой" (или From/To/By) и производится либо от начального до конечного значения, либо посредством добавления значения смещения к начальному значению.
- Чтобы установить начальное значение, присвойте значение свойству From анимации.
- Чтобы установить конечное значение, присвойте значение свойству To анимации.
- Чтобы установить значение смещения, присвойте значение свойству By анимации.
В примерах этого раздела используются анимации этого класса, поскольку они являются наиболее простыми в использовании. Дополнительные сведения об анимации вида From/To/By см. в разделе "Общие сведения об анимациях From/To/By".
<Type>AnimationUsingKeyFrames

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

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

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

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

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

Тип свойства	Соответствующая базовая (From/To/By) анимация	Соответствующая анимация с ключевыми кадрами	Соответствующая анимация с использованием пути	Пример использования
Color	ColorAnimation	ColorAnimationUsingKeyFrames	нет	Анимация Color объекта SolidColorBrush или объекта GradientStop.
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	DoubleAnimationUsingPath	Анимация Width объекта DockPanel или Height объекта Button.
Point	PointAnimation	PointAnimationUsingKeyFrames	PointAnimationUsingPath	Анимация положения Center объекта EllipseGeometry.
String	нет	StringAnimationUsingKeyFrames	нет	Анимация Text объекта TextBlock или Content объекта Button.

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

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

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

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

Свойство Duration

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

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

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

часы : в секундах :

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

Параметр	Возвращаемое значение
0:0:5.5	5,5 секунды.
0:30:5.5	30 минут и 5,5 секунды.
1:30:5.5	1 час, 30 минут и 5,5 секунды.

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

Дополнительные сведения о значениях Duration и полном синтаксисе 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>

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

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

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

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

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

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

Пример целевых значений анимации From, To, By

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

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

Заголовок	Description
Общие сведения об анимации и системе управления временем	Описание того, как система управления временем использует классы Timeline и Clock, которые позволяют создавать анимации.
Советы и рекомендации по анимации	Список полезных советов по устранению проблем с анимацией, например проблем производительности.
Общие сведения о пользовательской анимации	Описание способов расширения системы анимации полными кадрами, классами анимации и покадровым обратным вызовом.
Общие сведения об анимациях From, To и By	Описание способов создания анимации, которая переходит между двумя значениями.
Общие сведения об анимации по ключевым кадрам	Описание способов создания анимации с несколькими целевыми значениями, включая возможность управления методом интерполяции.
Функции плавности	Описание способов применения математических формул к анимациям для получения реалистичного поведения, такого как подскок.
Общие сведения об анимации с использованием пути	Описание способов перемещения или поворота объекта по сложному пути.
Общие сведения о методах анимации свойств	Описание анимации свойств с помощью раскадровок, локальных анимаций, часов и покадровой анимации.
Общие сведения о раскадровке	Описание способов использования раскадровок с несколькими временными шкалами для создания сложных анимаций.
Общие сведения о характере поведения во времени	Описание типов и свойств класса Timeline, используемых в анимации.
Общие сведения о временных событиях	Описание событий, доступных в объектах Timeline и Clock для выполнения кода в определенных точках временной шкалы, например, событий начала, приостановки, возобновления, пропуска или остановки.
Практические руководства	Примеры кода для использования анимаций и временных шкал в приложении.
Разделы руководства, посвященные часам	Примеры кода для использования объекта Clock в приложении.
Практические руководства, посвященные анимации по ключевым кадрам	Примеры кода для использования покадровой анимации в приложении.
Практические руководства, посвященные анимации вдоль пути	Примеры кода для применения анимации с использованием пути в приложении.

Поделиться через

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

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

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

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

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

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

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

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

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

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

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

Свойство Duration

Свойство AutoReverse

RepeatBehavior

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

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

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

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

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

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

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

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

Справочные материалы

Дополнительные ресурсы

Поделиться через

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

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

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

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

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

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

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

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

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

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

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

Свойство Duration

Свойство AutoReverse

RepeatBehavior

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

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

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

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

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

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

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

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

См. также

Справочные материалы

Дополнительные ресурсы