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