GSAP(TimelineMax、TweenMax)
What is GSAP?
GSAP (GreenSock Animation Platform) is a flash has been developed from the era to today's professional animation library.
GSAP advantage
1, fast. GSAP optimized performance animation, and CSS to make it to achieve the same high-performance animation.
2, lightweight and modular. The modular structure of the plug-holder of lightweight core engine, TweenLite bag is very small (substantially less than 7kb). GSAP provides TweenLite, TimelineLite, TimelineMax and TweenMax different functional animation module, you can use as needed.
3, no dependencies.
4, flexible control. Not limited to the linear sequence, an animation sequence may overlap, you can control the precise time, flexibility with minimal code to achieve animation.
GSAP provides four library files available to users
1.TweenLite: This is the core part of GSAP animation platform, using it can be used to achieve most of the animation effects, suitable to implement a simple animation of some elements.
2.TimelineLite: a powerful, lightweight tool sequence, it is stored as a tween container can easily between the overall control motion tween, motion tween management and the precise time between the relationship between each other. For example, various states of animation, Pause, reverse, restart, speed up, slow down, seek time, add labels and so on. It is suitable to implement some complex animation.
3. TimelineMax : TimelineLite extension, providing the same functionality together with useful (but not necessary) features, such as repeat, repeatDelay, yoyo, currentLabel ( ) and the like. TimelineMax ultimate goal is to become a fully functional tool, not a lightweight.
4. TweenMax : TimelineLite can do everything done, and the additional non-essential functions, such as the repeat, yoyo, repeatDelay (repetition delay) and the like. It also includes many common plug-ins, such as CSSPlugin, so you do not need to load multiple files themselves. Focus on the full-featured, rather than lightweight.
start using
1. Load File
<script src="js/greensock-js/TweenMax.min.js"> </script>
2. animation
Animation of three elements:
- 1. animation target audience, you need to slow moving objects
- 2. The duration of the animation
- 3. Change the properties
TweenMax( target:Object, duration:Number, vars:Object ) ;
.to (This method is used to create a specified target attribute from the current property to TweenMax animation object)
TweenMax.to ([obj1, obj2, obj3], 1, {x: 100}); (a plurality of objects to be animated)
.from (by animating a starting point to initialize TweenMax, starting from the set point corresponds to animation)
.fromTo (provided by the animation start and end points to initialize a TweenMax, corresponding to the second animation from the set point to the set point)
TweenMax.fromTo ([element1, element2], 1, the initial starting point of the animation {x: 200}, the starting point of the end of the animation {x: 500});
.staggerTo (tagger series production method of a plurality of targets are spaced animation sequence, corresponding to an array of a plurality of TweenMax. set the starting interval for each animation. As is not set to zero and begin the animation.)
TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, 间隔时间stagger:Number....)
.staggerFrom (TweenMax to initialize a set of animation sequences by setting the end point)
Note: stagger series method can use the property cycle to cycle animate parameter values.
.staggerFromTo (by setting the start and end of the animation sequence to initialize a TweenMax)
You can also use the property cycle
.delayedCall (function to provide a simple method called after the time (or frame) is set)
TweenMax.delayedCall( delay:Number, callback:Function, params:Array, scope:*, useFrames:Boolean )
.set (target attribute value set immediately without generating a transition animation, the animation corresponding to the time 0. TweenMax and returns the object.)
TweenMax.set( target:Object, vars:Object )
Learn basic animation of the initial value
delay:Number
Before the start of the animation delay in seconds (when compared with the number of frames in frame units).
ease: Ease (or Function or String)
Transition effect curve speed (slow effect). You can set a variety of easing controls the rate of change of the animation, giving it a certain "feel" in the parameters of the animation. E.g. Elastic.easeOut or Strong.easeInOut. The default is Power1.easeOut.
paused: Boolean
If set to true, the animation will be suspended immediately upon creation. Default false
lazy: Boolean
Deferred rendering
When rendering animation for the first time and read its starting value, will automatically default "deferred renderer" that particular moment, which means that it will try to delay the rendering (write value) until the last time point. This improves performance because it avoids some browsers do read / write / read / write layout bumps.
If you want to disable deferred rendering inter-specific supplement can be set lazy: false. Or due to the duration between the zero padding is not performed by default deferred rendering, so you can set lazy: true, etc. to provide deferred rendering rights TweenLite.set (element, {opacity: 0, lazy: true}); .
In most cases, you will not need to set lazy.
repeat: Number
After the first animation to be completed repetitions. For example, if a repeat is 1, the animation will play twice in total (initial player plus 1 repeat). To repeat indefinitely, use -1. repeat should always be an integer.
repeatDelay: Number
The number of seconds between each repetition (or frame). For example, if the repeat repeatDelay is 2 and is 1, the animation will be played back first, and then wait before repeating one second, and then play it again, and then waits for one second then the last repetition.
yoyo: Boolean
If yoyo is true, then repeat the animation will be back and forth. The default is false.
For example, when you set up a repeat: 2, if not set yoyo, then the animation is such 123-123-123
If you set the yoyo, the animation is 123-321-123
yoyoEase: Ease | Boolean
When defining animation return, how effective easing, default false, easing effect when returned in reverse during forward.
For example, animation effects forward ease: Power1.easeOut, becomes the swivel is ease: Power1.easeIn. If set to true, when the forward rotation is the same for ease: Power1.easeOut.
It may also be provided to ease a specific effect, e.g. Power2.easeOut.
Starter: Object
Animate property value at the start
cycle: Object
(Offset) movie attribute set group stagger. While defining the animation target stagger use the same property (e.g., x: 100, rotation: 90), but you can use to set an attribute group cycle (e.g., cycle: {x: [100, -100], rotation: [30 , 60, 90]}), may also be used keywords function (e.g., {x: function () {return Math.random () * 200;}})
cycle applies to staggerTo (), staggerFrom () and staggerFromTo ().
Animation common event
....
What is TimelineLite / TimelineMax?
TimelineLite / TimelineMax is GreenSock animation platform animation organization, ordering, management tools, you can create a timeline (timeline) as a moving container or other timeline, which makes the whole animation control and accurate time management becomes simple.
Imagine, if you do not create a timeline using TimelineLite / TimelineMax, then build complex animation sequences will be very troublesome, because you need to use the delay to each animation set the start time.
The following is a basic example does not use the timeline of the animation sequence:
TweenLite.to(element, 1, {left:100});
TweenLite.to (element, 1, {top: 50, delay: 1}); // 1 second delay before, a subsequent animation
TweenLite.to (element, 1, {opacity: 0, delay: 2}); // before a 2 second delay, an animation connection
The above code "left" attribute of the element is 100, then the "top" is set to 50, and finally the "transparency" is set to 0 (note that all other delay except the first animation have to spend). But imagine, if you want the duration of the first animation increased to 1.5, then you need to adjust each subsequent delay.
If you want to pause () the entire animation sequence or restart () it, or reverse () it is in operation or jump to a specific point in the entire movie, it becomes quite confusing (or impossible), but it is very TimelineMax simple:
var tl = new TimelineLite ();
tl.add (TweenLite.to (element, 1, {left: 100})); // add to an animation timeline
tl.add (TweenLite.to (element, 1, {top: 50})); // add to the timeline to the end of a movie, a movie that is continuous with the front
tl.add (TweenLite.to (element, 1, {opacity: 0})); // add to the timeline to the end of a movie, a movie that is continuous with the front
// Control Timeline
tl.pause();
tl.resume();
tl.seek(1.5);
tl.reverse();
...
Or use the simple to () method call and chain to make it more concise:
var tl = new TimelineLite ();
tl.to(element, 1, {left:100}).to(element, 1, {top:50}).to(element, 1, {opacity:0});
Now, you can adjust any animation without having to worry about the delay time chaos will happen. Increasing the duration of the first animation, everything will be automatically adjusted.
TimelineMax basic use
.TimelineMax( vars:Object ) ;
Build a TimelineMax example, create a timeline.
// Create a duplicate three times for one second intervals of the time axis is performed when the end of the axis myFunction ()
var tl = new TimelineMax({repeat:3, repeatDelay:1, onComplete:myFunction});
// add an animation
tl.add( TweenLite.to(element, 1, {left:200, top:100}) );
// add at the end of another animation timeline
tl.add( TweenLite.to(element, 0.5, {opacity:0}) );
// add an animation by .to () method, was added in 0.5 seconds at the end of the timeline
tl.to(element, 1, {rotation:30}, "+=0.5");
// Reverse Play timeline
tl.reverse();
// insert a tag at three seconds
tl.addLabel("spin", 3);
// insert a movie at the tag
tl.add( new TweenLite(element, 2, {rotation:"+=360"}), "spin");
// jump to the label at the start of play
tl.play("spin");
// insert another in the Timeline Timeline
var nested = new TimelineMax();
nested.to(element2, 1, {left:200}));
tl.add(nested);
...
..
.
GSAP (TimelineMax, TweenMax) Chinese document: https://www.tweenmax.com.cn/api/tweenmax/