Tweenlite e TweenMax

Um dos assuntos mais procurados no meu blog é Tweenlite e TweenMax, vou falar de algumas propriedades que você pode utilizar com o Tweenlite e TweenMax. Se você não conhece essas classes o ideal é dar uma olhada no post anterior.

Para baixar as classes do TweenLite e TweenMax deve ir no site da Greensock, Atualmente o TweenMax está na versão 3.52 e TweenLite 9.3. Então vamos começar.

tint:Essa propriedade dá a possibilidade de fazer animações com cores. Lembrando que são cores chapadas, se for animar uma foto com tint a imagem ficará toda na cor chapada.

1

TweenLite.to(bola, 1, { tint:0x00B000 } );

onComplete: chama uma função quando terminar a animação e funciona da seguinte forma:

1
2
3
4
5

TweenLite.to(bola, 1, { tint:0x00B000, onComplete:funcao } );
 
function funcao():void {
trace("chamei função no fim");
}

onStart: Têm o mesmo funcionamento da propriedade onComplete, a diferença que a função é disparada no início da animação. este exemplo funciona da seguinte forma:

TweenLite.to(bola, 3, { tint:0x00B000, onStart:funcao } );
 
function funcao():void {
trace("chamei função no inicio");
}

frame: dá a possibilidade de fazer uma transição sobre os frames de um determinado movieclip, exemplo se meu movieclip bola possuísse 60 frame, lembrando o movieclip e não o stage, como na imagem abaixo:

com uma animação da seguinte forma bola movimenta de uma extremidade a outra da tela, o código dessa animação ficaria assim:

1
2
3
4
5

TweenLite.to(bola, 1, { frame:60, ease:Bounce.easeOut, onComplete:voltar } );
 
public function voltar():void {
TweenLite.to(bola, 1, { frame:0, delay:1 } );
}

delay: Traz a possibilidade de atrasar o inicio da transição, é passado um número que esse número e a quantidade em segundos.  ele foi utilizado no exemplo anterior na função “voltar”.

yoyo(TweenMax): Como o próprio nome sugere, faz um “efeito de yoyo”, inteligente essa resposta, mas explicação simples ela fazer uma Tween e no final desfaz a mesma, então se você faz um tween do ponto x:0 ao x:100, ao chegar no ponto x:100, é feita uma tween: para o ponto x:0.Lembrando que a propriedade yoyo não contém na classe TweenLite, nas versões anteriores do TweenMax era passado um valor Booleano, agora é passado um número, para determinar o número de vezes que o efeito vai ser realizado. Vamos código:

1

TweenMax.to(bola, 1, { x:370, yoyo:1 } );

O Resultado é o seguinte:

loop(TweenMax): A proriedade loop pertence a TweenMax, ela faz loop da animação, lembrando que nessa versão do TweenMax não é passado mas um valor booleano para a propriedade e sim um número. O código fica da seguinte forma:

TweenMax.to(bola, 1, { x:370, loop:3 } );

O Resultado é o seguinte :