21/03/2012 | 13h34min

por Ivan da Silveira

- Já avaliou este artigo?

Animações simples usando GreenSock AS3

Com a biblioteca GreenSock é possível fazer animações complexas, porém aqui neste post vou mostrar um pouco desta biblioteca exemplificando com animações mais simples.
Para os exemplos estarei utilizando a Classe TweenMax e TimeLineMax que são atualmente as classes mais completas da biblioteca, mas também pode se usar a TweenLite e TimeLineLite.
Animação simples de um DisplayObject, neste caso uma Shape:

var tween: TweenMax = new TweenMax(shape1,  0.5, { y:-350 })
tween.play();

0.5 – tempo da animação em segundo, 0.5 = 500ms = ½ minuto

A animação acima faz com que o objeto ‘shape1’ seja deslocado no eixo ‘y’ até a posição -350
Muitas propriedades podem ser incluídas na animação:

var tween: TweenMax = new TweenMax(shape1,  0.5, { y:-350 ,  x:100,  width:40,  height:175, delay:2, repeat:10, yoyo:true})
tween.play();

delay:2 – significa que a animação tem um tempo de espera de 2 segundos antes de iniciar o ciclo.
repeat:10 – repete o ciclo da animação por 10 vezes.
yoyo:true – se verdadeiro a animação retrocede ao inicio do ciclo (animando de trás para frente), caso contrário ao repetir ela simplesmente inicia sem retroceder.

E também é possível configurar na animação o tipo de transição desejável:

var tween: TweenMax = new TweenMax(shape1,  0.5, { y:-350 , ease: com.greensock.easing.Quad.easeInOut})
tween.play();

Se não se deseja ter controle sobre o objeto tween é possível invocar a animação de uma forma simplificada:

// anima dos valores atuais para os valores passados
// ‘y’ atual --> y=-350
TweenMax.to(shape1,  0.5, { y:-350 })

// anima dos valores passados para os valores atuais
// y=-350 --> ‘y’ atual
TweenMax.from(shape1,  0.5, { y:-350 })

A propriedade bezier, nos permite animar o deslocamento de um objeto com curvas bezier possibilitando animações mais ricas:

// bezier com 1 ponto
TweenMax.to(shape1, 0.5, {bezier:[{x:0, y:350}, {x:350, y:350}], ease:Quad.easeInOut});
			
// bezier com 2 pontos
TweenMax.to(shape1, 0.5, {bezier:[{x:0, y:350}, {x:-350, y:0}, {x:-350, y:350}]});

Controle sobre eventos de START, UPDATE, REPEAT, REVERSE_COMPLETE e COMPLETE
Ou seja, é possível executar uma função em resposta ao inicio, atualização, repetição, reverso da animação completado e animação completada:
TweenMax.to(shape1, 0.5, { y:-350, onComplete:acabouAnimacao })
function acabouAnimacao():void { trace(“A animação acabou”); }

Se vocês quer animar vários objetos como se estivessem em paralelo em uma timeline, ou mesmo de forma sequencial, pode usar a classe TimeLineMax:

// repete 100 vezes a animação paralela da forma2, 3 e 4.
tween1 = new TimelineMax({repeat:100});
tween1.appendMultiple([new TweenMax(shape1, 1, {y:-350,ease:Quad.easeInOut})
,new TweenMax(shape2, 2, {x:350, ease:Quad.easeInOut})
,new TweenMax(shape3, 3, {y:350, ease:Quad.easeInOut})
,new TweenMax(shape4, 4, {x:-350, ase:Quad.easeInOut})
			]);
tween1.play();

// retrocede e repete 100 vezes a animação sequencial da forma 2 e 1
tween2 = new TimelineMax({repeat:100, yoyo:true});
tween2.append(new TweenMax(shape7, 2, {x:175, alpha:1, ease:Sine.easeIn}));
tween2.append(new TweenMax(shape7, 1, {x:350, alpha:0, ease:Sine.easeOut}));
tween2.play();

Abaixo um exemplo um pouco mais elaborado e o código fonte completo.

Código Fonte:

