Главная » Silverlight » Анимация на основе ключевых кадров

0

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

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

<PointAnimation Storyboard.TargetName="ellipseBrush" Storyboard.TargetProperty="GradientOrigin" From="0.7,0.3" To="0.3,0.7" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever"

</PointAnimation>

Объект PointAnimation можно заменить эквивалентным объектом Point- Animat’ionUsingKeyFrames.

<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipseBrush" Storyboard.TargetProperty="GradientOrigin" AutoReverse="True" RepeatBehavior="Forever" > <LinearPolntKeyFrame Value="0.7,0.3" KeyTime="0:0:0"> </LinearPointKeyFrame>

<LinearPointKeyFrame Value="0.3,0.7" KeyTime="0:0:10"> </LinearPointKeyFrame>

</PointAnimationUsingKeyFrames>

В данной анимации применяется два ключевых кадра. Первый устанавлива­ет значение Point, когда анимация запускается. Если нужно использовать текущее значение, установленное в кисти RadialGradientBrush, первый ключевой кадр мож­но опустить. Второй ключевой кадр определяет конечное значение, достигаемое че­рез 10 секунд. Для плавного перехода от первого ключевого кадра ко второму объект PointAnimationUsingKeyFrames применяет линейную интерполяцию, так же как объект PointAnimation для перехода от значения From к значению То.

Примечание. В каждой анимации на основе ключевых кадров используется собственный объект анимации (например, LinearPointKeyFrame). Разные классы анимации почти ничем не отличаются друг от друга. Все они содержат свойство value, в котором хранится целевое значение, и свойство KeyTime, указывающее, когда кадр достигает целевого значения. Единственное отличие между ними состоит в типе свойства Value. В классе LienarPointKeyFrame используется тип Point, в классе DoubleKeyFrame — вещественный тип с двойной точностью и т.д.

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

<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipseBrush" Storyboard.TargetProperty="GradientOrigin"

RepeatBehavior="Forever" > <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"> </LinearPointKeyFrame>

CLinearPointKeyFrame Value="0.3, 0.7" KeyTime="0:0:5"> </LinearPointKeyFrame>

CLinearPointKeyFrame Value="0.5,0.9" KeyTime="0:0:8"> </LinearPointKeyFrame>

<LinearPointKeyFrame Value="0.9,0.6" KeyTime="0:0:10"> </LinearPointKeyFrame>

<LinearPointKeyFrame Value="0.8,0.2" KeyTime="0:0:12"> </LinearPointKeyFrame>

CLinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:14"> </LinearPointKeyFrame>

</PointAnimationUsingKeyFrames>

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

Дискретные ключевые кадры

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

Классы ключевых кадров с линейной интерполяцией имеют имена в форме Linear тип_ данныхKeyFrame, а классы дискретных ключевых кадров — в форме Descrete™n_ данныхКеуРгате. Ниже приведена версия примера с кистью RadialGradientBrush, в ко­торой применены дискретные ключевые кадры.

<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipseBrush" Storyboard.TargetProperty="GradientOrigin" RepeatBehavior="Forever" > <DiscretePointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.3,0.7" KeyTime="0:0:5"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.5,0.9" KeyTime="0:0:8"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.9,0.6" KeyTime="0:0:10"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.8,0.2" KeyTime="0:0:12"></DiscretePointKeyFrame> <DiscretePointKeyFrame Value="0.7,0.3" KeyTime="0:0:14"></DiscretePointKeyFrame>

</PointAnimationUsingKeyFrames>

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

Все классы анимации на основе ключевых кадров поддерживают дискретные клю­чевые кадры, но только некоторые из них поддерживают ключевые кадры с линейной интерполяцией. Это зависит от типа данных. Типы, поддерживающие ключевые кадры с линейной интерполяцией, поддерживают также линейную интерполяцию в обычных анимациях и предоставляют классы тип_данныхAnіmatіоn. К ним относятся типы Point, Color и вещественный с двойной точностью. Не относится к ним только объектный анимируемый тип, не поддерживающий линейную интерполяцию. Анимация объект­ного типа выполняет не плавное изменение, а скачкообразную замену старого значения новым на основе дискретных ключевых кадров.

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

