Анимация в 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.
| Элемент | Описание |
|---|---|
| DoubleAnimation | Задание анимации свойства в виде числа (поддерживаются дробные значения). |
| ColorAnimation | Анимация изменения цвета |
| PointAnimation | Изменение координат точки, задаваемой с помощью элемента Path |
Описание анимируемого объекта задается с помощью атрибутов, перечень которых приводится в табл. 7.2.
| Элемент | Описание |
|---|---|
| Storyboard.TargetName | Название объекта, свойство которого будет анимироваться. Это название предварительно задается в описании самого объекта при помощи атрибута x:Name |
| Storyboard.TargetProperty | Название свойства (атрибута), которое будет изменяться |
| From | Начальное значение анимируемого свойства. Если в описании объекта уже указано нужное значение From, то в описании анимации этот атрибут можно опустить |
| To | Конечное значение анимируемого свойства |
| Duration | Продолжительность изменения анимируемого свойства в формате "часы : минуты : секунды". Это не общая продолжительность анимации. Например, если задать перемещение объекта из точки 0,0 в точку 200,200 и указать значение Duration ="0:0:01", то этот объект и будет двигаться в течении одной секунды. Однако сколько раз он так будет перемещаться, определяет атрибут RepeatBehavior |
| RepeatBehavior | Поведение объекта после завершения анимации или общая продолжительность анимации. Возможны следующие значение:
|
| 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.