GSAP动画库介绍

  • 内容
  • 评论
  • 相关

官网地址:http://www.greensock.com/
github地址:https://github.com/greensock/GreenSock-JS/

GSAP介绍
GSAP全称是GreenSock Animation Platform,是一个JS动画框架。
GSAP有两个版本,一个为ActionScript 版本,已经在flash平台上运行多年,是一个“轻量级”、“高效率”、强大的2D动画引擎,一直深受ASer(学ActionScript的人都叫自己 ASer)的欢迎,学AS的人,没有一个说是不知道、没使用过GSAP的。
GSAP JS顾名思义是指GSAP的js版本,GSAP JS是GreenSock公司新出的一个2D动画引擎,可以说是AS版本的移植版,虽然功能还不够AS版本的完善,但是一样是非常强大、高效、好用的,据说它的运行速度是JQuery的20倍。当然,这只是说动画方面的,jQuery也有自己的强大之处(比如jQuery强大的选择器)。

GSAP优点
1、速度快。GSAP专门优化了动画性能,使之实现和CSS一样的高性能动画效果。
2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量,TweenLite包非常小(基本上低于7kb)。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块,你可以按需使用。
3、没有依赖。
4、灵活控制。不用受限于线性序列,可以重叠动画序列,你可以通过精确时间控制,灵活地使用最少的代码实现动画。
5、任何对象都可以实现动画。
 
GSAP的四个动画模块
TweenLite:这是GSAP动画平台的核心部分,使用它可以用来实现大部分的动画效果,适合来实现一些元素的简单动画效果。
TimelineLite:一个强大的,轻量级的序列工具,它就如一个存放补间动画的容器,可以很容易的整体控制补间动画,且精确管理补间动画彼此之间的时间关系。比如动画的各种状态,Pause,reverse,restart,speed up,slow down,seek time,add labels等。它适合来实现一些复杂的动画效果。
TimelineMax:扩展TimelineLite,提供完全相同的功能再加上有用的(但非必需)功能,如repeat,repeatDelay,yoyo,currentLabel()等。TimelineMax的目标是成为最终的全功能工具,而不是轻量级的。
TweenMax:可以完成TimelineLite做的每一件事,并附加非必要的功能,如repeat,yoyo,repeatDelay(重复延迟)等。它也包括许多常见的插件,如CSSPlugin,这样您就不需自行载入多个文件。侧重于全功能的,而不是轻量级的。

建议在开发中使用TweenMax这个全功能的js文件,它包括了GreenSock动画平台的所有核心的功能。

代码实现

var mov=new TweenMax.to(
  '#box', //操作对象
  2, //动画持续时间
  {
    css:{
      left:100,
      opacity:0.3
    },
    startAt:{left:10}, //初始化
    delay:0, //1秒后开始执行动画
    ease:Back.easeOut, //加速度效果
    repeat:0, //多循环1次,也就是一共重复执行了2次同样的动画,-1就会无限重复循环
    repeatDelay:0, //每次重复循环时间3秒,需要配合repeat属性
    yoyo:false, //如果true,动画的循环是倒序,需要配合repeat属性
    paused:false, //如果true,动画暂停
    overwrite:'auto',
    onStart:function(){ //动画开始前回调
       document.title='开始前执行'
    },
    onStartParams:["{self}", "参数"],
    onComplete:function(a,b){ //动画结束后回调
       document.title='动画完成'
    },
    onCompleteParams:["{self}", "param2"], //为onComplete传参数,其中{self}值的是mov
    immediateRender:true,
    onUpdate:function(a,b){ //初始化执行一次,动画过程回调,以后动画有运动都还会不停的执行,直到动画结束才停止
      // console.log(a.isActive());
    },
    onUpdateParams:["{self}", "参数"], //为onUpdate提供参数
    useFrames:false
 });

链式写法:GASP的链式写法要靠TimelineLite来实现的,如:

var tl = new TimelineMax({repeat:-1, delay:0, repeatDelay:2}); //公共属性可以写这里
tl.to('#box',10,{left:100,borderColor:'red'})  //独立属性可以各自写
  .to('#box',2,{top:100,borderColor:'yellow'});

或者

推荐这样写,直观点

var tl = new TimelineMax({repeat:2, repeatDelay:1});
    tl.add( TweenMax.to(element, 1, {left:100}) );
    tl.add( TweenMax.to(element, 1, {top:50}) );
    tl.add( TweenMax.to(element, 1, {opacity:0}) );

GASP也对jquery的animate功能进行扩展,添加了一个jquery.gsap.js,加载此插件后就可以像写jquery一样去写GASP了就免去了学习新的API,参考《代替jquery的animate属性插件--jquery.gsap.js》

批量操作动画

TweenMax.staggerFrom('.box', 5, {y:"150"}, 5); //动画逆播,获取全部class为box的元素,动画时间5秒,从y是150的位置开始到0,每个元素之间间隔5秒
TweenMax.staggerTo('.box', 1, {y:"+=150", opacity:0}, 0.2); //按顺序播放
TweenMax.staggerFromTo('.box', 5, {y:"150",x:'100'},{y:"00",x:'0'}, 5); //自行设置开始结束播放
TweenMax.staggerFrom('.box', 2, {
  cycle:{
    y:[50,-50], //第一个元素从50开始,第二个元素从-50开始,以此类推
    y:function(i){
       console.log(this); //this是dom元素本身
       return i * 20; //i是当前元素的索引
    }
 }
},2);

属性链式写法

box.repeat(2).yoyo(true).repeatDelay(0.5).play();

延迟回调,指定几秒后才发生回调

TweenMax.delayedCall(3, myFunction, [true, "param2"]);

function myFunction(param1, param2) {
 console.log(param1, param2);
}

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注