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

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

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

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

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

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

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

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

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

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

До версии WPF, Microsoft Windows разработчикам приходится создавать и управлять собственные системы управления временем либо использовать специальные пользовательские библиотеки. WPF включает в себя эффективная система контроля времени, предоставляется с помощью управляемого кода и XAML и которые тесно интегрированы в WPF framework. WPF анимация упрощает анимацию элементов управления и других графических объектов.

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

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

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

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

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;

Часть 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 в коде.

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

  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;

Часть 2. Создать раскадровку

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

  1. Создание 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;

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

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

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

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

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

    <!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

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

    <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 событий прямоугольника.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

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

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

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

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

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

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

  • <Тип> анимации

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

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

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

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

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

  • <Тип> AnimationUsingKeyFrames

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

  • <Тип> AnimationUsingPath

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

  • <Тип> AnimationBase

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

В большинстве случаев требуется использовать < тип> классы анимации, например 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 значение для анимации, он использует 1 секунды, по умолчанию.

Следующий синтаксис показывает упрощенную версию 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 и кода. Более подробные сведения об именовании и определение целевых объектов см. в разделе Общие сведения о раскадровках.

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

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

Чтобы запустить Storyboard в коде, можно использовать EventTrigger или использовать Begin метод 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 метод и указать значение null для AnimationTimeline параметра. Дополнительные сведения и пример см. в разделе Установка свойства после его анимации с помощью раскадровки.

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

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

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

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

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

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

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

Для примера данных, привязанного к анимации, см. в разделе Key Spline Animation Sample. Дополнительные сведения о работе анимации и системы времени см. в разделе анимации и общие сведения о характере системы.

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

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

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

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

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

Ссылка

Timeline

Storyboard

BeginStoryboard

Clock