Tweenmax.js Documentation

Tweenmax Reference
Http://bbs.9ria.com/thread-214959-1-1.html

Tweenmax may be used by a lot of people, including me but recently found a lot of use will always produce such or that "strange", sometimes using code to do easing and sometimes with tweenmax caused the confusion of the code, and in addition to the monotonous tweenmax.to () and other functions, There seems to be a lot more fun stuffs like that. For the animation ease control, I do not know the other than a back. All in all a bleak, so take advantage of this opportunity to summarize:

One, the main code structure:

Com.greensock bag inside, the first and foremost is the tweenmax.as; then a commonly used is com.greensock.easing.*, which contains 15 eases, which are described below; the other one is Com.greensock.events.TweenEvent, but the feeling is not very common;

Most of the Tweenmax methods return an instance of Tweenmax-Tweenmax Object, which is described below. A tweenmax requires three parameters, namely $target:object, $duration: Number, $vars: Object, the first two are moving objects, time, and the third parameter holds all the parameters.

Two, Tweenmax main class:

Here are a few chunks to introduce, namely: the third parameter-specific attributes (29), PlugIn (17), Public properties (10), Public methods (20).

1, the third parameter has a unique attribute (29):

These 29 parameters can be passed directly into the third object parameter without increasing the size of the file.

(1) Delay:number: The number of seconds to delay before the start of the Tweenmax animation.

(2) Useframes:boolean: (True/false) When set to true, the time for this Tweenmax object is calculated based on frame frames.

(3) Ease:function: (motion) easing mode. You can use the easing function under the com.greensock.easing package.

(4) Easeparams:array: easing function parameters. Some easing functions need to pass in some parameters for additional control.

(5) Oninit:function: initialization function. Before Tweenmax starts, all parameters are not passed into the Tweenmax object when it is triggered. Can be used to initialize the state of a moving object.

(6) Oninitparams:array: Initialize function parameters.

(7) Onstart:function: Start function. Unlike the initialization function, the start function is triggered after the value of the Tweenmax object changes, and differs from the initialization function. The start function can be triggered multiple times.

(8) Onstartparams:array: start function parameter.

(9) Onupdate:function: Update function. Triggered each time the Tweenmax object value is updated.

() Onupdateparams:array: Update function parameters.

(one) Oncomplete:function: completes the function. Triggered when Tweenmax object finishes easing.

Oncompleteparams:array: completes the function parameter. {x:333,y:333,oncomplete:oncompletehander,oncompleteparam:["WN", "334"]}

function Oncomplethandler (Value1:object,value2:objet)

(onreversecomplete:function): Playback completion function. Triggered when Tweenmax object is in the playback state and returns to the starting point.

Onreversecompleteparams:array: Playback completes function parameters.

(onrepeat:function): Replay function. Triggered when Tweenmax object is replayed every time.

(Onrepeatparams:array): Replay function parameters.

(+) Immediaterender:boolean: Render now. In general, Tweenmax object is rendered to the scene in the next render cycle (that is, the next frame). If you want to force immediate rendering, you can set this parameter to True. Also set this parameter to False if you want to prevent a motion object with a motion period of 0 from being rendered.

(Paused:boolean): Suspended. This is a good understanding, when set to true Tweenmax object pauses easing.

(+) Reversed:boolean: reverse. I don't know why it's different from the description document. My understanding is that the ease of Tweenmax object is played back in turn.

(overwrite:int): Overwrite processing. Defines a method of handling conflicts when using Tweenmax on the same object. There are 6 different modes.

Mode 0:none. Do not do any processing. Performance Excellent.

Mode 1:all_immediate. The Tweenmax object motion, which is set to this mode, has the highest priority, overwriting all the easing of the moving object. The new Tweenmax object is created with the old Tweenmax object overwritten. Performance Excellent.

