Трансформация и анимация в XAML

Анимация

Слово анимация буквально означает "оживить что-то". Таким образом, с помощью анимации вы можете вдохнуть жизнь в созданные вами объекты, меняя их атрибуты, такие как цвет, размер, прозрачность и другие свойства, во времени и в ответ на действия пользователя.

В XAML анимация элемента осуществляется за счет изменения одного или более его свойство во времени. Это время определяется с помощью временной шкалы. Например, чтобы элемент пересек экран за 5 секунд, необходимо было бы задать временную шкалу длительностью 5 секунд, которая обеспечила бы изменение свойства Canvas.Left от 0 до значения ширины экрана. В следующих разделах будут обсуждаться все доступные типы анимации и отличия анимации этих свойств с использованием ключевых кадров.

Прежде чем переходить к различным типа анимации, вы должны познакомиться с механизмами анимаций, которые включают Triggers (Триггеры), EventTriggers (Триггеры событий) и Storyboards (Раскадровки). Сначала рассмотрим эти концепции, а затем уже углубимся в различные типы анимации.

Использование триггеров и триггеров событий

Анимации в Silverlight выполняются в ответ на некоторое событие, которое определяется с помощью триггера. В настоящее время Silverlight XAML поддерживает только один тип триггеров - EventTrigger. Каждое свойство UI имеет коллекцию Triggers, которая используется для определения одного или более триггеров (т.е. одного или более EventTriggers ).

Итак, первый шаг в добавлении анимации в элемент - создание его коллекции триггеров. Затем в эту коллекцию необходимо будет добавить, по крайней мере, один триггер события. Например, первый шаг при анимации прямоугольника, определение коллекции триггеров, выглядит следующим образом:

<Rectangle x:Name="rect" Fill="Red" 
           Canvas.Top="100" Canvas.Left="100" 
           Width = "100" Height="100">
  <Rectangle.Triggers>
  </Rectangle.Triggers>
</Rectangle>

Далее необходимо определить EventTrigger, который будет добавлен в эту коллекцию. В данном EventTrigger с помощью свойства RoutedEvent (Отслеживаемое событие) задается событие, в ответ на возникновение которого будет запускаться анимация. В "Элемент управления браузера Silverlight" , "Элемент управления браузера Silverlight", подробно рассматриваются все события, поддерживаемые каждым из объектов в XAML, но обратите внимание, что RoutedEvent поддерживает только событие Loaded (Загружен).

Чтобы реализовать анимацию, которая будет запускаться после загрузки прямоугольника, EventTrigger необходимо описать следующим образом:

<EventTrigger RoutedEvent="Rectangle.Loaded"> 
</EventTrigger>

Вот фрагмент XAML-кода, запускающий эту анимацию:

<Rectangle x:Name="rect" Fill="Red" Canvas.Top="100" 
           Canvas.Left="100" Width = "100" Height="100">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">      
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

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

Использование BeginStoryboard и Storyboard

BeginStoryboard (Начать раскадровку) - это триггерное действие, содержащее объект Storyboard. В объектах Storyboard находятся описания анимации. При описании анимации эти объекты просто встраиваются в определение EventTrigger. Вот как это было бы выполнено для примера с прямоугольником, с которым мы работаем в этой лекции:

<Rectangle x:Name="rect" Fill="Red" 
           Canvas.Top="100" Canvas.Left="100" Width = "100" Height="100">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Определение параметров анимации

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

Свойства типа double анимируются с помощью DoubleAnimation или DoubleAnimationUsingKeyFrames (Анимация свойств типа Double с использованием ключевых кадров). Этот метод используется для анимации свойств со значением типа double, например, таких размеров, как Canvas.Left, или таких визуальных атрибутов, как Opacity.

Свойства типа точка анимируются с помощью PointAnimiation (Анимация точки) или PointAnimationUsingKeyFrames (Анимация точки с использованием ключевых кадров). Этот метод используется для анимации свойств со значениями, определенными как точка.Например, сегменты прямых или кривые описывают с помощью точек.

Свойства типа цвет анимируются с помощью ColorAnimation или ColorAnimationUsingKeyFrames (Цветовая анимация с использованием ключевых кадров). Этот метод используется для анимации свойств, содержащих значения цвета,например, фона или обводки элемента.

Анимация каждого из этих типов свойств выполняется от значения, заданного атрибутом From (От) (или его текущего значения, если этот атрибут не задан), до значения, заданного атрибутом To (До), или на значение, заданное атрибутом By (На).

Задание объекта анимации

Объект, к которому должна применяться анимация, задается свойством Storyboard.TargetName (Имя цели) данного типа анимации. В это свойство передается имя объекта, которое в описании объекта задано свойством x:Name (Имя). Кроме того, с помощью Storyboard.TargetProperty (Целевое свойство) задается анимируемое свойство. Заметьте, что составное или присоединенное свойство (такое как Canvas.Left ) заключается в круглые скобки. Итак, например, чтобы задать анимацию свойства типа Double для свойства Canvas.Left прямоугольника rect, необходимо написать следующий XAML:

<DoubleAnimation Storyboard.TargetName="rect"
                 Storyboard.TargetProperty=" (Canvas.Left)" />

Задание продолжительности

