Спонсор: Microsoft
Опубликован: 23.01.2009 | Уровень: для всех | Доступ: платный
Лекция 7:

Анимация в XAML-графике

Аннотация: В этой лекции мы рассмотрим основные принципы создания анимации в XAML – графике.

Линейная анимация

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

Фрагмент кода, описывающий движение прямоугольника, выглядит так:

<Rectangle Canvas.Left ="5" 
Canvas.Top="5" Width="190" 
Height="90" Stroke="green" 
StrokeThickness="2" Fill="Transparent" />

<Rectangle Canvas.Top="40" 
Width="20" Height="20" 
Fill="red" x:Name="myRectangle">
<Rectangle.Triggers> 
    <EventTrigger RoutedEvent="Rectangle.Loaded"> 
      <BeginStoryboard> 
        <Storyboard> 
          <DoubleAnimation RepeatBehavior="Forever"               
            Storyboard.TargetName="myRectangle" 
            Storyboard.TargetProperty="(Canvas.Left)" 
            From="0" To="200" 
            Duration="0:0:01" 
            AutoReverse="True" /> 
        </Storyboard> 
      </BeginStoryboard> 
    </EventTrigger> 
  </Rectangle.Triggers> 
</Rectangle>

Анимация происходит в ответ на события. Эта концепция очень похожа на общую модель событий объектно-ориентированного программирования вообще и, например, языка C# в частности. События определяются при помощи триггеров здесь – в данном примере эту роль играет элемент Rectangle Triggers. Значение "Rectangle.Loaded" атрибута RoutedEvent элемента EventTrigger указывает на то, что анимация начнется сразу после загрузки прямоугольника. Далее при помощи тега BeginStoryboard (начать раскадровку) определяется раскадровка Storyboard. Именно в элементе Storyboard определяются свойства, которые и будут меняться с течением времени. Элемент DoubleAnimation указывает на то, что анимируемое свойство является числом (типа Double ). Это один из трех возможных типов, другие приводятся в табл. 7.1.

Таблица 7.1. Типы анимации
Элемент Описание
DoubleAnimation Задание анимации свойства в виде числа (поддерживаются дробные значения).
ColorAnimation Анимация изменения цвета
PointAnimation Изменение координат точки, задаваемой с помощью элемента Path

Описание анимируемого объекта задается с помощью атрибутов, перечень которых приводится в табл. 7.2.

Таблица 7.2. Атрибуты анимации
Элемент Описание
Storyboard.TargetName Название объекта, свойство которого будет анимироваться. Это название предварительно задается в описании самого объекта при помощи атрибута x:Name
Storyboard.TargetProperty Название свойства (атрибута), которое будет изменяться
From Начальное значение анимируемого свойства. Если в описании объекта уже указано нужное значение From, то в описании анимации этот атрибут можно опустить
To Конечное значение анимируемого свойства
Duration Продолжительность изменения анимируемого свойства в формате "часы : минуты : секунды". Это не общая продолжительность анимации. Например, если задать перемещение объекта из точки 0,0 в точку 200,200 и указать значение Duration ="0:0:01", то этот объект и будет двигаться в течении одной секунды. Однако сколько раз он так будет перемещаться, определяет атрибут RepeatBehavior
RepeatBehavior Поведение объекта после завершения анимации или общая продолжительность анимации. Возможны следующие значение:
  • Число в формате "часы : минуты : секунды". Например, при значении "0:0:15" анимация будет воспроизводиться в течении 15 секунд.
  • Число в формате "Nx", где N – число повторений. К примеру, если задать это значение равным "3x", то анимация свойства будет проиграна три раза.
  • Значение "Forever". Зацикленное или бесконечное воспроизведение.
AutoReverse Автоматическое обращения воспроизведения, возможные значения "True" и "False" (по умолчанию). Например, если задать перемещение объекта из точки 0,0 в точку 200,200 и задать AutoReverse=" True ", то при достижении точки 200, 200 объект будет двигаться в обратном направлении
By Относительное конечное значение анимируемого свойства. Например, если задать перемещение объекта из точки 100 в точку 300, то это можно сделать так:
From="100" To="300"

В этом случае происходит относительное смещение на 200 единиц. С помощью атрибута By та же самая запись будет выглядеть так:

From="0" By="200"

При одновременно задании обоих свойств To будет иметь больший приоритет, а By будет игнорироваться.

BeginTime Задание времени старта анимации. Например, при значении BeginTime="0:0:3" анимация начнет воспроизводиться спустя три секунды
SpeedRatio Коэффициент скорости. Предположим, что была установлено пятисекундное изменение некоторого свойства: Duration ="0:0:05". Это значение можно увеличить до 10 секунд, если указать SpeedRatio="0.5". Наоборот, при значении SpeedRatio="2" воспроизведение сократится до двух с половиной секунд

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

DoubleAnimation

Элемент DoubleAnimation позволяет анимировать числовые (включая дробные) значения свойств. Это означает, что с помощью этого элемента можно изменять наибольшее количество свойств объектов. В самом деле – координаты, размеры, прозрачность, направление градиента – все эти параметры задаются в виде чисел. В табл. 7.3 приводятся различные примеры с элементом DoubleAnimation.

Илья Столупин
Илья Столупин
Россия
Олег Борхаленко
Олег Борхаленко
Украина