jQuery中Animate进阶用法（二）

Step

Type: Function( Number now, Tween tween )
每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。

这个是如此的模糊，让我们看下实例吧！

var k=0;
 $( ".block:first" ).animate(
          {
            left: 100,top:200
          },
          {
            duration: 1000,
            step: function( now, fx ){
                k++;
                if(k==1) console.log(fx);
            }
);

你能想象输出结果吗？

让我们来看下jQuery源码吧，与先前的版本差别挺大的，所以用了最新的1.9

jQuery.fx = Tween.prototype.init;
...
function Tween( elem, options, prop, end, easing ) {
    return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;
Tween.prototype = {
    constructor: Tween,
    init: function( elem, options, prop, end, easing, unit ) {
        this.elem = elem;
        this.prop = prop;
        this.easing = easing || "swing";
        this.options = options;
        this.start = this.now = this.cur();
        this.end = end;
        this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
    },
...}

ok！你应该有个大致的轮廓了，让我详细讲解下参数的意义吧~~

fx

属性	类型	值
easing	字符串	动画方式"linear",swing,easeIn,easeOut...等
elem	DOM元素	正在动画的元素
end	数值	动画结束值
now	数值	动画当前值
options	对象	参数
options.duration	数值	传到动画动的duration
options.queue	字符串	动画队列
pos	数值	在动画过程中从0.0到1.0
prop	字符串	正在变化的css属性
start	数值	CSS属性开始变化的值
unit	字符串	CSS值的单位

知道这些，我们可以做很多事！

jQuery Animation实现css3动画 ：
jQuery Animation的工作原理是通过将元素的css样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

像CSS3好多效果因为不是数值的，所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，这些方法的一个特点就是它们的值是字符和数字混合在一起的。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果。

如果我们自己用Javascript实现CSS3动画，那么我们只能自已通过setInterval()方法来实现，实现起来比较复杂。其实animate()方法就是基于setInterval()方法进行工作的，但是可以用方便的设置动画速度，还可以设置是匀速还是变速。animate()方法的第二种用法有个stp参数规定动画的每一步要执行的函数。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了。

 CSS

#box {
  width:100px;
  height:100px;
  position:absolute;
  top:100px;
  left:100px;
  text-indent: 90px;
  background-color:red;
}

Html

 <div id="box"></div>

Javascript

var s=0;
$('#box').animate({  textIndent: 0 }, {
   //这里的now参数即前面设置的数值，即textIndent: 0中的0，然后后面还有，则以后面的数值为准。
   duration:2000,
   step: function(now,fx) {
        s++;
        fx.start=45;//你可以尝试修改start,end值，来看rotate的变化
        fx.end=0;        
        if(s==1) console.log(fx.start+"----"+fx.end+"---"+fx.startTime);
      $(this).css('-webkit-transform','rotate('+now+'deg)');
   }
});

这里使用text-indent属性来触发动画，是因为我们这里没有文字，所以使用text-indent而不会影响到元素的样式效果，这里也可以用font-size等。然后使用animate()方法产生的节奏来实现动画。

参考文献

http://stackoverflow.com/questions/17038511/jquery-animate-step-function-with-attribute-value-initialization

http://www.css119.com/archives/1640

http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/

http://www.bennadel.com/blog/1856-Using-jQuery-s-Animate-Step-Callback-Function-To-Create-Custom-Animations.htm