Для определения времени перехода анимируемых свойств от одного значения к другому используется свойство Duration (Продолжительность). Оно определяется в формате ЧЧ:ММ:СС, где продолжительность 5 секунд записывается 00:00:05, или сокращенно - 0:0:5. Рассмотрим пример:

<DoubleAnimation Story="" board.TargetName="rect"
                 Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5" />

Задание момента начала

Если вы не хотите, чтобы анимация начиналась сразу после загрузки, можно ввести задержку с помощью свойства BeginTime (Момент начала). Для него используется такой же синтаксис, как и для Duration.

<DoubleAnimation Storyboard.TargetName="rect"
                 Storyboard.TargetProperty=" (Canvas.Left)" 
                 BeginTime="0:0:5" />

Использование свойства SpeedRatio

Можно настроить поведение анимации, умножая ее продолжительность на коэффициент скорости. Для этого используется свойство SpeedRatio (Коэффициент скорости). Например, в предыдущем случае была задана продолжительность 5 секунд. Задав SpeedRatio равным 2, можно изменить скорость воспроизведения, и анимация будет длиться 10 секунд. Или можно ускорить анимацию до 1 секунды, задавая SpeedRatio равным 0,2.

<DoubleAnimation Storyboard.TargetName="rect" 
                 Storyboard.TargetProperty="(Canvas.Left)" 
                 SpeedRatio="2" Duration="0:0:5" />

Использование свойства AutoReverse

Анимация Silverlight обеспечивает возможность возвращения свойств, измененных в ходе анимации, к исходным значениям. Например, если значение типа double изменяется от 0 до 500 за определенный промежуток времени, свойство AutoReverse (Автоматическая перемотка) заставит анимацию выполниться в обратном направлении, от 500 к 0.

Обратите внимание, что если задана продолжительность анимации 5 секунд, и свойству AutoReverse задано значение true, продолжительность всей анимации будет 10 секунд. Далее представлен пример XAML со свойством AutoReverse:

<DoubleAnimation Storyboard.TargetName=" rect"
Storyboard.TargetProperty=" (Canvas.Left)" AutoReverse="True" Duration="0:0:5" />

Задание свойства RepeatBehavior

Существует ряд опций, посредством которых можно управлять поведением анимации по завершении ее выполнения. Задаются они с помощью свойства RepeatBehavior (Поведение повтора). Это свойство может принимать три типа значений:

1. Время в секундах. После прохождения этого промежутка времени на временной шкале, анимация будет запускаться повторно.
2. Значение Forever (Постоянно) определяет постоянное повторение.
3. Определенное количество повторений. Для этого задается число, определяющее число повторений, за которым следует символ x. Например, если необходимо повторить анимацию три раза, задается значение 3x.

Далее представлен полный XAML-код для анимации перемещения прямоугольника из точки 100 в точку 500 и назад в 100 по оси х с последующим троекратным повторением:

<Rectangle x:Name="rect" Fill="Red" Canvas.Top="100" 
           Canvas.Left="100" Width = "100" Height="100">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation RepeatBehavior="3x" Storyboard.TargetName="rect" 
                           Storyboard.TargetProperty="(Canvas.Left)" To="500" 
            Duration ="0:0:5" AutoReverse="True" />
        </Storyboard>
      </BeginStoryboard >
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

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

Анимация значения с помощью DoubleAnimation

Объект DoubleAnimation позволяет задавать, как значения типа double изменяется со временем. Анимация вычисляется как линейная интерполяция между значениями свойства в разные моменты времени.

При анимации свойств типа double задается значение в начале анимации, с помощью свойства From, и его абсолютное конечное значение, с помощью свойства To, или относительное конечное значение, посредством свойства By.

Например, чтобы изменить свойство Canvas.Left элемента от 100 (расположение рядом целевым краем экрана) до 500, можно задать свойству From значение 100 и 500 свойству To или 400 свойству By. Обратите внимание, что в случае задания обоих свойств, To имеет преимущество над By. Также если прямоугольник уже находится в определяемой From позиции, это свойство задавать не надо.

Предыдущий пример XAML-кода реализует это поведение. Прямоугольник располагается в позиции с Canvas.Left равным 100. DoubleAnimation определяет для To значение 500. Следовательно, анимация обеспечит изменение значения от 100 до 500, что обусловит перемещение прямоугольника по экрану вправо.

Анимация цвета с помощью ColorAnimation

Поведение ColorAnimation очень близко поведению DoubleAnimation. Этот тип используется для изменения значения color элемента во времени. Анимация вычисляется как линейная интерполяция между значениями color в заданный промежуток времени.

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

Анимация цветовых свойств не означает анимацию содержимого свойства, потому что содержимым свойства обычно является кисть, а не цвет. Поэтому, например, если необходимо анимировать цвет заливки прямоугольника, целевым свойством анимации является не его свойство Fill, а свойство Color кисти SolidBrush, которая используется для выполнения заливки.

Далее представлен пример анимации цвета прямоугольника. Цвет меняется от черного к белому в течение 5 секунд:

<Rectangle x:Name="rect" Canvas.Top="100" Canvas.Left="100" 
           Width="100" Height="100" Fill="Black">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation Storyboard.TargetName="rect" 
            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
            To="#00000000" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard >
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Как видите, в этом фрагменте XAML целевым свойством является свойство Color кисти SolidColorBrush, закрашивающей фигуру. Это типовой синтаксис XAML, используемый при работе с такими составными свойствами.