package ivansi.cbsaexample.actionscript.animation
{
	import appkit.responders.NResponder;
	
	import com.greensock.TimelineMax;
	import com.greensock.TweenLite;
	import com.greensock.TweenMax;
	import com.greensock.easing.Elastic;
	import com.greensock.easing.Quad;
	import com.greensock.easing.Sine;
	
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFormat;
	
	[SWF(width="400", height="400", backgroundColor="#E0ECBF")]
	public class GreenSockExemple1 extends Sprite
	{
		// formas
		private var shape1:Shape;
		private var shape2:Shape;
		private var shape3:Shape;
		private var shape4:Shape;
		private var shape5:Shape;
		private var shape6:Shape;
		private var shape7:Shape;
		private var shape8:Shape;
		private var shape9:Shape;
		
		// tweens
		private var tween1:TimelineMax;
		private var tween2:TimelineMax;
		private var tween3:TimelineMax;
		
		// text input
		private var text1:TextField;
		
		// anim time
		private const ANIM_TIME:uint = 2;
		
		// anim delay
		private const ANIM_DELAY:uint = 1;
		
		public function GreenSockExemple1()
		{
			super();
			
			// ao adicionar este objeto(Sprite) ao stage chama o método 'init' 
			NResponder.addNative(this, Event.ADDED_TO_STAGE, init, 1);			
		}
		
		/**
		 * função de inicialização principal
		 */
		private function init(e:Event = null):void 
		{
			// forma 1
			shape1 = new Shape();			
			// desenha a forma
			shape1.graphics.beginFill(0xd92b2b);
			shape1.graphics.drawRect(0, 350, 50, 50);
			shape1.graphics.endFill();
			addChild(shape1);
			
			// forma 2
			shape2 = new Shape();			
			// desenha a forma
			shape2.graphics.beginFill(0x2b85d9);
			shape2.graphics.drawRect(0, 0, 50, 50);
			shape2.graphics.endFill();
			addChild(shape2);
			
			// forma 3
			shape3 = new Shape();			
			// desenha a forma
			shape3.graphics.beginFill(0xd92b2b);
			shape3.graphics.drawRect(350, 0, 50, 50);
			shape3.graphics.endFill();
			addChild(shape3);
			
			// forma 4
			shape4 = new Shape();			
			// desenha a forma
			shape4.graphics.beginFill(0x2b85d9);
			shape4.graphics.drawRect(350, 350, 50, 50);
			shape4.graphics.endFill();
			addChild(shape4);
			
			// forma 5
			shape5 = new Shape();			
			// desenha a forma
			shape5.graphics.beginFill(0x2b85d9);
			shape5.graphics.drawRect(0, 0, 50, 50);
			shape5.graphics.endFill();
			addChild(shape5);
			
			// forma 6
			shape6 = new Shape();			
			// desenha a forma
			shape6.graphics.beginFill(0xd92b2b);
			shape6.graphics.drawRect(350, 0, 50, 50);
			shape6.graphics.endFill();
			addChild(shape6);
			
			// forma 7
			shape7 = new Shape();			
			// desenha a forma
			shape7.graphics.beginFill(0x2b85d9);
			shape7.graphics.drawRect(0, 175, 50, 50);
			shape7.graphics.endFill();
			shape7.alpha = 0;
			addChild(shape7);
			
			// forma 8
			shape8 = new Shape();			
			// desenha a forma
			shape8.graphics.beginFill(0xd92b2b);
			shape8.graphics.drawRect(350, 175, 50, 50);
			shape8.graphics.endFill();
			shape8.alpha = 0;
			addChild(shape8);
			
			// forma 9
			shape9 = new Shape();			
			// desenha a forma
			shape9.graphics.beginFill(0xd92b2b);
			shape9.graphics.drawRect(175, 175, 50, 50);
			shape9.graphics.endFill();
			shape9.alpha = 0.5;
			addChild(shape9);
			
			initAnimations();
		}
		
		/**
		 * configura as animações
		 */
		private function initAnimations():void
		{
			// animação multipla em paralelo
			tween1 = new TimelineMax({repeat:999});
			tween1.appendMultiple([
				new TweenMax(shape1, ANIM_TIME, {y:-350, tint:0x2b85d9, ease:Quad.easeInOut})
				,new TweenMax(shape2, ANIM_TIME, {x:350, tint:0xd92b2b, ease:Quad.easeInOut})
				,new TweenMax(shape3, ANIM_TIME, {y:350, tint:0x2b85d9, ease:Quad.easeInOut})
				,new TweenMax(shape4, ANIM_TIME, {x:-350, tint:0xd92b2b, ease:Quad.easeInOut})
			]);
			tween1.play();
			
			// bezier com 1 ponto
			TweenMax.to(shape5, ANIM_TIME, {bezier:[{x:0, y:350}, {x:350, y:350}], ease:Quad.easeInOut, repeat:999});
			
			// bezier com 2 pontos
			TweenMax.to(shape6, ANIM_TIME, {bezier:[{x:0, y:350}, {x:-350, y:0}, {x:-350, y:350}], repeat:999});
			
			// animando com alpha
			{
				// quadrado esquerda para direita
				tween2 = new TimelineMax({repeat:999, yoyo:true});
				tween2.append(new TweenMax(shape7, ANIM_TIME, {x:175, alpha:1, ease:Sine.easeIn}));
				tween2.append(new TweenMax(shape7, ANIM_TIME, {x:350, alpha:0, ease:Sine.easeOut}));
				tween2.play();
				// quadrado direita para esquerda
				tween3 = new TimelineMax({repeat:999, yoyo:true});
				tween3.append(new TweenMax(shape8, ANIM_TIME, {x:-175, alpha:1, ease:Sine.easeIn}));
				tween3.append(new TweenMax(shape8, ANIM_TIME, {x:-350, alpha:0, ease:Sine.easeOut}));
				tween3.play();
			}
			
			// animação de texto
			text1 = new TextField();
			text1.x = 175;
			text1.y = 100;
			// format text
			var format:TextFormat = new TextFormat();
			format.size = 24;
			format.color = 0xA3D141;
			text1.defaultTextFormat = format;
			text1.text = "AS3";
			addChild(text1);
			// anim text 1
			TweenMax.to(text1, ANIM_TIME, {glowFilter:{color:0xd92b2b, alpha:1, blurX:30, blurY:30, strength:10}, repeat:999, yoyo:true});		
			
			// anim random resize form
			var tween4:TweenMax = TweenMax.to(shape9, ANIM_TIME, {x:-200, y:-200, scaleX:2, scaleY:2, repeat:999, yoyo:true});
		}
	}
}

tags actionscript 3, animações, as3, greensock, tween, tweenlite, tweenmax, tweennano

Comentários

Postar um novo comentário

Processando...

Nuvem de tags

Resultado

Animações simples usando GreenSock AS3

Artigos relacionados

Comentários

Postar um novo comentário