推荐:动画库GSAP|中文手册

2016-5-31    分类: 前端资源,动画库GSAP

jquery animate 动画

gasp

如果只是简单的动画效果可以借助jquery的animate就可以,如果是复杂又不想损耗性能又要充分发挥HTML5性能推荐使用
GSAP是一套高性能的HTML5脚本工具。总之很好用兼容性也很好。
GSAP全称是GreenSock Animation Platform包括以下代码:

TweenLite:是一个极其快、轻量级、灵活的动画工具,为GSAP的底层服务。

TweenMax:是TweenLite的扩展,添加了很多有用的功能如:repeat(), repeatDelay(), yoyo()更多,还默认包括了一些有用的插件。
任意的插件也能在TweenLite上运行。TweenMax免去了你加载一些插件,如: CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin,EasePack, TimelineLite, and TimelineMax。TweenMax和TweenLite语法完全一样。

TimelineLite:是一个强大的排序工具。官方解释的抽象,用我自己的话来说就是一个链式工具,如jquery一样写法都是可以这样写,$('dom').width().css().eq().animate。
这工具就是起到这样的作用,也有点类似队列动画的效果,上一个动画执行完成才能到下一个动画执行。避免了还要去一个个计算delay的时间才实现队列动画效果。TimelineLite也有自己的很多方法。

TimelineMax:是TimelineLite的扩展,又在TimelineLite基础上添加了很多有用的方法。TimelineMax文档

部分效果能兼容IE7/8,基本动画还是能兼容,兼容性还是不错的。

实际用处
jquery的animate的效果很有限,仅支持如height、width、left、top和scrollTop等一些基础效果。如果需要做transforms、color和number的过渡效果jquery
就不支持了非常遗憾。所以GSAP弥补了jquery的animate不足的地方。

效果演示:demo 

 

代码概况:

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

 

myAnimation.duration() //获取动画运行的时间
myAnimation.duration(10) //重新设置动画运行的时间

myAnimation.timeScale(2) //速度的设置,2倍速度,效果相当于把duration的时间改小是一样的

myAnimation.endTime() //提前获取动画运动消耗的时间

mov.eventCallback("onComplete", myFunction, ["param1","param2"])
function myFunction(param1, param2) {
 document.title=111;
}

myAnimation.isActive() //是否在动画中

TweenMax.globalTimeScale() //获取当前正常速度
TweenMax.globalTimeScale(0.5) //设置全局速度是原来速度慢一半
TweenMax.globalTimeScale(2) //比原来速度快2倍

mov.kill({left:true}); //禁用动画某一个种过渡属性

TweenMax.killAll(是否强制完成,是否禁用动画,是否禁用delayedCalls回调,是否禁用timelines);
TweenMax.killAll(true,false,false,false); //默认值都为false,如果第一个参数值为true,意思就是强制他们一定要完成效果或者是回调
TweenMax.killAll(false,true,false,false); //所有过渡动画都停止
TweenMax.killAll(true, true, false, false); //强制动画瞬间结束,并且保留动画结束的时的效果

TweenMax.killChildTweensOf( document.getElementById("fa") ); //父元素fa下的所有元素都禁止运动

mov.pause(6,true); //暂停在第6秒时候的动画,并且禁用任何回调
mov.paused(false); //恢复暂停
mov.paused(true); //暂停
mov.paused(); //获取动画是否暂停

TweenMax.pauseAll(tweens,delayedCalls,timelines);

mov.play(10,true); //从10秒开始动画,并且禁用任何回调
mov.progress( 0.5 ,true); //从进度的百分之50%后开始动画,并且禁用任何回调

 .repeat() //循环
 .repeatDelay() //循环间隔时间

mov.restart(true); //包括delay时间也重置
mov.restart(false); //忽略delay时间,动画立马执行

mov.resume(2); //重置,从2秒时刻开始

mov.reverse(0); //动画从结束状态开始倒退回开始状态
mov.reverse(-10); //动画从倒数第10秒开始逆播
mov.reversed(false); //禁止动画逆播

mov.startTime(2); //过几秒后开始动画,类似于delay属性优先于delay
mov.time(5); //从第5秒开始动画,忽略delay属性
mov.totalDuration(2); //动画持续时间

更多API自行去官网看

全部GASP插件集合打包:https://github.com/thealrivera/GSAP_UI

百度下载: http://pan.baidu.com/s/1nv9zU7v

国内各个版本下载:http://www.bootcdn.cn/gsap/

本地下载:GSAP_UI-master

如果想去官网下载使用,有些功能是需要注册会员收费的!!