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

Обновлен: Ноябрь 2007

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle> 
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.SDK.Animation
{
    public class RectangleOpacityFadeExample : Page
    {
        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());
            this.WindowTitle = "Fading Rectangle Example";
            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 From="1.0" To="0.0"  />        
   ...
   

   [C#]

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

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

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   

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

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
   

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

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

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

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

   В коде объявите объект Storyboard как член класса.

   public class RectangleOpacityFadeExample : Page
   { 
       private Storyboard myStoryboard;
   

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

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

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

   ...
   <Storyboard>
     <DoubleAnimation
       Storyboard.TargetName="MyRectangle" 
       From="1.0" To="0.0" Duration="0:0:1" 
       AutoReverse="True" RepeatBehavior="Forever" />
   </Storyboard>
   ...
   
   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   Примечание.

   При создании раскадровок в коде следует дополнительно создать область видимости имен и зарегистрировать имя анимируемого объекта. В коде создания страницы и прямоугольника, приведенном в начале этого раздела, также объявляется объект NameScope и регистрируется имя прямоугольника. Для создания объекта NameScope (если таковой еще не существует) используется метод SetNameScope. Для регистрации имени целевого объекта в элементе, для которого создан объект NameScope, используется метод RegisterName. В противном случае объект Storyboard не получает доступ к анимируемому объекту. Дополнительный пример см. в разделе Практическое руководство. Определение пространства имен.

3. Используйте вложенное свойство зависимостей TargetProperty, чтобы указать свойство, которое требуется анимировать. В следующем коде анимации в качестве целевого используется свойство Opacity объекта Rectangle.

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

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

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

Часть 3 (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. (Дополнительные сведения о перенаправленных событиях см. в разделе Общие сведения о перенаправленных событиях.)

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

Добавьте объект 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 — это использование обработчика событий.

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

   [C#]

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

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

   [C#]

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

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

В следующем примере приведен полный код для создания исчезающего и появляющегося прямоугольника.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <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>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class RectangleOpacityFadeExample : Page
    {
        private Storyboard myStoryboard;

        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Fading Rectangle Example";
            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.

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

Тип свойства	Соответствующая базовая (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 (Extensible Application Markup Language) для свойства 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 (Extensible Application Markup Language) см. в описании страницы типа 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));

Поскольку свойство 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".

• Пример настройки временных характеристик анимации

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

См. также

Основные понятия

Общие сведения об анимациях From/To/By

Общие сведения об анимации по ключевым кадрам

Общие сведения о Storyboard

Общие сведения о характере поведения во времени

Общие сведения об анимации и системе управления временем

Общие сведения о временных событиях

Введение в Windows Presentation Foundation

Ссылки

Timeline

Storyboard