3. Проверка: запуск приложения в браузере

Перед тем как перейти к более сложной части работы, следует убедиться, что на данном этапе всё работает правильно. Вернитесь на страницу MainPage, выделите фрейм, и среди его свойств на вкладке Common Properties задайте Source, выбрав из выпадающего списка имя страницы AnimatePosition.xaml.

Запустите проект (меню Project - Run или F5). При этом все файлы проекта автоматически сохранятся, произойдёт компиляция, создастся xap-архив с Silverlight-приложением и тестовая страница TestPage.html, которая содержит HTML-элемент object, ссылающийся на xap-архив. Страница TestPage.html будет открыта в браузере, и вы должны увидеть главную страницу с заголовком и фреймом, в котором расположены созданные вами в данной части работы текстовый блоки.

В адресной строке браузера находится адрес такого вида:

http://localhost:1874/TestPage.html#/AnimatePosition.xaml

Во-первых, следует отметить, что был запущен веб-сервер Microsoft Expression Development Server - это позволяет тестировать приложения в условиях, приближенных к реальным. Хотя данное приложение вполне будет запускаться и путём простого открытия тестовой страницы из файловой системы в любом браузере.

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

Часть 3. Создание анимации перемещений объектов

1. Создание элемента StoryBoard

Нажмите кнопку "+" на панели Objects and Timeline (в которой находится дерево объектов). В появившемся окне дайте создаваемому элементу понятное имя, например, sbAppearance (рис. 20.12).

Рис. 20.12. Кнопка для добавления объекта StoryBoard

Рядом с деревом объектов появилась временная шкала анимации, а в окне конструктора появилась надпись "sbAppearance timeline recording is on", т.е. происходит запись StoryBoard. Когда запись включена, все манипуляции в окне конструктора и на панели свойств приобретают другой смысл: статические (исходные) состояния объектов не изменяются - вместо этого происходит фиксация изменения свойств с привязкой к моменту времени, указываемому курсором. Если требуется изменить начальные состояния, выключите запись (красная круглая кнопка рядом с надписью).

2. Запись анимации

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

Установите курсор временной шкалы на момент, когда анимация должна закончиться (например, полторы секунды), выделите текстовые блоки в дереве объектов и нажмите кнопку "Record Keyframe" (записать ключевой кадр). На шкале появятся отметки напротив имени каждого из блоков, символизируя записанные кадры (рис. 20.13).

Рис. 20.13. Отображение записанных кадров на временной шкале

На самом деле, ещё ничего не записано, поскольку не ясно, что будет меняться в анимации. Переместите курсор на начало временной шкалы и задайте начальное состояние анимации: блоки разнесите в разные стороны за пределы страницы (пользуясь инструментом Selection), а на вкладке Appearance панели свойств обнулите непрозрачность (Opacity). Просмотрите анимацию в действии, нажав кнопку Play на временной шкале.

Линейную функцию перемещения между двумя указанными позициями можно модифицировать. Выберите маркеры, соответствующие окончанию анимации, на временной шкале (обведите их нажатой клавишей мыши, удерживая Ctrl). На панели свойств выберите функцию замедления анимации (Easing Function). Функции в группе In влияют на начало анимации; Out - на окончание; InOut - на то и другое. Функция Bounce даёт эффект пружины, который можно несколько ослабить увеличением параметра Bounciness (рис. рис. 20.14).

Рис. 20.14. Выбор и настройка функции замедления анимации

Добьёмся теперь поочерёдного "вылета" блоков. Пусть, например, "вылет" каждого блока длится полсекунды - для этого следует изменить позиции маркеров на временной шкале. Маркеры окончания достаточно просто переместить мышью: первый на 0.5 сек от начала, а второй - на 1 сек. Маркеры начала тоже можно переместить, но тогда поведение объектов начиная от нулевой отметки будет определяться их исходным, статическим состоянием. Поэтому вместо этого создадим новые маркеры (ключевые кадры) следующим образом: выделите блок, который "вылетает" вторым, установите курсор на 0.5 сек (время его "вылета") - при этом в конструкторе будет отображено интерполированное состояние его позиции и непрозрачности - и верните блок на место (траектория движения его центра показана в конструкторе тонкой точечной линией), а также сделайте его прозрачным. Аналогично поступите и с последним блоком (или блоками - если общее количество больше трёх).

Проверьте анимацию в действии, нажав кнопку Play.