当前的位置:首页> 素材源码 >    TweenMax.js-移动端和现代互联网的超高性能专业级动画插件
雕刻时光

雕刻时光

TweenMax.js-移动端和现代互联网的超高性能专业级动画插件

来源:互联网 作者:未知 2020-05-10 浏览量: 139 分享到:

文章摘要 / summary

TweenMax 是GreenShock(官网是 https://greensock.com)中的一个比较常用的工具。其他的还有TweenLite, TweenLinelite, TweenLineMax等等。这里只介绍TweenMax,其他几……

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

闲话不多说,先看看效果

TweenMax.js-移动端和现代互联网的超高性能专业级动画插件
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);

TweenMax.js-移动端和现代互联网的超高性能专业级动画插件

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

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

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

TweenMax.js-移动端和现代互联网的超高性能专业级动画插件

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);

TweenMax.js-移动端和现代互联网的超高性能专业级动画插件

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);

TweenMax.js-移动端和现代互联网的超高性能专业级动画插件

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

作用和staggerFrom正好相反。

TweenMax.js-移动端和现代互联网的超高性能专业级动画插件

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.js-移动端和现代互联网的超高性能专业级动画插件

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

免责声明

文章来源:互联网  作者:未知
本站所转载文章内容均系原作者个人观点,不代表本站对其观点赞同或支持,版权归原作者所有,转载请保留出处。