Add to Technorati Favorites

Ну что продолжим с вами знакомиться с практической частью создания Silverlight. И так как я отношусь по большой части к дизайнером, то больше всего меня интересует создание анимации, чем сегодня с вами и займемся. Так как мы только знакомимся с вами с этой программой, то сегодня попробуем сделать с вами очень простую анимацию в буквально несколько кадров.
Запускаем наш Expression Blend 2, создаем новый проект (кто не занеет как, смотрим тут). Выбираем инструмент - Перо, и рисуем кривую похожую на морскую волну
Animation SilverLight

Затем откройте вкладку Properties, и выберите для заливки соответствующий синий цвет, у нас же все-таки волна должна получиться.
Animation SilverLight

Сейчас перейдем непосредственно к анимации, для этого в панели Object and TimeLine выбираем Create new Storyboard, нажав для этого “+”. В появившемся окне вводим название нашей шкалы,снимаем галочку с пункта Create as a Resource и нажимаем кнопку ОК.
Animation SilverLight

В панели Object and TimeLine мы видим, что появилась временная шкала (напоминает шкалу во Flash). Выбираем инструмент Direct Selection, перетягиваем ползунок на 1, и деформируем нашу волну, после этого опять перетягиваем, ползунок на значение 0, и нажимаем кнопку Record Keyframe, видим что появилось два кадра.
Animation SilverLight

Выделяем нулевой кадр копируем его и перетягивает шкалу на значение - 2, и вставляем туда первый кадр, можем сейчас попробывать проиграть анимацию. Однако у нас анимация прогрывается только один раз, чтоб поставить ее на зацикливание кликаем по наше шкале (на название шкалы - в нашем случае Wave), выделив ее, и в закладке Properties в поле RepeatBehavior вписываем значение Forever.
Animation SilverLight

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

Ну вот и произошло наше первое знакомстов с анимацией в SilverLights, с чем собственно всех и поздравляю)

Popularity: 50% [?]

Add to zakladki:
Нет Комментариев | Новости, Примеры | Вся статья

Leave a Reply

Ваш Комментарий * [b][/b] - [i][/i] - [u][/u]- [quote][/quote]