Package | com.greensock |
Class | public class TweenNano |
Inheritance | TweenNano Object |
overwrite:"all"
in the vars
parameter to have it kill
all tweens of the same target immediately. TweenLite, however, offers much more robust overwrite
management, recognizing advanced modes like "auto"
(which only overwrites individual
tweening properties that overlap), "concurrent"
, "allOnStart"
,
and "preexisting"
. See TweenLite's documentation for details.pause(), resume(), reverse(), seek(), restart()
, etc.
The essentials are covered, though, like to(), from(), delayedCall(), killTweensOf()
,
and kill()
.USAGE
The most common type of tween is a to() tween which allows you to define the destination values:
TweenNano.to(myObject, 2, {x:100, y:200});
The above code will tween myObject.x
from whatever it currently is to 100 and
myObject.y
property to 200 over the course of 2 seconds. Notice the x and y values are
defined inside a generic object (between curly braces). Put as many properties there as you want.
Tweens begin immediately.
The target
can also be an array of objects. For example, the following tween will
tween the alpha property to 0.5 and y property to 100 for obj1, obj2, and obj3:
TweenNano.to([obj1, obj2, obj3], 1, {alpha:0.5, y:100});
You can also use a from() tween if you want to define the starting values instead of the ending values so that the target tweens from the defined values to wherever they currently are.
Although the to()
and from()
static methods
are popular because they're quick and can avoid some garbage collection hassles, you can also
use the more object-oriented syntax like this:
var tween = new TweenNano(myObject, 2, {x:100, y:200});
or even:
var tween = TweenNano.to(myObject, 2, {x:100, y:200});
EXAMPLES:
Please see http://www.greensock.com/tweennano/ for examples, tutorials, and interactive demos.
SPECIAL PROPERTIES:
Typically the vars
parameter is used to define ending values for tweening
properties of the target
(or beginning values for from()
tweens)
like {x:100, y:200, alpha:0}
, but the following optional special properties
serve other purposes:
ElasticOut.ease
or StrongInOut.ease
. TweenNano works with not only the easing equations
in the com.greensock.easing package, but also standard easing equation that uses the
typical 4 parameters (time, start, change, duration
) like Adobe's
fl.motion.easing
eases. The default is QuadOut.ease
.
For linear animation, use the GreenSock Linear.ease
ease.onComplete
function. For example,
TweenNano.to(mc, 1, {x:100, onComplete:myFunction, onCompleteParams:[mc, "param2"]});
useFrames
is true
, the tweens's timing will be
based on frames instead of seconds. This causes both its duration
and delay
to be based on frames.delay
. However, if you prefer to force the tween to
render immediately when it is created, set immediateRender
to true
.
Or to prevent a from()
from rendering immediately, set immediateRender
to false
.onUpdate
function. For example,
TweenNano.to(mc, 1, {x:100, onUpdate:myFunction, onUpdateParams:[mc, "param2"]});
overwrite:"all"
TweenNano.to(mc, 2, {x:"-=20"});
it'll
tween mc.x
to the left 20 pixels. {x:"+=20"}
would move it to the right.TweenNano.defaultEase
if you prefer something other
than QuadOut.ease
.TweenNano.killTweensOf(myObject);
TweenNano.killTweensOf(myFunction);
TweenNano.from()
method to animate things into place. For example,
if you have things set up on the stage in the spot where they should end up, and you
just want to animate them into place, you can pass in the beginning x and/or y and/or
alpha (or whatever properties you want).Copyright 2008-2013, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.
Property | Defined By | ||
---|---|---|---|
defaultEase : Object [static] Provides An easy way to change the default easing equation. | TweenNano | ||
target : Object Target object whose properties this tween affects. | TweenNano | ||
ticker : Shape [static]
The object that dispatches a "tick" event each time the engine updates, making it easy for
you to add your own listener(s) to run custom logic after each update (great for game developers). | TweenNano | ||
vars : Object Stores variables (things like "alpha", "y" or whatever we're tweening, as well as special properties like "onComplete"). | TweenNano |
Method | Defined By | ||
---|---|---|---|
TweenNano(target:Object, duration:Number, vars:Object)
Constructor
| TweenNano | ||
delayedCall(delay:Number, callback:Function, params:Array = null, useFrames:Boolean = false):TweenNano [static]
Provides a simple way to call a function after a set amount of time (or frames). | TweenNano | ||
[static]
Static method for creating a TweenNano instance that tweens backwards -
you define the BEGINNING values and the current values are used
as the destination values which is great for doing things like animating objects
onto the screen because you can set them up initially the way you want them to look
at the end of the tween and then animate in from elsewhere. | TweenNano | ||
kill(target:* = null):void
Kills the tween, stopping it immediately. | TweenNano | ||
killTweensOf(target:Object):void [static]
Kills all the tweens of a particular object or the delayedCalls to a particular function. | TweenNano | ||
[static]
Static method for creating a TweenNano instance that animates to the specified destination values
(from the current values). | TweenNano |
defaultEase | property |
public static var defaultEase:Object
Provides An easy way to change the default easing equation. Choose from any of the GreenSock eases in the com.greensock.easing
package or any standard easing function like the ones in Adobe's fl.motion.easing
package.
The default value is QuadOut.ease
.
target | property |
public var target:Object
Target object whose properties this tween affects. This can be ANY object or even an array.
ticker | property |
public static var ticker:Shape
The object that dispatches a "tick"
event each time the engine updates, making it easy for
you to add your own listener(s) to run custom logic after each update (great for game developers).
Add as many listeners as you want. The basic syntax is the same for all versions (AS2, AS3, and Javascript):
Basic example (AS2, AS3, and Javascript):
//add listener TweenNano.ticker.addEventListener("tick", myFunction); function myFunction(event) { //executes on every tick after the core engine updates } //to remove the listener later... TweenNano.ticker.removeEventListener("tick", myFunction);
Due to differences in the core languages (and to maximize efficiency), the advanced syntax is slightly different for the AS3 version compared to AS2 and Javascript. The parameters beyond the first 2 in the addEventListener() method are outlined below:
Javascript and AS2
addEventListener(type, callback, scope, useParam, priority)
Parameters:
"tick"
this
" refers to in your function). This can be very useful in Javascript and AS2 because scope isn't generally maintained. true
, an event object will be generated and fed to the callback each time the event occurs. The event is a generic object and has two properties: type
(always "tick"
) and target
which refers to the ticker instance. The default for useParam
is false
because it improves performance.Advanced example (Javascript and AS2):
//add listener that requests an event object parameter, binds scope to the current scope (this), and sets priority to 1 so that it is called before any other listeners that had a priority lower than 1... TweenNano.ticker.addEventListener("tick", myFunction, this, true, 1); function myFunction(event) { //executes on every tick after the core engine updates } //to remove the listener later... TweenNano.ticker.removeEventListener("tick", myFunction);
AS3
The AS3 version uses the standard EventDispatcher.addEventListener()
syntax which
basically allows you to define a priority and whether or not to use weak references (see Adobe's
docs for details).
Advanced example [AS3 only]:
import flash.events.Event; //add listener with weak reference (standard syntax - notice the 5th parameter is true) TweenNano.ticker.addEventListener("tick", myFunction, false, 0, true); function myFunction(event:Event):void { //executes on every tick after the core engine updates } //to remove the listener later... TweenNano.ticker.removeEventListener("tick", myFunction);
vars | property |
public var vars:Object
Stores variables (things like "alpha", "y" or whatever we're tweening, as well as special properties like "onComplete").
TweenNano | () | Constructor |
public function TweenNano(target:Object, duration:Number, vars:Object)
Constructor
Parameterstarget:Object — Target object (or array of objects) whose properties this tween affects
| |
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
| |
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete , ease , etc. For example, to tween mc.x to 100 and mc.y to 200 and then call myFunction , do this: new TweenNano(mc, 1, {x:100, y:200, onComplete:myFunction}) .
|
delayedCall | () | method |
public static function delayedCall(delay:Number, callback:Function, params:Array = null, useFrames:Boolean = false):TweenNano
Provides a simple way to call a function after a set amount of time (or frames). You can optionally pass any number of parameters to the function too.
Javascript and AS2 note: - Due to the way Javascript and AS2 don't
maintain scope (what "this
" refers to, or the context) in function calls,
it can be useful to define the scope specifically. Therefore, in the Javascript and AS2
versions the 4th parameter is scope
, bumping useFrames
back to the 5th parameter:
TweenNano.delayedCall(delay, callback, params, scope, useFrames)
[Javascript and AS2 only]
//calls myFunction after 1 second and passes 2 parameters: TweenNano.delayedCall(1, myFunction, ["param1", 2]); function myFunction(param1, param2) { //do stuff }
Parameters
delay:Number — Delay in seconds (or frames if useFrames is true ) before the function should be called
| |
callback:Function — Function to call
| |
params:Array (default = null ) — An Array of parameters to pass the function (optional).
| |
useFrames:Boolean (default = false ) — If the delay should be measured in frames instead of seconds, set useFrames to true (default is false )
|
TweenNano — TweenNano instance
|
See also
from | () | method |
public static function from(target:Object, duration:Number, vars:Object):TweenNano
Static method for creating a TweenNano instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.
NOTE: By default, immediateRender
is true
in
from()
tweens, meaning that they immediately render their starting state
regardless of any delay that is specified. You can override this behavior by passing
immediateRender:false
in the vars
parameter so that it will
wait to render until the tween actually begins. To illustrate the default behavior, the
following code will immediately set the alpha
of mc
to 0 and then wait 2 seconds before tweening the alpha
back to 1 over
the course of 1.5 seconds:
TweenNano.from(mc, 1.5, {alpha:0, delay:2});
Since the target
parameter can also be an array of objects, the following
code will tween the alpha property of mc1, mc2, and mc3 from a value of 0 simultaneously:
TweenNano.from([mc1, mc2, mc3], 1.5, {alpha:0});
Even though 3 objects are animating, there is still only one tween created.
For simple sequencing, you can use the delay
special property
(like TweenNano.from(mc, 1, {alpha:0, delay:0.5})
),
but it is highly recommended that you consider using TimelineLite (or TimelineMax)
for all but the simplest sequencing tasks. It has an identical from()
method
that allows you to append tweens one-after-the-other and then control the entire sequence
as a whole. You can even have the tweens overlap as much as you want.
Parameters
target:Object — Target object (or array of objects) whose properties this tween affects.
| |
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
| |
vars:Object — An object defining the starting value for each property that should be tweened as well as any special properties like onComplete , ease , etc. For example, to tween mc.x from 100 and mc.y from 200 and then call myFunction , do this: TweenNano.from(mc, 1, {x:100, y:200, onComplete:myFunction});
|
TweenNano — TweenNano instance
|
See also
kill | () | method |
public function kill(target:* = null):void
Kills the tween, stopping it immediately. You can optionally define a particular target to isolate (or an array of targets) which is only useful in tweens whose target is an array. For example, let's say we have a tween like this:
var tween = TweenNan.to([mc1, mc2, mc3], 2, {x:100});
Later, we could kill only the mc2 portion of the tween like this:
tween.kill(mc2);
To kill the entire tween, simply omit the target
parameter, like tween.kill()
Parameters
target:* (default = null ) — [optional] To kill only aspects of the animation related to a particular target (or targets), reference it here. It can be an array or a single object. For example, to kill only parts having to do with myObject , do kill(myObject) or to kill only parts having to do with myObject1 and myObject2 , do kill([myObject1, myObject2]) . If no target is defined, ALL targets will be affected.
|
killTweensOf | () | method |
public static function killTweensOf(target:Object):void
Kills all the tweens of a particular object or the delayedCalls to a particular function.
If, for example, you want to kill all tweens of myObject
, you'd do this:
TweenNano.killTweensOf(myObject);
To kill all the delayedCalls that were created like TweenNano.delayedCall(5, myFunction);
,
you can simply call TweenNano.killTweensOf(myFunction);
because delayedCalls
are simply tweens that have their target
and onComplete
set to
the same function (as well as a delay
of course).
killTweensOf()
affects tweens that haven't begun yet too. If, for example,
a tween of myObject
has a delay
of 5 seconds and
TweenNano.killTweensOf(mc)
is called 2 seconds after the tween was created,
it will still be killed even though it hasn't started yet.
Parameters
target:Object — Object whose tweens should be killed immediately
|
to | () | method |
public static function to(target:Object, duration:Number, vars:Object):TweenNano
Static method for creating a TweenNano instance that animates to the specified destination values (from the current values). The following lines of code all produce identical results:
TweenNano.to(mc, 1, {x:100}); var myTween = new TweenNano(mc, 1, {x:100}); var myTween = TweenNano.to(mc, 1, {x:100});
Each line above will tween the "x"
property of the mc
object
to a value of 100 over the coarse of 1 second. They each use a slightly different syntax,
all of which are valid. If you don't need to store a reference of the tween, just use the
static TweenNano.to( )
call.
Since the target
parameter can also be an array of objects, the following
code will tween the x property of mc1, mc2, and mc3 to a value of 100 simultaneously:
TweenNano.to([mc1, mc2, mc3], 1, {x:100});
Even though 3 objects are animating, there is still only one tween created.
For simple sequencing, you can use the delay
special property
(like TweenNano.to(mc, 1, {x:100, delay:0.5})
),
but it is highly recommended that you consider using TimelineLite (or TimelineMax)
for all but the simplest sequencing tasks. It has an identical to()
method
that allows you to append tweens one-after-the-other and then control the entire sequence
as a whole. You can even have the tweens overlap as much as you want.
Parameters
target:Object — Target object (or array of objects) whose properties this tween affects.
| |
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
| |
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete , ease , etc. For example, to tween mc.x to 100 and mc.y to 200 and then call myFunction , do this: TweenNano.to(mc, 1, {x:100, y:200, onComplete:myFunction});
|
TweenNano — TweenNano instance
|
See also