代替jquery的animate属性插件–jquery.gsap.js

取代 jquery animate

jquery的动画属性animate执行的效率低，因为考虑兼容性做了很多判断的原因。现在出现了许多特效执行的效率远远高于jquery。之前也有介绍过一插件《velocity.js中文手册 velocity取代jQuery animate()的插件》。

加上jquery本身也没有颜色渐变也不支持transforms属性的渐变。

现在介绍另一个插件jquery.gsap.js，核心是TweenMax.js它才是动画执行代码而且版本必须大于1.8.0，与其说介绍jquery.gsap.js还不如说介绍TweenMax.js。jquery.gsap.js是基于TweenMax.js上扩展的好处就是API跟jquery的animate一样不需要去重新学习新的API这也是它跟velocity.js一样的优点，兼容性很好，也不需要去写专门的兼容前缀样式，如-0-,webkit-.

关于TweenMax.js后面还会继续介绍它，因为它有自己的API可以选择性的使用jquery.gsap.js辅助插件，还有其他很多强大的插件。

首先加载：

加载方式一:（推荐）
<script src="jquery-1.8.3.min.js"></script>
<script src="TweenMax.min.js"></script>
<script src="jquery.gsap.min.js"></script>

或者：

加载方式二:
<script src="jquery-1.8.3.min.js"></script>
<script src="js/plugins/CSSPlugin.min.js"></script>
<script src="js/easing/EasePack.min.js"></script>
<script src="js/TweenLite.min.js"></script> 
<script src="js/jquery.gsap.min.js"></script>

代码风格：

$("#box").animate(
{ 
  x:'10px',
  scaleX:'3',
  skipGSAP:true,  //禁用GSAP
}, 
{
  duration:1000, //1秒内完成动画
  easing:"easeOutStrong", //加速度
  complete:function(){ //动画执行完毕后回调
    document.title=111
  }
});

另一种风格：

$('#box').animate(
  {
   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
  }
);

链式写法：

$('#box').animate({
   left:100,
   borderColor:'red'
},{
   duration:5000
})
.animate({
   top:100,
   borderColor:'yellow'
},{
   duration:2000
});

API文档参考：《推荐：动画库GSAP》

2D、3Dtransforms

旋转：
 rotationX rotationY rotationZ
 不指定坐标默认以rotationZ旋转
 {rotationX:'30deg'}

缩放： 
 scaleX, scaleY
 {scaleX:'3'} //宽为原来的3倍

倾斜：
 skewX, skewY
 {skewX:'30deg'}

位移：
 x, y
 {x:'30px'}

深景色
 {perspective:'500px'}

 旋转中心
{transformOrigin:"left top"}
{transformOrigin:"left 50% -200"} //左偏移50%又减去200

颜色渐变

字体颜色
{color:'red'}

背景颜色
{backgroundColor:'red'}

边框颜色
{borderColor:'red'}

阴影

字体阴影
{ textShadow:"10px 10px 10px red"}
{ textShadow:"10px 10px 10px rgba(255, 255, 255, 0.5)"}

元素阴影
boxShadow: "10px 10px 10px 10px #000"

圆角

borderRadius:"25px"

图片背景定位

backgroundPosition:"-25px -25px"

clip 剪切/裁剪 //提供4种案例效果

{clip:"rect(50px 100px 50px 0px)"} //中间开始到上下展示
{clip:"rect(100px 0px 100px 0px)"} //左下开始到右上展示
{clip:"rect(50px 50px 50px 50px)"} //中间到四周
{clip:"rect(0px 100px 100px 100px)"} //右到左

禁用TweenMax效果，但保留jquery的animate自带效果

$("#box").animate({
   x:'290px',  //没效果
   backgroundColor:'yellow',  //没效果
   left:'290px', //jquery自带的有效果
   skipGSAP:true //禁用GSAP
 }, {
   duration:1000,
   complete:function(){
   document.title=111
  }
});

className 增/删类名

$('.box').animate({
  className:'+=av' //效果为clas="box av"
  className:'-=av' //如果之前是clas="box av" 那么现在是clas="box"
});

动画停止

可以用jquery自带的stop()是兼容的

代替jquery的animate属性插件--jquery.gsap.js