Инерционность движения

Expression Blend --- Основы работы --- Инерционность движения

Надеюсь, что, дойдя до этой статьи, вы вполне освоились с основными средствами и способами создания анимации в Expression Blend и теперь ясно представляете себе следующее:

• Общее назначение анимации на платформах WPF и Silverlight, которое состоит в изменении значений свойств объектов во времени.

• Назначение объекта раскадровки, которое состоит в связывании объектов, изменении их свойств и временных промежутков анимации.

• Использование панели Objects and Timeline для создания новой раскадровки и ключевых кадров.

• Использование монтажного стола для изменения значений свойств объектов в режиме редактирования анимации на временной шкале.

• Управление анимацией по раскадровке в коде.

• Управление анимацией по раскадровке с помощью триггеров на платформе WPF.

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

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

Как и прежде, начните с создания нового проекта, но на этот раз — приложения Silverlight, присвоив ему имя AnimationEasingEffects. Как и в остальных примерах проектов, рассматривавшихся ранее, ваша первая задача — определить ряд объектов, а затем — ряд раскадровок для их анимации. Следуя рассматриваемому здесь примеру, нарисуйте три элемента пользовательского интерфейса на монтажном столе и присвойте им подходящие имена на панели Properties. Это могут быть любые графические элементы, но для данного примера выбраны формы крута, треугольника и многоугольника.

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

Следующая ваша задача состоит в создании отдельных раскадровок DropAndBounceBall (падающий и отскакивающий шар), RubberbandTriangle (треугольник, растягивающийся, как резиновая лента) и HoverAndCrashPoly (повисающий и разбивающийся многоугольник). В этой анимационной последовательности будет воспроизведено движение объекта типа Ellipse от исходной точки к зоне приземления. Итак, применяя способы рассматривавшиеся ранее, настройте раскадровку DropAndBounceBall для фиксации этого движения в течение четырех секунд. Для этого просто переместите объект типа Ellipse в новое положение в режиме регистрации его движения.

Аналогичным образом создайте раскадровки RubberbandTriangle и HoverAndCrashPoly. Для этого переместите два оставшихся объекта от исходной точки к зоне приземления в течение четырех секунд (опять же в режиме регистрации их движения). По завершении проверьте полученные в итоге анимационные последовательности, выбрав сначала раскадровку по ее имени на панели Objects and Timeline, а затем щелкнув на кнопке Play.

Выберите раскадровку DropAndBounceBall на панели Objects and Timeline и щелкните на кнопке с яйцевидной пиктограммой, обозначающей завершающий ключевой кадр анимации на временной шкале. Аналогично выбору объекта на монтажном столе, после щелчка непосредственно на нужном ключевом кадре в редакторе анимации на панели Properties появляется ряд настраиваемых свойств. Как только вы щелкнете на ключевом кадре, на панели Properties появится область Easing (Инерционность движения), где по умолчанию выбирается кнопка EasingFunction (Функция инерционности движения). В настоящий момент ни один из эффектов инерционности движения в данном ключевом кадре не применяется.

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

• Варианты, перечисленные в столбце In, означают применение выбранного эффекта в начальной части ключевого кадра.

• Варианты, перечисленные в столбце Out, означают применение выбранного эффекта в завершающей части ключевого кадра.

• Варианты, перечисленные в столбце InOut, означают применение выбранного эффекта как в начальной, так и в завершающей части ключевого кадра.

Если вы раскроете список EasingFunction, то обнаружите в нем целый ряд встроенных в Expression Blend эффектов инерционности движения и их функций. Итак, выберите для данного ключевого кадра раскадровки DropAndBounceBall эффект Bounce (Отскакивание) в столбце Out (В конце). Выбрав нужный эффект инерционности движения, можете далее настроить его на панели Properties.

Предварительно убедившись в том, что на панели Objects and Timeline выбрана раскадровка DropAndBounceBall, проверьте применение эффекта инерционности движения в анимации падающего и отскакивающего шара, щелкнув на кнопке Play. Продолжите экспериментирование с эффектом Bounce Out, а еще лучше — опробуйте в ознакомительных целях ряд других эффектов.

Выберите вторую раскадровку (в данном примере — RubberbandTriangle) и щелкните на завершающем ключевом кадре анимации. На этот раз попробуйте применить эффект инерционности движения Elastic In (Упругость в начале), у которого имеются интересные свойства Oscillations (Колебания) и Springiness (Пружинистость):

И на этот раз проверьте полученные результаты, щелкнув на кнопке Play панели Objects and Timeline.

Редактор ключевых сплайнов

Преимущество встроенных в Expression Blend эффектов инерционности движения в анимации заключается в том, что они позволяют оперативно внедрять распространенные физические явления и свойства в анимационную последовательность. Если же вам требуется более точная настройка подобных эффектов, воспользуйтесь для этой цели редактором ключевых сплайнов (KeySpline).

В качестве упражнения выберите объект завершенной раскадровки на панели Objects and Timeline и щелкните сначала на последнем ключевом кадре анимации, а затем на кнопке KeySpline. В итоге откроется новая область с редактором ключевых сплайнов, где можно откорректировать изменение скорости движения объекта по мере его приближения к данному ключевому кадру. Итак, откорректируйте значения координат x1, х2, y1 и у2, переместив отдельные ползунковые элементы управления или щелкнув и перетащив желтую управляющую точку, но принимая во внимание следующее:

• Чем круче линия ключевого сплайна, тем быстрее изменяется значение в данной точке.

• Когда линия ключевого сплайна становится прямой, проходящей из левого верхнего угла графика к правому верхнему его углу, интерполяция получается линейной во времени.

Надеюсь, вы согласитесь с тем, что описывать порядок настройки каждого эффекиа инерционности движения в анимации нет никакого смысла. Ведь количество настроек каждого из подобных эффектов довольно велико, а проиллюстрировать конечный результат их применения крайне проблематично. Поэтому дальнейщее изучение различных эффектов инерционности движения в анимации вам придется продолжить самостоятельно, обратившись за справкой к разделу "Change animation interpolation between keyframes" руководства пользователя Expression Blend: