Анимация. Часть 2.

Итак, если проверить ролик (Ctrl+Enter), мы увидим появление текста логотипа.

Далее реализуем появление квадратика. Он представляет собой клип маски с именем mcMask.

Добавим еще одну строку.

code mcMain [frame 1]
7 TweenNano.from(mcLogo.mcMask, 0.5, { delay: 0.6, overwrite: false, _x: «+300»,
_rotation: «+180», ease: Sine.easeOut });

Анимация начинается с 0.6 секунды, т.е. после того, как появится текст.

Чтобы клип логотипа появлялся в центре, а потом поднялся вверх, добавим:

code mcMain [frame 1]
8 TweenNano.from(mcLogo, 0.8, { delay: 1.5, overwrite: false, _y:180, ease: Back.easeInOut });

Рассмотрим одну особенность.

Например, мы хотим, чтобы клип с именем mc передвинулся вправо в значение 300 px по оси x (рисунки 26-27).

Рисунок 26. Начальное положение

Рисунок 27. Необходимо получить

К решению этой задачи можно подойти несколькими способами. Поставить клип как на рисунке 26. Задать анимацию в абсолютных координатах.

code пример
TweenNano.to(mc, 1, { _x: 300 }); //движение строго в координату 300 px

Либо в относительных:

code пример
TweenNano.to(mc, 1, { _x: «+250» }); //движение вправо на 250 px

В первом случае клип попадет в координату 300 px независимо от начальной координаты, во втором — к начальной координате (50 px) прибавится значение 250 px.

Но можно поставить клип как на рисунке 27 и использовать конструкцию с from.
Также можно задать анимацию в абсолютных единицах:

code пример
TweenNano.from(mc, 1, { _x: 50 }); //движение строго из координаты 50 px

Либо относительных:

code пример
TweenNano.from(mc, 1, { _x: -250 });

Применение того или иного способа зависит от конкретных условий.

Весь код первого кадра:

code mcMain [frame 1]
1 stop();
2 import com.greensock.*;
3 import com.greensock.easing.*;
4
5 function Play() { play(); }
6
7 TweenNano.from(mcLogo.mcText, 0.4, { delay: 0.1, overwrite: false, _alpha:0,
ease: Sine.easeOut });
8  TweenNano.from(mcLogo.mcMask, 0.5, { delay: 0.6, overwrite: false, _x:«+300»,
_rotation: «+180», ease: Sine.easeOut });
9 TweenNano.from(mcLogo, 0.8, { delay: 1.5, overwrite: false, _y:180, ease: Back.easeInOut,
onComplete: Play });

В последней строке добавилось событие onComplete.

  • onComplete событие окончания анимации. Т.е. при завершении анимации, прописанной в 9 строке (анимация начнется с 1.5 секунды и длится 0.8 секунды), произойдет вызов функции Play. При вызове функции Play (5-ая строка) выполнится код play(), т.е. ролик начнет проигрываться.

Вот что у нас получается.

Перейдем во второй кадр.

В слое mcAdd есть клип с таким же именем. Клип белого цвета. Переход от картинки к картинке я планирую сделать через эффект «высветления». Для этого выделим клип mcAdd, зайдем в его Properties → Display → Blending → Add. Таким образом при изменении свойства Alpha этого клипа получится наложение, как на рисунке 28.

Пропишем во втором кадре следующий код:

code mcMain [frame 2]
1 stop();
2 import com.greensock.*;
3 import com.greensock.easing.*;

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

Рисунок 28. Режим наложения Add

Автор: Юрий Гусак.