如何使用TweenMax库做出酷炫的动画效果

今天给大家介绍一个JS库，可以做出动态而且酷炫的动画效果。

闲话不多说，先看看效果

TweenMax 是GreenShock（官网是 https://greensock.com）中的一个比较常用的工具。其他的还有TweenLite, TweenLinelite, TweenLineMax等等。这里只介绍TweenMax，其他几种工具使用方法和TweenMax类似。

TweenMax, 说白了，就是动画界的jQuery，它将JS的动画效果封装了起来。

TweenMax给我们提供了很多有用的方法，通过使用这些方法，可以更快速的开发出我们想要的动画效果。相比于CSS动画，JS动画，它更加强大而且易用。

下面就给大家介绍一些常用的方法以及案例。

A. TweenMax.from(target:Object, duration:Number, vars:Object)

作用：设置一个起始的属性状态，产生一个持续时间的动画，变成当前的属性状态。

只有一个对象参数用来定义动画的初始属性。

target: Object - 应该影响其属性的目标对象（或对象数组）,目标可以是单个元素，元素数组或者我们常用的jQuery对象或者CSS字符串数组，如‘#tween’或者‘.tween’

duration: Number - 指的是动画的持续时间

vars: Object - 一个对象，定义你想要的动画的每个属性的起始值以及任何特殊属性 onComplete， ease例如，等等。例如，对于元素mc，mc.x 要从100和 mc.y 200之间产生动画 然后调用 myFunction，可以执行以下操作：TweenMax.from(mc, 1, {x:100, y:200, onComplete:myFunction}); onComplete在这里用于动画结束时的回调。

案例：TweenMax.from('.tween',3,{opacity:0,x:50, ease: Power4.easeOut},0.4);

B.TweenMax.to(target:Object, duration:Number, vars:Object)

只有一个对象参数用来定义动画的结束属性，各个参数和TweenMax的一样，只不过产生的效果正好相反。

案例：TweenMax.to('.tween',3,{opacity:1,x:50, ease: Power4.easeOut},0.4)

C.TweenMax.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object )

有两个对象参数，分别用来定义初始动画参数和结束参数。其他参数作用和之前的类似。

案例：TweenMax.fromTo('.tween',3,{opacity:0,y:50, ease: Power4.easeOut},{opacity:1,y:0, ease: Power4.easeOut},0.4);

D.TweenMax.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number | Object | Function, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* )

stagger顾名思义，就是错落的意思。这里用来产生错开的动画效果。

而且相对于from，多了一个参数stagger,用来定义错落的动画间隔。

案例：TweenMax.staggerFrom('.tween',3,{opacity:0,x:50, ease: Power4.easeOut},0.4);

E.TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number | Object | Function, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* )

作用和staggerFrom正好相反。

F.TweenMax.staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number | Object | Function, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* )

意义和fromTo差不多，但是多了一个“错落”的效果。

案例：TweenMax.staggerFromTo('.tween',3,{opacity:0,x:50, ease: Power4.easeOut},{opacity:1,x:0, ease: Power4.easeOut},0.4);

好了，今天暂时就介绍到这里。TweenMax是GSAP里面比较常用的一个工具，我们可以用它来快速做出各种各样的动画效果。如果大家还想了解更多的话，请点点关注，谢谢大家！