Anthill Game Framework

Tiny framework for creating Flash games.

Инструменты пользователя

Инструменты сайта


guide:tween

Твинер

В состав Anthill, начиная с версии 0.3, входит плагин твинера, позволяющего создавать различные программные анимации. Реализация твинера позаимствована у Starling Framework и в использовании практически ничем не отличается от оригинального.

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


Использование твинера

Для использования твинера первым делом нужно его создать и указать объект, к которому будут применяться трансформации:

var tween:AntTween = new AntTween(this, 1, AntTransition.EASE_OUT);
tween.moveTo(100, 100);
tween.start();

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

Во второй строке мы указываем, какие атрибуты объекта будут анимироваться. В данном примере мы используем стандартный метод moveTo() который задает анимацию для переменных x и y нашего объекта. Но вы можете задать анимацию для любых числовых атрибутов используя метод animate():

tween.animate("alpha", 1);

Данная строка определяет трансформацию переменной alpha для нашего объекта, таким образом мы создаем плавное появление объекта. А если изменить значение с 1 на 0, то получится плавное исчезновение объекта.

Предположим, что нам необходимо плавно сдвинуть объект в одной плоскости. В таком случае вместо метода moveTo() мы можем написать следующее:

tween.animate("y", 100);

Созданный экземпляр твинера можно использовать многократно, но прежде, чем его использовать повторно, следует вызвать метод reset():

tween.reset(this, 0.5, AntTransition.EASE_IN);

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

При использовании твинера мы можем задавать произвольное количество атрибутов для анимации, например:

tween.animate("x", 200);
tween.animate("alpha", 1);
tween.animate("angle", 90);
tween.start();

Данный код задает сразу несколько атрибутов, которые будут одновременно изменены за указанный промежуток времени с указанным эффектом. По мимо этого вы можете создавать последовательные анимации с использованием нескольких твинеров, связанных последовательно, например:

// Создаем первый твин.
Var tween1:AntTween = new AntTween(this, 1, AntTransition.EASE_OUT);
tween1.moveTo(100, 150);
 
// Создаем второй твин.
Var tween2:AntTween = new AntTween(this, 0.5, AntTransition.EASE_IN);
tween2.animate("alpha", 0);
 
// Задаем второй твин как следующий для первого
tween1.nextTween = tween2;
tween1.start();

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


Кэширование твинов

Начиная с версии 0.3.3 доступна возможность переиспользования созданных ранее экземпляров твинов — это будет особенно актуально для игр где используется большое количество твиновых анимаций.

В обновленной версии все ранее использованные твины автоматически помещаются в кэш после того как заканчивают свою работу. Чтобы извлечь свободный твин из кэша, следует вызывать статический метод AntTween.get() и в качестве аргументов передать объект, время выполнения и тип анимации — точно так же как это делается при создании твина. Например:

var myTween:AntTween = AntTween.get(this, 0.5, AntTransition.EASE_IN);

Если в кэше не будет свободных для использования твинов, то автоматически будет создан новый экземпляр твина. Чтобы запретить автоматическое кэширование твина после завершения его работы, установите флаг autocaching равный FALSE.

myTween.autocaching = false;

Так же, по умолчанию при автоматическом кэшировании твина, все ваши настройки для него обнуляются: сбрасываются слушатели для событий, обнуляется указатель на объект и т.п. Чтобы запретить сброс настроек твина при его автоматическом кэшировании, просто установите флаг autocachingReset равный FALSE.

myTween.autocachingFalse = false;

Вы можете вручную помещать более не нужные вам твины в кэш используя статический метод AntTween.set(myTween, true) — где последний флаг определяет следует ли сбросить настройки для указанного твина.


Пользовательские анимации

Внимание: Раздел пользовательские анимации не закончен.

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

Перейдя по этой ссылке FIXME, вы найдете замечательный визуальный генератор твиновых анимаций, а точнее редактор формул для получения нужного эффекта программой анимации. Далее, все что от вас требуется — это следовать одному простому правилу: ваш метод должен принимать один аргумент, который определяет текущий прогресс в промежутке от 0 до 1. То есть фактически это пройденный путь в процентах.

function myTransition(aRatio:Number):void 

Предположим, что вы сгенерировали такую форму в генераторе представленном по ссылке выше:

// Пример не подготовлен...

Как можно видеть, метод, использующий данную формулу, принимает 4 аргумента, поэтому нам нужно немного переработать этот метод следующим образом:

// Пример не подготовлен...

Пояснение…

Теперь, чтобы добавить поддержку нашего метода в твинер, нам нужно его зарегистрировать в классе AntTransition под уникальным именем, используя метод register():

AntTransition.register("myTweenAnim", myTweenAnim);

После чего мы можем его использовать следующим образом:

var tween:AntTween = new AntTween(this, 1, "myTweenAnim");

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


guide/tween.txt · Последние изменения: 20.09.2013 22:13 — Anton Karlov