Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Введение в анимацию Windows Runtime

0
Общие типы анимации

Windows Runtime позволяет использовать анимацию для изменения  свойств любого из объектов, наследуемых от UIElement. Анимация представляет собой мощный механизм, который помогает создавать красивые эффекты, практически не используя код на C#.

Прежде  чем  перейти  к  созданию  примеров с  использованием  анимации,

рассмотрим доступные типы анимации.

DoubleAnimation

Анимация DoubleAnimation используется для создания анимации любых свойств типа double. Основными  свойствами данного типа анимации  являются From и To, которые задают начальное и конечное значение анимируемого свойства. Если начальное значение свойства неизвестно, то можно воспользоваться еще одним свойством — By, которое позволяет задать относительное значение для анимируемого свойства.

ColorAnimation

Тип анимации ColorAnimation используется для анимации свойств типа Color. На тип анимируемого свойства  нужно обратить особое  внимание. Так, если Вы решили анимировать такие свойства,  как Fill  или Stroke для графических примитивов, то нужно отталкиваться не от них, а от свойств кистей. Основными свойствами данного типа анимации являются те же, что и в предыдущем случае, только вместо значений типа double задается цвет.

PointAnimation

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

Независимо от   типа   анимации,   все   объекты   обладают   нижеуказанными свойствами.

·                   Duration — это свойство  задает время продолжительности  анимации в  формате ЧЧ:ММ:СС (00:00:03 — 3 секунды). Все  перечисленные виды анимации  позволяют изменять   анимируемые  свойства равномерно, разбивая приращение по заданному интервалу времени.

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

·                   SpeedRatio  —  это  свойство  позволяет ускорить  анимацию  в   n  раз.

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

·                   AutoReverse — это свойство принимает булевское значение и позволяет определитьнеобходимостьвыполненияанимациивобратномпорядке.При этом если продолжительность анимации — 5 секунд, то с установленным  свойством AutoReverse в   true  общая  продолжительность анимации составит 10 секунд.

·                   RepeatBehavior — последнее свойство,  которое позволяет  установить возможность повторения анимации.  Тут  возможны   нижеследующие значения.

·                   Время в секундах — после прохождения промежутка времени, заданного здесь, анимация будет запускаться повторно.

·                   Forever — запускает анимацию повторно сразу после ее окончания.

·                   Nx — тут N необходимо заменить на число, определяющее количество повторений анимации. Буква х была добавлена,  чтобы не путать это значение со временем в секундах.

Поскольку  в   одном  объекте  могут  анимироваться сразу  несколько  свойств, объекты   анимации   не  могут  быть  «беспризорными».   Чтобы  объединить нужное количество объектов анимации, используется специальный объект типа StoryBoard. В его задачи входит контроль и запуск анимации. Кроме того, он использует  два  зависимых свойства  StoryBoard.TargetName  и  StoryBoard. TargetProperty для определения имени объекта, по отношению к  которому направлена анимация, и имени свойства, которое будет анимироваться.

Вот пример определения объекта StoryBoard, который содержит  лишь одну анимацию.

<Storyboard>

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

</Storyboard>

Разобравшись с  типами  анимации,  рассмотрим,  каким  образом  можно  её запускать.

Запуск анимации

Для запуска анимации существует  два механизма:

·                   запуск анимации с помощью XAML в момент загрузки объекта;

·                   запуск анимации из кода на C#.

Чтобы реализовать запуск анимации из XAML, достаточно определить элемент EventTrigger, который размещен в  коллекции Triggers  нужного нам элемента управления. Если  триггер  позволяет   реагировать на  какое-то  событие,  то EventTrigger дает возможность реагировать на событие, связанное с элементом управления. Несмотря на наличие коллекции Triggers у каждого из визуальных элементов  управления, в   WinRT существует только  EventTrigger,  способный реагировать лишь  на  событие  Loaded  (указывается  UserControl.Loaded или Контейнер.Loaded, например Canvas.Loaded).  Рассмотрим небольшой пример заполнения триггера нашей анимацией.

