Раскадровки и ключевые кадры

Expression Blend --- Основы работы --- Раскадровки и ключевые кадры

Создание новой раскадровки

Анимания на платформе WPF или Silverlight фиксируется в формате XAML с использованием раскадровки. Следовательно, когда возникает потребность в получении новой анимационной последовательности, вы должны начинать с создания новой раскадровки на панели Objects and Timeline. С этой целью щелкните на кнопке New со знаком + на пиктограмме:

Как только вы щелкнете на этой кнопке, вам будет предложено присвоить новой раскадровке особое имя, например AnimateCircle (анимация круга). Присваивание имени раскадровке имеет большое значение, поскольку по этому имени вам придется манипулировать анимацией как в коде, так и в разметке XAML.

Следует также иметь в виду, что новая раскадровка анимации сохраняется в Expression Blend в качестве ресурса в текущем объекте типа UserControl на платформе Silverlight или объекте типа Window на платформе WPF. Так, если вы откроете окно для просмотра содержимого монтажного стола в коде XAML, то обнаружите следующую разметку:

<UserControl.Resources>
	<Storyboard x:Name="AnimateCircle"/>
</UserControl.Resources>

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

Управление имеющимися раскадровками

Создав новый объект раскадровки, например AnimateCircle, вы сразу же обнаружите его в списке, раскрывающемся на панели Objects and Timeline. В связи с тем что в одном объекте типа Window или UserControl можно нередко обнаружить довольно большое количество раскадровок, отвечающих за анимацию разных объектов, отдельную раскадровку следует выбирать для правки, используя именно этот раскрывающийся список на панели Object and Timeline.

Следует также иметь в виду, что раскадровки можно искать по имени аналогично поиску нужных средств в библиотеке ресурсов и на панели Properties, выбрав вариант Search из того же самого раскрывающегося списка:

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

Ввод ключевых кадров анимации

Создав новую раскадровку или выбрав уже имеющуюся для последующей правки, можете приступать к вводу любого количества ключевых кадров анимации в редакторе временной шкалы. Исследуя текущий пример, обратите внимание на желтую вертикальную линию напротив нульсекундной отметки анимации. Эта линия обозначает текущий момент времени анимации в данной раскадровке. Прямо над этой желтой линией находится яйцевидная пиктограмма со знаком + справа от нее. Она обозначает кнопку Record Keyframe (Записывать ключевой кадр). Если щелкнуть на этой кнопке, в текущий момент анимации будет введен ключевой кадр.

Вводя ключевой кадр, вы должны держать в уме объект, выбранный в настоящий момент на панели Objects and Timeline. Дело в том, что в одной раскадровке можно управлять анимацией целого ряда объектов, находящихся на монтажном столе, а следовательно, в один и тот же момент времени может присутствовать несколько ключевых кадров анимации. Что же касается рассматриваемого здесь примера, то непременно выберите созданный вами ранее объект типа Ellipse и щелкните на кнопке Record Keyframe, чтобы ввести новый ключевой кадр на нульсекундной отметке анимации, как показано на рисунке:

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

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

Фиксация изменений в свойствах объектов

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

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

Далее следует самое интересное. Убедитесь сначала в том, что на монтажном столе выбран объект типа Ellipse, а затем воспользуйтесь панелью Properties и монтажным столом, чтобы внести ряд изменений в состояние этого объекта. В частности, можете выделить объект типа Ellipse и переместить его в новое положение на монтажном столе. При этом появится небольшая пунктирная линия, обозначающая расстояние, на которое был перемещен объект.

Кроме того, можете выбрать новый цвет заливки в свойстве Fill объекта типа Ellipse посредством редактора кистей или внести изменения в свойства Height и Width, перейдя к области Layout на панели Properties. Аналогичным образом внесите еще три или четыре изменения в состояние объекта типа Ellipse. На рисунке показано как выглядит объект myCircle по достижении двухсекундной отметки анимации:

Проверка анимации

Теперь можете проверить созданную вами анимацию, щелкнув на кнопке Play, находящейся в области инструментов на временной шкале:

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

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

Просмотр разметки анимации

Прежде чем двигаться дальше, уделите время просмотру исходной разметки, автоматически сформированной в коде XAML средствами Expression Blend IDE. Как видите, элемент разметки <Storyboard> заполнен целым рядом новых подчиненных элементов, определяющих порядок анимации объекта типа Ellipse. Не вдаваясь в подробности этой разметки следует все же обратить внимание на то, что объекту анимации (в данном случае ColorAnimationUsingKeyFrames) известно, свойства каких именно объектов должны изменяться и в какие именно моменты анимации это должно происходить. Для первой цели служат свойства TargetProperty (Свойство целевого объекта) и TargetName (Имя целевого объекта), а для второй - свойство KeyTime (Время наступления ключевого кадра) объекта анимации:

<UserControl.Resources>
		<Storyboard x:Name="AnimateCircle">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="193"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ellipse">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="28.5"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ellipse">
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.477"/>
			</DoubleAnimationUsingKeyFrames>
			<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="ellipse">
				<EasingColorKeyFrame KeyTime="0" Value="#FFED1818"/>
				<EasingColorKeyFrame KeyTime="0:0:2" Value="#FFA7ED18"/>
			</ColorAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="ellipse">
				<EasingDoubleKeyFrame KeyTime="0" Value="0.003"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="ellipse">
				<EasingColorKeyFrame KeyTime="0" Value="#FF520707"/>
				<EasingColorKeyFrame KeyTime="0:0:2" Value="#FFED1313"/>
			</ColorAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>