jQuery Easing 動畫效果擴展詳細講解

今天介紹的是jQuery Easing  插件，非常的小。美化排版后是130行左右，要是壓縮了那就更小了。這個插件彌補了jquery里面的動畫效果的不足，是其動畫效果更加強悍。如此強大而且小的插件，如果不好好加以利用，真是浪費。很多國內的朋友就是使用其中的一些效果，幾個簡單的參數。很少有人整理所有效果的參數。下面是我整理出來的：

linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic，
easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart，
easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine，
easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc，
easeOutCirc，easeInOutCirc，easeInElastic，easeOutElastic，easeInOutElastic，
easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce

一共這么多效果參數。字面意思已經很明白，不過想真正清楚動畫的效果還得看演示。

 

The box below will animate using that function and then a graph will appear showing that animation (black dots) against the ideal curve (white line). The  X-axis  is time, the  Y-axis  can be thought of as distance or progression. Each black dot (with a white border) signifies when jQuery actually changed a CSS property. (Note: old curves fade into the background; for comparison)

這段話是原作者的介紹，X軸表示時間，Y軸表示的是動畫效果的變化。查看這些曲線變化，更利於掌握這個插件的效果。
插件支持站：http://gsgd.co.uk/sandbox/jquery/easing/
效果演示站點：http://james.padolsey.com/demos/jquery/easing/
對於想深入研究和只需要效果的朋友，這演示站點絕對是最好的。所有的效果一覽還有上圖示范的動畫參數曲線。

 

如果你曾經使用過這個插件，下面的話就沒有必要看了。直接去查看曲線及效果，運用到自己的站點吧。

下面介紹這個插件的簡單使用方法，
查看jqueryAPI文檔可以看到自定義動畫函數.animate()有四個參數：

params (Options) : 一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 duration (String,Number) : (可選) 三種預定速度之一的字符串(”slow”, “normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000) easing (String) : (可選) 要使用的擦除效果的名稱(需要插件支持).默認jQuery提供”linear” 和 “swing”. callback (Function) : (可選) 在動畫完成時執行的函數

其中參數easing默認有兩個效果：“linear”和“swing”，需要更多的效果就要用上這個插件jQuery Easing 

上面列出的就是所有的動畫效果，使用方法首先當然是調用我們簡單易用的jquery 其次是這個插件。考慮到這個插件很小，可以直接寫在自己的js文檔里面。

開始使用jQuery Easing

 

方法1、設置jQuery默認動畫效果

jQuery.easing.def = “method”;//如：easeOutExpo

 

方法2、jQuery默認動畫

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery內置的動畫效果

如以下代碼：

$(element).slideUp({
    duration: 1000, 
    easing: method, 
    complete: callback
});

 

方法3、使用jQuery自定義動畫函數.animate()

jQuery 的.animate()是自定義動畫的函數，如上面所說，有四個參數，而其中easing的參數就是我們進行動畫效果擴展的方法名稱（如easeOutExpo）。最簡單的使用方法是：

$(myElement).animate({
    left: 500,
    top: 500
}, 'easeOutExpo');

 

James Padolsey對jQuery1.3.2的animate函數進行了修改擴展：

jQuery.fn.animate = (function(_anim){
    var jQEasing = jQuery.easing;
    return function(prop, duration, easing, callback) {
        var props = {}, optall, i, hasEaser = false;
        for ( i in prop ) {
            if ( jQuery.isArray(prop[i]) ) {
                hasEaser = true;
                props[i] = prop[i][1];
                prop[i] = prop[i][0];
            }
        }
        opt = jQuery.speed(duration, easing, callback);
        if (hasEaser) {
            opt.step = (function(_step){
                return function(now, fx) {
                    var end = fx.end, easeFn;
                    if ( easeFn = props[fx.prop] ) {
                        fx.now = jQEasing[easeFn]( now/end, now, 0, end, end );
                    }
                    _step && _step.call( fx.elem, fx.now, fx );
                };
            })(opt.step);
        }
        opt.complete = opt.old || callback || jQuery.isFunction(easing) && easing;
        return _anim.call( this, prop, opt );
    };
})(jQuery.fn.animate);

在jQuery1.4中這種方式已經被引入，所以jQuery1.4中不需要添加jQuery的animate()擴展，我們就可以使用下面的更加方便代碼啦：

$(myElement).animate({
    left: 500,
    top: [500, 'easeOutBounce'] 
}, 1000,'swing');

jQuery1.4 的animate()+Easing

jQuery(myElement).animate({
    left: [500, 'swing'],
    top: [200, 'easeOutBounce']
});

或者：

 jQuery(myElement).animate({
       left: 500,
       top: 200
}, {
       specialEasing: {
            left: 'swing',
            top: 'easeOutBounce'
        }
});