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.

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

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/12/tweetest.swf w=400 h=100]

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

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:

TweenLite.to(bola, 1, { frame:60, ease:Bounce.easeOut, onComplete:voltar } );

public function voltar():void {
TweenLite.to(bola, 1, { frame:0, delay:1 } );
}

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/12/tweenframetest.swf w=400 h=100]

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:

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

O Resultado é o seguinte:

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/12/tweenyoyotest.swf w=400 h=100]

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 :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/12/tweenyoyotest1.swf w=400 h=100]

8 respostas para “Tweenlite e TweenMax”

  1. Oi Fellyph, quando eu vi esse post eu dei uma boa olhada no TweenMax e fiz varios testes, mas ainda fiquei em duvida se devo trocar totalmente o caurina pelo tweenmax.

    É lógico que o tweenmax tem propriedades que o caurina nao tem, mas com animações de movimento ou scale eu tive a impressao que o tweenmax deixa a animacao meio .. como posso dizer.. ‘piscando’.. nao sei.. ‘quebradiça’.. eu testei os mesmos movimentos com o caurina e tive a impressao que o movimento fica bem mais suave.

    mas resumindo minha pergunta: voce acha que foi soh impressao minha ou foi soh no meu computador, ou realmente o movimento do caurina tem mais qualidade?

  2. Oi marcelo, os testes que eu fiz na minha máquina foram tranquilos. Tem pontos a serem considerados, frame rate, a máquina, e como é feito a animação.

    Frame rate é maior que 30?
    O scale é feito em imagem ou vetor?
    Tem transição de alpha?
    Tem outros objetos animados no palco ?

    Assim eu utilizei caurina por bastante tempo.
    Ela é muito boa também, mas por conta da versatilidade de tweenlite e tweenmax eu mudei. Da uma olhada no site do tweenmax tem uma parte de comparação com as classes faz esse teste no seu pc. o link é o seguinte : http://blog.greensock.com/tweening-speed-test/

  3. Fala ae xará!

    Eu fiquei em dúvida com relação a certos aspectos.

    Por exemplo, na animação puramente em flash os tweens são criados com base na timeline. Tudo funciona manualmente, escolhe a quantidade de frames que deseja e simplesmente aperta f6, f7 quando quer que algo novo aconteça.

    Os exemplos mostrados na greensock não me ajudaram muito a entender como funciona as sequências de ações e acontecimentos numa animação complexa, pois tudo é feito usando 1 único frame.

    Um exemplo que acabei de inventar… Suponhamos que eu quisesse fazer o seguinte: Cenário simples, com grama e um céu nublado… brota uma arvore do chão, ela começa a crescer, depois os galhos se destacam, nasce folhas, por último as frutas.

    2 segundos depois surge um gatinho que resolve sair correndo e subir na árvore.
    Tudo isso tem uma sequência de animações e não imagino como ordenar isso pelo tweenLite ou tweenMax

    Dúvida de newbie!! hahahahahah

  4. Olá Felipe

    O TweenMax e o Tweenlite é mais para animações abstratas como podemos dizer, um menu que sobe, um botão que aumenta sua escala ou uma logo que aparece em fade, animar cenários até rola mas vai exigir mais da capacidade de abstrair o cenário. Assim fazendo isso na Timeline fica mais fácil.

  5. Vc criar uma movieclip adiciona um nome de instância por exemplo “mascara” associa esse movieclip como mascara de um outro movieClip “fulano” e usa Tween sobre o movieClip “mascara” exemplo:

    mascara.scaleX = 0
    fulano.mask = mascara
    TweenMax.to(mascara, 1 , {scaleX:1});

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.