Программная анимация с помощью класса Tween. Action Script 3. Урок 6.

Снова привет всем, сегодня мы рассмотрим очередной урок по Action Script, достаточно интересный и несложный.


Урок 6. Класс Tween - программная анимация.

Сколько способов анимации во Flash мы знаем на данный момент?

• Вручную на Timeline;
• Анимация с помощью EnterFrame;
• При помощи таймера.

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

Итак, начнем с простого движения объекта. Двигать будем нарисованный программно объект.

var box:Sprite = new Sprite();
box.graphics.lineStyle(1);
box.graphics.beginFill(0x999999);
box.graphics.drawRect(0,150,50,50);
addChild(box);

var tween:Tween = new Tween(box,"x",None.easeNone,100,400,3,true);

Итак, смотрим, что же такого нового у нас добавилось.
Мы нарисовали объект с именем box. Затем создадим новую переменную с типом Tween, то есть с типом анимации. Эта переменная задаст ту самую анимацию, к которой мы стремимся. В скобках после ключевого слова new по порядку пишем свойства, которые покажут, что, как, куда и когда изменять. Свойства класса Tween:

1. Имя объекта для анимации. Указан объект box, который мы только что нарисовали и поместили на сцену.
2. Параметр объекта. Мы указали изменение координаты по оси x, то есть простое движение вправо или влево.
3. Тип замедления. Об этом чуть ниже, а пока оставим None.easeNone.
4. Дальше указываем начальное значение параметра, которого мы указали на втором месте.
5. Конечное значение параметра.
6. Время выполнения анимации. Может быть указано в секундах или кадрах - это мы определяем в следующем свойстве.
7. Значение boolean, указывающее на единицу измерения времени в предыдущем свойстве - если указано true - то в секундах, если false - то в кадрах. Мы указали true, поэтому вся анимация будет длиться 3 секунды.

Все, закрываем скобку, и тестируем ролик. Ошибка. Все верно, ведь просто так класс Tween использовать нельзя. Необходимо также предварительно его импортировать из библиотеки классов Flash. Добавляем пару строчек в начало кода и итоговый код такой.

import fl.transitions.*;
import fl.transitions.easing.*
var box:Sprite = new Sprite();
box.graphics.lineStyle(1);
box.graphics.beginFill(0x999999);
box.graphics.drawRect(0,150,50,50);
addChild(box);

var tween:Tween = new Tween(box,"x",None.easeNone,100,400,3,true);

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

tween.looping = true;

Где tween - это нами заданное имя этой анимации.


Хм, вам не кажется, что простая анимация перехода от одного места к другому немного скучновата? Хочется добавить каких-нибудь эффектов, например эффектов замедления, отскакивания, инерции. Оказывается, все это уже встроено в этот класс, и не надо создавать собственные классы с высчитыванием сложных физических формул(если конечно не придавать этому качественное, основательное значение). Однако для создания красивой анимации стандартных эффектов замедления вполне достаточно.

Итак, за эффекты замедления отвечает как-раз то третье свойство, которое мы выше указали как None.easeNone, т.е. убрали вообще всякий эффект.

Существует вообще 6 различных эффектов замедления, и 3 общих параметра на каждого. 

• None. Этот класс определяет равномерное движение объекта, без различных функций замедления.
• Regular. Определяет плавное торможение объекта перед точкой остановки  или ускорение после начала.
• Strong. Чуть резче, чем Regular.
• Back. Немного выезжает за пределы точки остановки, и затем возвращается.
• Elastic. Создает впечатление, будто объект на эластичной резинке и несколько колеблется.
• Bounce. Объект несколько раз подпрыгивает над точкой.

Каждый эффект еще можно обозначить по параметрам - проигрывать замедление в начале анимации (напр. Back.easeIn), в конце анимации (Back.easeOut) или и в конце и в начале (Back.easeInOut). Такое разнообразие даст возможности для различных эффектов анимации, от самых простых до сложных.
Разберем пример.

import fl.transitions.*;
import fl.transitions.easing.*

var box:Sprite = new Sprite();
box.graphics.lineStyle(1);
box.graphics.beginFill(0x999999);
box.graphics.drawRect(0,150,50,50);
addChild(box);

stage.addEventListener(KeyboardEvent.KEY_DOWN, rightF);
function rightF(e:KeyboardEvent):void {
if (e.keyCode==39) { // при нажатии на стрелку "вправо"
var tween1:Tween = new Tween(box,"x",Strong.easeOut,0,500,3,true); //передвигаем квадрат
}
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, leftF);
function leftF(e:KeyboardEvent):void {
if (e.keyCode==37) {//при нажатии на стрелку "влево"
var tween2:Tween = new Tween(box,"x",Strong.easeOut,500,0,3,true);//двигаем обратно
}
}

Теперь рассмотрим основные методы этого класса

stop и start как и у таймера, только start() начинает анимацию сначала.

stage.addEventListener(KeyboardEvent.KEY_DOWN, startF);

function startF(e:KeyboardEvent):void {

if (e.keyCode==32) {

tween1.start();

}

}

(при нажатии на пробел, анимация идет сначала).

looping() - это цикличное повторение анимации.

fforward() - это переход к конечному положению анимируемого объекта.

Отдельно рассмотрим метод yoyo() и вместе с ним событие Tween.

С изучением класса Tween мы рассмотрим новый вид события - TweenEvent, то есть функция будет выполняться при определенном положении анимации. Основные константы  этого события:

• MOTION_FINISH - функция выполняется, когда анимация закончилась.
• MOTION_START - функция выполняется, когда анимация началась.
• MOTION_STOP - функция выполняется, когда анимация приостановилась.

Итак, создаем слушатель событий, и функцию, в которой укажем метод yoyo() - как понятно из названия метода — он осуществляет движение "туда-обратно".

Полный код.

import fl.transitions.*;

import fl.transitions.easing.*;

var box:Sprite = new Sprite();

box.graphics.lineStyle(1);

box.graphics.beginFill(0x999999);

box.graphics.drawRect(0,150,50,50);

addChild(box);

var tween1:Tween = new Tween(box,"x",Regular.easeInOut,0,500,3,true);

tween1.addEventListener(TweenEvent.MOTION_FINISH, yoyoF);

function yoyoF(e:TweenEvent):void {

tween1.yoyo();

}

Как видно, мы добавили новый слушатель, и событие, которое будет осуществляться при окончании анимации tween1. Затем будет осуществляться метод yoyo(), который потянет наш объект обратно.

Этот класс достаточно несложен, однако позволяет придать анимации красивые эффекты и упростить сам процесс создания программной анимации.