<Button x:Name="myButton" Canvas.Top="0" Canvas.Left="0" Width="100" Height="50" Content="Hello">

<Button.Triggers>

<EventTrigger RoutedEvent="UserControl.Loaded">

<BeginStoryboard>

<Storyboard>

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

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

Второй способ, который является более универсальным, — это  размещение объекта  StoryBoard  в   ресурсах,  связанных с  элементом  или  приложением, с  последующим  запуском  из   управляемого   кода.   Этот  способ  наиболее универсальный и  гибкий,  так  как  позволяет запустить  анимацию  в   момент любого события. Чтобы  управлять объектом StoryBoard из кода, существует несколько простых методов:

·                   Begin

·                   Stop

·                   Pause

Кроме этих методов, существует очень полезное событие Completed, которое позволяет определить момент завершения анимации.

Анимация с помощью ключевых кадров

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

·                   DoubleAnimationUsingKeyFrames

·                   PointAnimationUsingKeyFrames

·                   ColorAnimationUsingKeyFrames

Таким образом, к названию стандартных типов анимации был добавлен суффикс

UsingKeyFrames.

Рассмотрим пример использования DoubleAnimationUsingKeyFrames.

<Storyboard>

<DoubleAnimationUsingKeyFrames Duration="0:0:5" AutoReverse="True" Storyboard.TargetName="myButton" Storyboard.TargetProperty="(Canvas.Left)">

<LinearDoubleKeyFrame KeyTime="0:0:2" Value="70"></LinearDoubleKeyFrame>

<LinearDoubleKeyFrame KeyTime="0:0:5" Value="100"></LinearDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

Как  видно из  кода,  линейное  приращение  задается  с  помощью  объектов LinearDoubleKeyFrame. В данном случае они задают перемещение кнопки на 70 единиц за первые две секунды и на 30 единиц за следующие три секунды.

Кроме        LinearDoubleKeyFrame,        мы        могли        бы        использовать DiscreteDoubleKeyFrame  или  SplineDoubleKeyFrame.   Первый из  объектов задает  дискретное  приращение  свойства,  то  есть  объект  начнет  двигаться прыжками.  Второй  из  объектов   анимации  задает  изменение  свойства   по математическому закону, используя кривую Безье.

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

В   рассмотренном  классе   объектов   анимации   существует еще   один   тип анимации  —  ObjectAnimationUsingKeyFrame,  способный   изменять  любые свойства у любого объекта. Тут поддерживается лишь дискретный набор кадров, требующий задать состояние объекта в  желаемые промежутки времени, без возможности автоматического приращения свойств (ведь тип свойства может не укладываться в поддерживаемые).

Простая анимация

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

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

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

<UserControl x:Class="SilverlightApplication52.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300" Loaded="UserControl_Loaded">

<UserControl.Resources>

<Storyboard x:Name="sb1">

<DoubleAnimation From="0" To="250" Storyboard.TargetName="el1" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:5">

<DoubleAnimation.EasingFunction>

<BounceEase Bounces="10" EasingMode="EaseOut" Bounciness="2">

</BounceEase>

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</UserControl.Resources>

<Canvas x:Name="LayoutRoot" Background="White">

<Ellipse Fill="Blue" Width="50" Height="50" x:Name="el1"></Ellipse>

</Canvas>

</UserControl>

Как   видите,  была  использована BounceEase   —   функция   с   затухающей амплитудой, позволяющая реализовать «прыжки» мячика.

На текущий  момент существует 11 простых функций  анимации. Вот  полный список:  ExponentialEase,  PowerEase,  QuadraticEase,   BackEase,  BounceEase, CircleEase, CubicEase, ElasticEase, QuarticEase, QuinticEase, SineEase.

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

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

  • Комментарии