slavikyad/as3-eaze-tween

Eaze Tween: smart, fast, chainable and compact Flash AS3 tweening library

as3-eaze-tween

EazeTween based on eaze-tween written by philippe.elsass

Changelog

Feb 9, 2015

• Added multi-target support

Jan 20, 2015

• repeat() method added

Eaze was designed to:

• bring back lightness and simplicity in Flash tweening,
• introduce a smartest syntax and event system,
• provide the best performance compromise,
• with minimal classes quantity and no dependencies.
• The result is a compact (~4Kb raw engine and ~9Kb with all plugins), highly optimized library, with a jQuery-like syntax.

Basic syntax and events

Basic tweening is classic:

eaze(target).to(duration, { x:dx, y:dy });
eaze(target).from(duration, { x:dx, y:dy });
eaze(target).apply({ x:dx, y:dy }); // set values immediately
eaze(target).play("label"); // see timeline tweening below

eaze(target).to(duration, { width:dw }, false /*don't overwrite existing tweens*/);

Multi-target tweening:

eaze([circle, rectangle]).to(duration, {x: dx, y:dy });
eaze(new <Shape>[circle, rectangle]).to(duration, {x: dx, y:dy });

Original, completion-friendly, event system:

eaze(target).to(duration, { x:dx, y:dy })
    .onUpdate(handler, param1, etc)
    .onComplete(handler, param1, param2, etc);

// identical to:
TweenMax.to(target, duration {
    x:dx, y:dy,
    onUpdate:handler, onUpdateParams:[param1, etc],
    onComplete:handler, onCompleteParams:[param1, param2, etc]
});

And to set the easing function (optimized Robert Penner functions):

eaze(target).to(duration, { x:dx, y:dy })
    .easing(Cubic.easeInOut);
// default function is Quadratic.easeOut

Tween chaining, delaying and repeating

Tweens can be chained (chained tweens are started at the end of parent tween):

eaze(target)
    .from(duration, { x:dx, y:dy }) 
    .to(duration, { x:dx, y:dy })
    .play("over")
    .chain(otherTarget).to(duration, { x:dx, y:dy })
    .apply({ x:dx, y:dy });
// tweens will be executed one by one

A delay is "just" a blank tween:

eaze(target).delay(1).onComplete(handler, arg1);

// identical to
TweenMax.delayedCall(1, handler, [arg1]);
// and also BTW
setTimeout(handler, 1000, arg1);

Now you can chain a tween to the delay tween:

eaze(target).delay(1)
    .to(duration, { x:dx, y:dy });

// identical to:
TweenMax.to(target, duration, {
    delay:1,
    x:dx, y:dy
});

Unlike with TweenMax.from(), if a tween is delayed the target will NOT be updated before the delay has expired. But you can call .updateNow() to replicate this useful behavior:

eaze(target).delay(1)
    .from(duration, { x:dx })
    .updateNow(); // update target immediately

// identical to:
TweenMax.from(target, duration, { 
    delay:1,
    x:dx
});

Also you can repeat tween with method "repeat":

eaze(target)
	.to(0.8, {x: 100})
	.repeat(2);

Number of repeat can be positive, or negative for endless repeating (-1 by default - endless). You can't repeat full chain of tweens, only one by one.

Special properties

Automatic relation between alpha & visible:

eaze(target).to(duration, { alpha:0 }); // set visible to false when alpha==0
eaze(target).to(duration, { alphaVisible:0 }); // do not change visibility

// identical to
TweenMax.to(target, duration { autoAlpha:0 });
TweenMax.to(target, duration { alpha:0 });

Original tint mixing:

eaze(target).to(1).tint(0xffffff, colorize, multiply);
// colorize[0..1]: color offset ratio (tint strength)
// multiply[0..2]: original color multiplicator (keep original color)

// remove tint
eaze(target).to(1).tint();

// but you can also use a more classic syntax:
eaze(target).to(1, { tint:0xffffff });
eaze(target).to(1, { tint:[0xffffff, colorize, multiply] });
eaze(target).to(1, { tint:null }); // remove tint

Original filter syntax:

eaze(target).to(duration)
    .filter(BlurFilter, { blurX:5, blurY:5, quality:2 });

eaze(target).to(duration)
    .filter(GlowFilter, { blurX:20, blurY:20, color:0x00ccff, knockout:true });

// but you can also use a more classic syntax:
eaze(target).to(duration, { 
        blurFilter:{ blurX:5, blurY:5 }

Smart color transforms tweening:

// .colorMatrix(brightness[-1..1], contrast[-1..1], saturation[-1..1], 
//              hue[-180..180], tint[RGB], colorize[0..1])
eaze(target).to(duration)
    .colorMatrix(0.2, 0, -1); // brightness, contrast, saturation, etc.

// remove transformation
eaze(target).to(duration).colorMatrix();

// or using standard filter tween syntax
eaze(target).to(duration)
    .filter(ColorMatrixFilter, { 
        brightness:0.2, saturation:-1
    });
});

// filter built using Quasimondo's (stripped-down) ColorMatrix class

Classic volume syntax:

eaze(target).to(duration, { volume:0.5 });

Original Bezier tween syntax:

// Bezier tween to end value with one or more control points
eaze(target).to(duration, { x:[100, 150] });
eaze(target).to(duration, { x:[100, 120, 150] });

// Bezier "through" tween to end value with one or more points to cross
eaze(target).to(duration, { x:[[100, 150]] });
eaze(target).to(duration, { x:[[100, 120, 150]] });

// respectively identical to
TweenMax.to(target, duration, { bezier:[{x:100}, {x:150}] });
TweenMax.to(target, duration, { bezier:[{x:100}, {x:120}, {x:150}] });

// and
TweenMax.to(target, duration, { bezierThrough:[{x:100}, {x:150}] });
TweenMax.to(target, duration, { bezierThrough:[{x:100}, {x:120}, {x:150}] });

Original short rotation syntax:

// works with any property
eaze(target).to(1).short(160);
eaze(target).to(1).short(Math.PI/4, "angleProp", true /*use radian*/);

Built-in scale (scaleX/scaleY) tweening:

eaze(target).to(duration, { scale:0.5 });

Useful Rectangle tweening:

// animate .scrollRect
eaze(target).to(1).rect(new Rectangle(0,0,100,100));
// or other rectangle properties
eaze(target).to(1).rect(new Rectangle(0,0,100,100), "rectProp");

Of course all these special tweening properties work backward using eaze(target).from().

Timeline frame tweening

Original frame tweening options:

// tween clip timeline at appropriate linear speed
eaze(target).play(); // totalFrames
eaze(target).play(12);
eaze(target).play("label");
eaze(target).play("start+end"); // from label "start" to label "start+end"
eaze(target).play("start>end"); // from label "start" to label "end"

// but you can also use a more classic syntax:
eaze(target).to(duration, { frame:"label" });

How to use the raw engine (4Kb) only?

Plugins will be loaded as soon as your code imports the special eaze() function.

Plugins will NOT be loaded if you use the raw tween engine:

// raw engine, no plugin dependency (cool for your loader animations)
new EazeTween(target).to(...)

// using eaze() will automatically import the plugins
eaze(target).to(...)