jquery動畫，基礎以及我發現的新大陸 - puyongsong－IT工程師數位筆記本

文章出處

$.animate()在jquery官方介紹有2中方式，其實我發現的新大陸也是第二種方式的擴展！

一、$.animate( properties [, duration ] [, easing ] [, complete ] )

參數介紹（[]包裹的參數可省略）

properties

　　類型: PlainObject

　　一個CSS屬性和值的對象,動畫將根據這組對象移動。
duration (默認: 400)

　　類型: Numberor String

　　一個字符串或者數字決定動畫將運行多久。（注：默認值: "normal"，三種預定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數值(如：1000) ）
easing (默認: swing)

　　類型: String

　　一個字符串，表示過渡使用哪種緩動函數。（注：jQuery自身提供"linear" 和 "swing"）。

　　　　這個速度函數可以自定義，后面有介紹。

complete

　　類型: Function()

　　在動畫完成時執行的函數。

舉2個例子吧！

示例代碼：

$(".btn2").click(function(){
        $("#btn2").animate({height:"300px"},2000,'swing',function(){alert('hello world')});
    });

示例代碼：

$(".btn1").click(function(){
     $("#btn1").animate({height:"300px"});
});

　　以上2種效果為方式一的動畫效果，也是常用的jquery動畫。

二、$.animate( properties, options )

參數介紹：

properties

類型: PlainObject

一個CSS屬性和值的對象,動畫將根據這組對象移動。
options

類型: PlainObject

一組包含動畫選項的值的集合。支持的選項:
- duration (default: 400)
  
  Type: Numberor String
  
  一個字符串或者數字決定動畫將運行多久。（愚人碼頭注：默認值: "normal"，三種預定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數值(如：1000) ）
- easing (default: swing)
  
  Type: String
  
  一個字符串，表示過渡使用哪種緩動函數。（愚人碼頭注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件）
- queue (default: true)
  
  Type: Boolean or String
  
  一個布爾值，指示是否將動畫放置在效果隊列中。如果為false時，將立即開始動畫。 從jQuery1.7開始，隊列選項也可以接受一個字符串，在這種情況下，在動畫被添加到由該字符串表示的隊列中。當一個自定義的隊列名稱被使用，動畫不會自動啟動;你必須調用.dequeue("queuename")來啟動它。
- specialEasing
  
  Type: PlainObject
  
  由此方法的第一個參數properties定義的一個或多個CSS屬性，及其相應的緩動函數組成的鍵值對map。( 1.4 新增)
- step
  
  Type: Function( Number now, Tween tween )
  
  每個動畫元素的每個動畫屬性將調用的函數。這個函數為修改Tween 對象提供了一個機會來改變設置中得屬性值。
- progress
  
  Type: Function( Promiseanimation, Numberprogress, NumberremainingMs )
  
  每一步動畫完成后調用的一個函數，無論動畫屬性有多少，每個動畫元素都執行單獨的函數。 (version added: 1.8)
- complete
  
  Type: Function()
  
  在動畫完成時執行的函數。
- done
  
  Type: Function( Promiseanimation, BooleanjumpedToEnd )
  
  在動畫完成時執行的函數。 (他的Promise對象狀態已完成). (version added: 1.8)
- fail
  
  Type: Function( Promiseanimation, BooleanjumpedToEnd )
  
  動畫失敗完成時執行的函數。(他的Promise對象狀態未完成)。 (version added: 1.8)
- always
  
  Type: Function( Promise animation, Boolean jumpedToEnd )
  
  在動畫完成或未完成情況下停止時執行的函數。(他的Promise對象狀態已完成或未完成)。 (version added: 1.8)

這里有2個參數的應用要單獨說明一下：

Step Function

第二個版本的.animate()提供了一個step選項- 每步動畫執行后調用的回調函數。啟用自定義動畫類型或改變正在執行的動畫，此功能是非常有用。它接受兩個參數（now 和 fx），this是當前正在執行動畫的DOM元素集合。

now: 每一步動畫屬性的數字值
fx: jQuery.fx 原型對象的一個引用，其中包含了多項屬性，比如elem 表示前正在執行動畫的元素，start和end分別為動畫屬性的第一個和最后一個的值，prop為進行中的動畫屬性。

Easing（緩動）

.animate()還有一個參數是一個字符串命名的使用緩動函數。一個緩動函數指定用于動畫進行中在不同點位的速度。在jQuery庫中是默認的時調用 swing。在一個恒定的速度進行動畫，請調用 linear. 更多的緩動函數要使用的插件，或者自定義。

直接上代碼：

$('#clickme').click(function() {
        $('#test').animate({
            width: 'toggle',
            height: 'toggle'
        }, {
            duration: 5000,
            specialEasing: {
                width: 'linear',
                height: 'swing'
            },
            complete: function() {
                $(this).after('<div>Animation complete.</div>');
            }
        });
    });

現在新大陸來了！

jQuery.easing = {
        linear: function( p ) {
            return p;
        },
        swing: function( p ) {
            return 0.5 - Math.cos( p * Math.PI ) / 2;
        }
    };