Mode 2:auto. is the default mode of the Tweenmax (originally I was suffering because of it ... ）。 Overrides duplicate properties when the new Tweenmax object is rendered for the first time (mode 1 overrides all attributes). Performance is good as long as there are not too many attributes to overwrite.

Mode 3:concurrent. The meaning of this word is "happening at the same time". Very similar to pattern 1. The only difference is that he only overwrites the running Tweenmax Object. And let go of the other Tweenmax Object that did not start. Performance very good.

Mode 4:all_onstart. It's very much like pattern 1. The difference between two points is that he overwrites all other Tweenmax objects when the Tweenmax object is first rendered, and this overwrites the Tweenmax object that was created after him. Performance very good.

Mode 5:preexisting. This word looks very confused, actually is pre-existing, embarrassed. The only difference is that he overwrites all other Tweenmax objects when the Tweenmax object is first rendered. Performance very good.

If you want to change the global Tweenmax object default Overwrite property, you can call the global Method init () of which Overwritemanager class, that is:

Overwritemanager.init (OVERWRITEMANAGER.XXXX);

(+) Repeat:int: number of cycles. Set to-1 is an infinite loop.

(Repeatdelay:number): The time of the cycle delay.

(Yoyo:Boolean:YOYO) the ball. Another way of looping. As we play the Yoyo ball, from start to finish, and then from the end of the back and forth movement. PS: To be set with repeat at the same time.

Onstartlistener:function: Register a tweenevent listener and distribute it at the same time as the start function.

Onupdatelistener:function: Register a tweenevent listener and distribute it at the same time as the update function.

(+) Oncompletelistener:function: Register a tweenevent listener and distribute it at the same time as the completion function.

Onreversecompletelistener:function: Register a tweenevent listener and distribute it at the same time as the replay completion function.

Onrepeatlistener:function: Register a tweenevent listener and distribute it at the same time as the replay function.

Startat:object: Resets the initial value. The general Tweenmax object uses the current state of the moving object to do the initial value. However, you can use this parameter to reset the initial state of the moving object.

2,plugin (17)

PlugIn and "third parameter-specific properties" are actually the same thing. The difference is that he will significantly increase the size of the resulting file. All plugin are closed in cases where the Tweenmax size is 8.8k (Tweenlite is 4k). When all plugin are used (including charges) the Tweenmax expands to 25.9k. (I don't know how to close it again, I beg advice)

Here are the 17 plugin mentioned in the Tweenmax documentation (I've seen 30 of them in the bag. Regardless of him).

(1) Autoalpha:number: Almost the same as Alpha, the difference is that he automatically sets the visible to False when alpha==0, and sets the visible to True when alpha>0.

(2) Visible:boolean: Sets the Visible property of the object at the end of the Tweenmax object.

(3) Volume:number: Slow down the volume. A moving object is required to have soundtransform properties, such as Movieclip,soundchannel,netstream.

(4) Tint:number: color. Turns the entire moving object into its corresponding color. You can use hexadecimal values.

(5) Removetint:boolean: When set to true, remove the tint attribute that is already in use.

(6) Frame:number: When the Moving object is MovieClip, the internal time axis is slowed down.

(7) Bezier:array: Bezier curve. This is somewhat unclear, as if the odd dots (object{x:xxx,y:xxx}) in the array are the control points of the Bezier curve, and even the points are the end of the motion.

(8) Bezierthrough:array: The Bubessers curve is more intuitive, and the point of the array ridge number is the point to pass through in the curve.

(9) Orienttobezier:array (or Boolean): Point to Motion. A more commonly used function is that when the curve is moving, the object's orientation generally corresponds to the direction of motion (such as a motor car). For 2D you can simply pass the value to true. For 3D or need more flexibility, you can pass in the array of 4 parameters, x,y,rotation, need to increase the degree, note: The first 3 parameters are not specific values, but need to change the parameters, the first two are positional properties, the third is the rotation parameter, the fourth parameter is optional.

(ten) The hexcolors:object:16 is made into slow motion. Tweenmax is not smooth when the 16 binary number is slowed down, it is necessary to use the Hexcolors parameter to ease the action. The Hexcolors parameter is an object, so you need to pass in the parameters to be slowed down, namely: Tweenmax.to (Target,2,{hexcolors:{mcparas:newcolor}}), where Mcparas is the property of the target, Newcolor is the new 16-in value to be slowed down.

(one) Shortrotation:object: short rotation. Instead of rotation, the Tweenmax automatically rotates in the shortest direction of rotation, instead of rotating in a counterclockwise direction AS3 the default. Remember to pass in as object.

(Roundprops:array): Take an integer. For values that you want to always take in a change, you can put the character form of the attribute into the array. Example: Tweenmax.to (target,2,{x:200,y:200,roundprops:["x", "Y"]});

Blurfilter:object: Blur filter. Usage: tweenmax.to (target,2,{blurfilter:{blurx:xxx,blury:xxx}});

Glowfilter:object: Glow filter. Usage: tweenmax.to (target,2,{glowfilter:{color:0xffffff,blurx:xxx,blury:xxx}});

(colormatrixfilter:object): Color Matrix filter. Usage: tweenmax.to (target,2,{colormatrixfilter:{colorize:0xff0000, Amount:1, Contrast:1, Saturation:1, hue:0}});

(+) Dropshadowfilter:object: Projection filter. Usage: tweenmax.to (target,2,{dropshadowfilter:{color:0xff0000, Alpha:1, Blurx:12, Blury:12, Distance:12}});

(+) Bevelfilter:object: Angled filter. Usage: tweenmax.to (target,2,{bevelfilter:{blurx:10, Blury:10, Strength:1, Distance:10}});

3, Public properties

Tweenmax has 10 public properties. (Ah ... A good Brief introduction)

(1) Animation progress

Currentprogress:number

The progress of the slow animation, from 0~1.

(2) Animation time

Currenttime:number

Unlike Totalduartion, CurrentTime only represents the time of a tweenmax cycle.

(3) Global easing speed multiplier

Globaltimescale:number

Similar with press XX speed play slow animation, usage: Tweenmax.globaltimescale = XXX;

(4) Remove all Tweenmax animations that act on a moving object

Killtweensof:function

This is a reference to the Killtweensof function in Tweenlite and can be used directly.

(5) Number of replays

Repeat:int

Is the same as passing in the constructor of the Tweenmax directly.

(6) Replay delay time

Repeatdelay:number

Is the same as passing in the constructor of the Tweenmax directly.

(7) Speed multiplier of individual slow motion

Timescale:number

Just like the Globaltimescale usage, this is called for a single Tweenmax object.

(8) Total easing progress

Totalprogress:number

This calculates the total easing time, which includes the time of replay and replay delay. From 0~1.

(9) Total easing time

Totalduration:number

This calculates the total easing time, which includes the time of replay and replay delay.

(Ten) Yoyo

Yoyo:boolean

Is the same as passing in the constructor of the Tweenmax directly.

4, public methods (20):

(1) Construction method.

Tweenmax (Target:object, Duration:number, Vars:object)

The three parameters are the moving object, the period, and the parameters respectively.

(2) Allto (static method)

Allto (Targets:array, Duration:number, vars:object, Stagger:number = 0, oncompleteall:function = null, Oncompleteallparams:array = null): Array

The first three parameters are: An array to save a number of objects to be slowed down, period, parameters;

The following three parameters are optional, namely: Interval time, completion call function, function parameter.

Returns an array of all Tweenmax objects that were created.

(3) Allfromto (static method)

Allfromto (Targets:array, Duration:number, Fromvars:object, tovars:object, Stagger:number = 0, onCompleteAll:Function = NULL, Oncompleteallparams:array = NULL): Array

Like Allto, it's just one more parameter object can be used to define the starting state.

(4) Allfrom (static method)

Allfrom (Targets:array, Duration:number, vars:object, Stagger:number = 0, oncompleteall:function = null, Oncompleteallparams:array = null): Array

Just like Allto, the initial state of a moving object is defined, moving to its current state.

(5) to (static method)

To (Target:object, Duration:number, vars:object): Tweenmax

is a simplified version of Allto, but also a lot of people with the main purpose of Tweenmax, defined the movement of objects, cycles, and parameters. Returns a Tweenmax Object.

(6) FromTo (static method)

FromTo (Target:object, Duration:number, Fromvars:object, tovars:object): Tweenmax

As to, but one more parameter defines the initial state of the moving object.

(7) from (static method)

From (Target:object, Duration:number, vars:object): Tweenmax

Like to, just defines the initial state of the moving object, moving to the current state.

(8) Mandatory completion

Complete (Skiprender:boolean = False, Suppressevents:boolean = false): void

Force Tweenmax to the end of the last section. If the first argument is set to true, it will not render, and Tweenmax will stop at the moment of invocation. If the second argument is set to true, events such as oncompelte,onupdate are not triggered.

(9) Deferred execution function

Delayedcall (Delay:number, oncomplete:function, Oncompleteparams:array = null, Useframes:boolean = False): TweenMax

Almost the same as AS3 's own settimeout, it's their AS3 version.

(10) returns all Tweenmax Object (static methods) that are running

Getalltweens (): Array

Title.

(11) Returns the Tweenmax object (static method) that the moving object is running

Gettweensof (target:object): Array

Title.

(12) Clear the initial value

Invalidate (): void

When you play a new Tweenmax object (that is, call the restart () method), you can call this method to empty the original value if you want to re-set the initial value. After the call, this Tweenmax object will take the current position as the new initial value.

(13) Determine if you are easing (static method)

Istweening (target:object): Boolean

Easing is returning true, otherwise false.

(14) Clear all Tweenmax Object (static method)

KillAll (Complete:boolean = False, Tweens:boolean = True, Delayedcalls:boolean = true): void

Three parameters, the first set to true can be forced to complete and then clear, the second is to clear all the easing, the third is to clear all the function delay execution.

(15) Clear Tweenmax Object (static method) for all child objects

Killchildtweensof (Parentisplayobjectcontainer, Complete:boolean = false): void

The Tweenmax object that will be a displayobjectcontainer of all child objects. You can choose to force the completion first.

(16) Ease of clearing a property

Killproperties (Names:array): void

The incoming is an array, in the form of a string. Example: _tweenmax.killproperties (["X"]);

(17) Pause all (static method)

Pauseall (Tweens:boolean = true, Delayedcalls:boolean = true): void

Pause all Tweenmax Object (optional), function deferred execution (optional).

(18) Restore All (static method)

Recover all Tweenmax Object (optional), function deferred execution (optional).

(19) REDIRECT Endpoint

Setdestination (property:string, value:*, Adjuststartvalues:boolen = true): void

The first parameter is the corresponding property value, the second is the new value to set, and the third parameter is whether you want to adjust the starting point and make the transition look less skipping/jerking. ), it is important to note that you may not be redirected to the starting point if you are trying to reverse an easing animation. Generally not recommended for use with UpdateTo.

(20) Redirection properties

UpdateTo (Vars:object, Resetduration:boolean = false): void

You can add or change the original property change value in the run. When the second parameter is set to False, the ease is not replayed, and the easing continues to the new value, and set to true interrupts and replays the easing.

In the last section, we talk about the easing effect of Tweenmax. Tweenmax's easing effect package is com.greensock.easing.*, which contains 16 classes. According to the easein,easeout,easeinout,3 pattern of each class, there are 48 kinds of changes (conjecture, should be left and right). Here's the same introduction:

Three, easing effect:

1,linear linear variation

1323347702666_0y5fa5.jpg

The literal meaning is very good understanding, linear change, is constant speed.

2,back changes.

1323347714143_nxb87v.jpg

Do not know how to explain good, back has the meaning of return, before easing, will first move a distance.

3,bounce bounce Changes.

1323347727494_ej3k3m.jpg

As the name implies, before the change will be a few times back to the origin, as if playing.

4,CIRC Circular change.

1323347737442_16ea1x.jpg

This translation ... Sweat yourself first, the curve of the movement is a circular arc.

5,cubic cube changes.

1323347747979_2vc4wx.jpg

This is more dizzy, similar to a circular change, but smoother.

6,elastic Rubber Band Change

1323347771198_50vw85.jpg

This ... I'm numb ... It's a bit like back changes, but there's a strong fluctuation. Easein and easeout are especially noticeable.

7,expo explosion changes
<ignore_js_op>1323347784057_g9tp5v.jpg

has been very gentle and finished all the changes at the last point.

8,quad Change

1323347793760_r8817a.jpg

I do not know what the meaning of quad means, but relatively ordinary easing. Quadratic square slow action??.

9,quart One-fourth changes.

<ignore_js_op>1323347818911_c16vbs.jpg

I just quart is quarter mean, there are 1/4 of the time is no easing.

10,quint Change

1323347833324_6x00hg.jpg

Baidu What is one of the five births? Dizzy, is 1/5 time without easing?

11,sine sine variation

<ignore_js_op>1323347843701_v09rwr.jpg

Like the sine of the change ~? Guess it.

12,strong changes.

This is not a picture ... Because he doesn't have a picture ... Sweat ... The literal meaning of understanding is a strong change.

The above is 12 kinds of built-in changes, so exactly there are 36 kinds of, that the remaining 4 classes is what to do.

13,easelookup

Contains a static method, fine (), that can be used to obtain an instance of ease directly from string strings. To facilitate the need for some reflection operations. Cases:

Tweenmax.to (ball, 1, {x:200,ease:easelookup.find ("Backeaseinout")});

14,fastease

The Tweenmax version of AS3 has built-in algorithms to accelerate the easing effect. You need to manually open the static method of this class activate (). The easing calculation of 35%~80% can be improved and the whole easing efficiency of 2%~15% is improved.

Easing changes that can be accelerated include: Linear Quad Cubic quart Quint strong these six kinds. To open a method, for example:

Fastease.activate ([Strong, Linear, Quad]);

There is another static method Activateease (Ease:function, Type:int, power:uint): void, which is used to use this optimization method on non-com.greensock easing, for example, with the AS3-band easing class.

15,roughease

Roughease (Strength:number = 1, Points:uint = $, Restrictmaxandmin:boolean = false, Templateease:function = null, taper:St Ring = "None", Randomize:boolean = true, name:string = "")

The usual easing changes are smooth, and if you want a smooth effect, you can use Roughease.

Here is a list of his construction methods, including:

Strength:number: The amplitude of the random point.

Points:uint: The number of random points.

Restrictmaxandmin:boolean: When set to true, changes in random numbers fluctuate between the initial and the end values. When false, the random number changes may exceed this interval.

Templateease:function: Easing template for random point action. The default is Linear.easenone.

Taper:string: Random changes tend to that end, "in" Words tend to start, "out" words tend to end. The default is "none".

Randomize:boolean: When set to true, the easing position will change randomly. If False, the easing position will change to a jagged shape.

Name:string: Name the Roughease instance so that the reference can be obtained later using the static Method ByName ().

Usage:

Example 1, direct use:

Tweenlite.to (Ball, 2, {y:0, ease:RoughEase.create (1, A, true, Bounce.easeinout)});

Example 2, generating an instance call:

var _roughease:roughease = new Roughease (1,20,true, Strong.easeout, "None", true, "superroughease");

Then call directly:

Tweenlite.to (MC, 3, {y:300, ease:rough.ease});

Or:

Tweenlite.to (MC, 3, {y:300, Ease:RoughEase.byName ("Superroughease")});

16,custumease

Self-built easing effect. Basic cannot be written directly. Need to log in to this URL http://blog.greensock.com/customease/use the graphical interface tool to generate code. Then copy the code to your project and apply it. Cases:

Create:

Customease.create ("Mycustomease", [{s:0,cp:0.814,e:0.908},{s:0.908,cp:1.002,e:0.376},{s:0.376,cp:-0.25,e:1}]);

Use:

Tweenmax.to (MC, 2, {x: "+", Ease:CustomEase.byName ("Mycustomease")});

Four, summarize:

Tweenmax has many functions and is constantly being updated and perfected. This time introduced the most commonly used functions, which may have errors and omissions in the place, I hope to find the timely contact me to help me also correct the mistake. ：）

And now he seems to have grown into something tween platform. What else is tweenloader,timelinemax,timelinelite and so on.

Tweenmax.js Documentation