Смягчение ключевых кадров

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

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

EasingDoubleKeyFrame, EasingColorKeyFrame и EasingPointKeyFrame. Каждый работа­ет так же, как его линейный аналог, но предоставляет еще и дополнительное свойство

EasingFunction.

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

<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipseBrush" Storyboard.TargetProperty="GradientOrigin" RepeatBehavior="Forever" > <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0">

</LinearPointKeyFrame> <EasingPointKeyFrame Value="0.3,0.7" KeyTime="0:0:5"> <EasingPointKeyFrame.EasingFunction>

<CircleEase></CircleEase> </EasingPointKeyFrame.EasingFunction> </EasingPointKeyFrame>

<LinearPointKeyFrame Value="0.5,0.9" KeyTime="0:0:8">

</LinearPointKeyFrame> <LinearPointKeyFrame Value="0.9,0.6" KeyTime="0:0:10">

</LinearPointKeyFrame> CLinearPointKeyFrame Value="0.8,0.2" KeyTime="0:0:12">

</LinearPointKeyFrame> CLinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:14"> </LinearPointKeyFrame> </PointAnimationUsingKeyFrames>

Объединение ключевых кадров со смягчением — удобный способ создания сложных анимаций, однако он не предоставляет полного контроля над процессом. Для получе­ния более полного контроля можно создать математическую формулу на основе сплай­нов, управляющую анимацией. Эта технология рассматривается в следующем разделе.

Сплайновые ключевые кадры

Существует еще один вид ключевых кадров — сплайновые. Каждый класс, поддер­живающий линейные ключевые кадры, поддерживает также сплайновые ключевые кадры. Имена их классов имеют форму Splineтип_данныхКеуFrame.

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

В главе 8 кривая Безье определяется с помощью четырех точек: начальной, ко­нечной и двух управляющих. В случае сплайновых ключевых кадров начальная точ­ка всегда имеет координаты 0, 0, а конечная — 1,1. Следовательно, нужно задать две управляющие точки. Созданная таким образом кривая описывает зависимость аними- рованного значения (ось Y) от времени (ось X).

Ниже приведен пример, демонстрирующий использование сплайновых ключе­вых кадров. В примере сравниваются два разных закона движения двух эллипсов по контейнеру Canvas. В первом эллипсе используется анимация DoubleAnimation; движение выполняется медленно и равномерно. Во втором эллипсе использует­ся анимация DoubleAnimationUsingKeyFrames с двумя онлайновыми объектами SplineDoubleKeyFrame. Обе анимации достигают конечной точки в один и тот же мо­мент времени (через 10 секунд после запуска), однако во второй анимации (верхний эл­липс) движение неравномерное: сначала эллипс перемещается медленно, затем быстро.

<DoubleAnimation Storyboard.TargetName="ellipsel" Storyboard.TargetProperty="(Canvas.Left)" To="500" Duration="0:0:10">

</DoubleAnimation>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Canvas.Left)" > <SplineDoubleKeyFrame KeyTime="0:0:5" Value="250" KeySpline="0.25,0 0.5,0.7"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="0:0:10" Value="500" KeySpline="0.25,0.8 0.2,0.4"></SplineDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

Максимальное ускорение второй (верхний) эллипс получает на шестой секунде, ког­да включается второй объект SplineDoubleKeyFrame. Его первая управляющая точка расположена далеко вдоль оси Y. Значение вдоль оси X, представляющей время, неболь­шое. В результате эллипс на шестой секунде быстро перемещается вперед (дергается), а потом замедляется.

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

Рис. 10.11. Графики движения верхнего эллипса, управляемого двумя сплайновыми кадрами

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

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