　　這是jquery里animate的Easing源碼！如果你覺得就linear和swing不能滿足你的要求了，咋們可以擴展一些速度函數。

jQuery.extend(jQuery.easing, {
        easeOutBounce: function (x, t, b, c, d) {
            console.log(x);//0-1
            console.log(t);//0-2500
            console.log(b);//0
            console.log(c);//1
            console.log(d);//2500
//            return t/1000;
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },easeOutCubic: function (x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
//            return x;
        }
    })

　　現在Easing的值就多了2個選擇：easeOutBounce和easeOutCubic。（不要問我這算法的問題，呵呵，我也是百度的！）

來，上代碼試試看看咯！

$('.new').click(function() {
        var ele = $("#new");
        ele.css({ "left": "0", "top": "0", "transform": "rotateZ(0deg)" });
        $({ left: 0, top: 0, tran: 0 }).animate({
            left: 800, top: 180, tran:360
        }, {
            duration: 2500,
            specialEasing: {
                left: 'easeOutCubic',
                top: 'easeOutBounce'
            },
            step: function () {
                console.log(this.left);
                ele.css({ "left": this.left + "px", "top": this.top + "px", "transform": "rotateZ(" + this.tran + "deg)" });
            },
            complete: function () {
                console.log(this.left);
                ele.css({ "left": "800px", "top": "180px", "transform": "rotateZ(360deg)" });
            }
        });
    });

　　這種寫法真是第一次見，就忍不住自己試了試，感覺還可以，就想寫出來分享給大家！　　

其實就是自定義了一個動畫速度函數！

我把本地的測試效果都移除了，還是把完整代碼附給大家試試吧！

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>nick jq animate</title>
</head>
<body >
<button class="reset">重置樣式</button>
<div id="btn1" class="nick" style="background-color:aqua;"><button class="btn1">btn1</button></div>
<div id="btn2" class="nick" style="background-color:#eee;"><button class="btn2">btn2</button></div>
<div id="test" class="nick"><button id="clickme">clickme</button><button class="btn2">btn2</button></div>
<div id="new" class="nick" style="width:200px;height:100px;background-color:cadetblue;position:absolute;"><button class="new">clickme</button></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script>
    $(".btn1").click(function(){
        $("#btn1").animate({height:"300px"});
    });

    $(".btn2").click(function(){
        $("#btn2").animate({height:"300px"},2000,'swing',function(){alert('hello world')});
    });

    $('#clickme').click(function() {
        $('#test').animate({
            width: 'toggle',
            height: 'toggle'
        }, {
            duration: 3000,
            specialEasing: {
                width: 'linear',
                height: 'swing'
            },
            complete: function() {
                $(this).after('<div>Animation complete.</div>');
            }
        });
    });

    $('.new').click(function() {
        var ele = $("#new").stop(true, false);
        ele.css({ "left": "0", "top": "0", "transform": "rotateZ(0deg)" });
        $({ left: 0, top: 0, tran: 0 }).animate({
            left: 800, top: 180, tran:360
        }, {
            duration: 2500,
            specialEasing: {
                left: 'easeOutCubic',
                top: 'easeOutBounce'
            },
            step: function () {
                console.log(this.left);
                ele.css({ "left": this.left + "px", "top": this.top + "px", "transform": "rotateZ(" + this.tran + "deg)" });
            },
            complete: function () {
                console.log(this.left);
                ele.css({ "left": "800px", "top": "180px", "transform": "rotateZ(360deg)" });
            }
        });
    });
    jQuery.extend(jQuery.easing, {
        easeOutBounce: function (x, t, b, c, d) {
            console.log(x);//0-1
            console.log(t);//0-2500
            console.log(b);//0
            console.log(c);//1
            console.log(d);//2500
//            return t/1000;
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },easeOutCubic: function (x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
//            return x;
        }
    })


    $('.reset').click(function(){
        $(".nick").css({ height:"" });
    });
</script>
</body>
</html>

個人能力有限，只能寫到這里了，希望對大家有所幫助，還望大家多多評論，指教！

'); } }); }); $('.new').click(function() { var ele = $("#new"); ele.css({ "left": "0", "top": "0", "transform": "rotateZ(0deg)" }); $({ left: 0, top: 0, tran: 0 }).animate({ left: 800, top: 180, tran:360 }, { duration: 2500, specialEasing: { left: 'easeOutCubic', top: 'easeOutBounce' }, step: function () { console.log(this.left); ele.css({ "left": this.left + "px", "top": this.top + "px", "transform": "rotateZ(" + this.tran + "deg)" }); }, complete: function () { console.log(this.left); ele.css({ "left": "800px", "top": "180px", "transform": "rotateZ(360deg)" }); } }); }); jQuery.extend(jQuery.easing, { easeOutBounce: function (x, t, b, c, d) { console.log(x);//0-1 console.log(t);//0-2500 console.log(b);//0 console.log(c);//1 console.log(d);//2500 // return t/1000; if ((t /= d)

文章列表