quinta-feira, 11 de fevereiro de 2010

A biblioteca de animação TweenMax

Olá!


Eu estava precisando fazer uma animação em ActionScript sem poder usar a classe Animator, procurei então alguma biblioteca que fizesse isso e achei uma realmente boa: a TweenMax da GreenSock.

O método que vou explicar aqui é o TweenMax.to, cuja assinatura é a seguinte:

TweenMax.to
(target:Object, duration:Number, vars:Object);


onde 
target é o objeto a ser animado, duration é a duração da animação e vars são parâmetros especiais para configurar a animação.

Para animar um MovieClip/Sprite/DisplayObject/etc chamado 
mc do lugar onde ele estiver para o ponto (10, 100) em 2s, basta fazer:

import 
com.greensock.TweenMax;
TweenMax.to(mc, 2, {x:10, y:100});

e só! Fácil, fácil. A animação começa imediatamente com um easing default (Quad.easeOut).

"Mas eu não quero que minha animação 
comece imediatamente".

OK, caso queira um atraso de 1 segundo e meio pra começar a animação, você pode fazer:

TweenMax.to
(mc, 2, {delay:1.5, x:10, y:100});

e a animação demorará 1.5s para começar.

"E se eu quiser fazer um 
easing personalizado?"

Simples: basta adicionar um Easing (default do flash em fl.motion.easing ou fl.transitions.easing ou da própria Greensock em com.greensock.easing). Por exemplo: a mesma animação acima, porém com easing Elastic.easeOut ficaria:

import com.greensock.easing.Elastic;

TweenMax.to(mc, 2, {x:10, y:100, ease:Elastic.easeOut});

com isso teremos uma animação com easing.

"Como vou saber que acabou a animação?"
Adicionando um listener para quando ela acabar:

TweenMax.to
(mc, 2, {x:10, y:100, onComplete:onAnimationComplete});

private function onAnimationcomplete() : void { }

neste caso, o método 
onAnimationComplete será chamado quando a animação terminar.

"E se eu precisar passar parâmetros para o callback de término da animação?"
 

Basta dizer isso em vars:

TweenMax.to
(mc, 2, {x:10, y:100, onComplete:onAnimationComplete, onCompleteParams:[true, 3]});

private function onAnimationcomplete(state:Boolean, number:Number) : void { }

"Eu gostaria que ao invés de seguir em linha reta, meu objeto se movimentasse através de uma função".
TweenMax não possui suporte default para este tipo de animação, porém ele tem suporte a plugins e um deles é para fazer com que o objeto seja animado segundo uma curva de bezier. Para isso é necessário ativar o plugin BezierPlugin, através das linhas:

import
com.greensock.plugins.*;

TweenPlugin.activate([BezierPlugin]);

isto é necessário chamar apenas uma vez no programa todo. Depois disso, você poderá fazer:

TweenMax.to(mc, 3, {bezier:[{x:150, y:300}, {x:300, y:400}]});

Isso vai criar uma curva de 
bezier com o ponto de curvatura em (150, 300) e o ponto final em (300, 400).

Acho que é o suficiente para começar a usar esta ótima biblioteca.

Junto com a 
TweenMax, há também a TweenLite, que possui a mesma sintaxe e melhor performance, porém não possui algumas coisas como a instalação de listeners. Se precisar somente animar, use o TweenLite.

Mais detalhes, exemplos e tutoriais, no sites: http://www.greensock.com/
, o site oficial deste ótimo conjunto de bibliotecas.

Espero que seja útil.

Até mais. 

Nenhum comentário: