jQuery Easing 使用方法及其圖解

本文轉載自查看原文 2017-03-17 00:58 18021 JavaScript

從jQuery API 文檔中可以知道，jQuery自定義動畫的函數.animate( properties [, duration] [, easing] [, complete] )有四個參數：

properties：一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
duration(可選)：動畫執行時間，其值可以是三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing(可選)：要使用的過渡效果的名稱，如："linear" 或"swing"
complete(可選)：在動畫完成時執行的函數

其中參數easing默認有兩個效果："linear"和"swing"，如果需要更多效果就要插件支持了， jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多種效果，大家可以點擊這里去看每一種easing的演示效果，下面詳細介紹下其使用方法及每種easing的曲線圖。

引入之后，easing參數可選的值就有以下32種：

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

jQuery 1.4版本中對animate()方法，easing的方法進行了擴展，支持為每個屬性指定easing方法，詳細請參考這里，如：

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

也可以用另外一種寫法：

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

使用jQuery內置動畫函數如slideUp()、slideDown()等來指定easing效果，以下兩種方法都可以：

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

jQuery easing 圖解

以下圖解可以讓你更容易理解每一種easing的效果


1. linear	2. swing	3. easeInQuad	4. easeOutQuad	5. easeInOutQuad	6. easeInCubic

7. easeOutCubic	8. easeInOutCubic	9. easeInQuart	10. easeOutQuart	11. easeInOutQuart	12. easeInQuint

13. easeOutQuint	14. easeInOutQuint	15. easeInExpo	16. easeOutExpo	17. easeInOutExpo	18. easeInSine

19. easeOutSine	20. easeInOutSine	21. easeInCirc	22. easeOutCirc	23. easeInOutCirc	24. easeInElastic

25. easeOutElastic	26. easeInOutElastic	27. easeInBack	28. easeOutBack	29. easeInOutBack	30. easeInBounce

31. easeOutBounce	32. easeInOutBounce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈跳</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script src="js/demo.js"></script>
</head>
<body>
<div style="width: 80%;margin: 40px auto;padding: 10px;">
    <div class="item">
        <div id="item-container" class="item-container"></div>
        <div id="item-shadow" class="item-shadow"></div>
    </div>
    <div class="item">
        <div class="item-container"></div>
        <div class="item-shadow"></div>
    </div>
</div>
</body>
</html>

demo

*{
    margin: 0;
    padding: 0;
}
.item{
    position: relative;
    display: inline-block;
    width: 300px;
    height: 200px;
    margin: 20px;
}
.item-container{
    position: absolute;
    z-index: 99;
    width: 300px;
    height: 200px;
    border-radius: 20px;
    background-color: #434343;
    border: 3px solid #242424;
    cursor: pointer;
    /*
    使用多層陰影實現<span class="wp_keywordlink_affiliate"><a href="http://www.yyyweb.com/tag/%e6%8c%89%e9%92%ae" title="查看按鈕中的全部文章" target="_blank">按鈕</a></span>立體效果
    第一層：Y軸偏移1像素、不透明度為0.25的白色外陰影效果
    第二層：Y軸偏移1像素、不透明度為0.25的白色內陰影效果
    第三層：偏移位0、不透明度為0.25的黑色外陰影效果
    第四層：Y軸偏移20像素、不透明度為0.03的白色內陰影效果
    第五層：X軸偏移-20像素、Y軸偏移20像素、不透明度為0.15的黑色內陰影效果
    第六層：X軸偏移20像素、Y軸偏移20像素、不透明度為0.05的白色內陰影效果
    */
    box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}
.item-shadow{
    position: absolute;
    top: 205px;
    z-index: 1;
    width: 290px;
    height: 10px;
    margin-left: 5px;
    border-radius: 30% 30% 50% 50%/50%;
    background-color: #000;
    opacity: 0.85;
    box-shadow: 0 0 10px 8px #000;
}

demo.css

jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
    {
        def: 'easeOutQuad',
        swing: function (x, t, b, c, d) {
            //alert(jQuery.easing.default);
            return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
        },
        easeInQuad: function (x, t, b, c, d) {
            return c*(t/=d)*t + b;
        },
        easeOutQuad: function (x, t, b, c, d) {
            return -c *(t/=d)*(t-2) + b;
        },
        easeInOutQuad: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return c/2*t*t + b;
            return -c/2 * ((--t)*(t-2) - 1) + b;
        },
        easeInCubic: function (x, t, b, c, d) {
            return c*(t/=d)*t*t + b;
        },
        easeOutCubic: function (x, t, b, c, d) {
            return c*((t=t/d-1)*t*t + 1) + b;
        },
        easeInOutCubic: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return c/2*t*t*t + b;
            return c/2*((t-=2)*t*t + 2) + b;
        },
        easeInQuart: function (x, t, b, c, d) {
            return c*(t/=d)*t*t*t + b;
        },
        easeOutQuart: function (x, t, b, c, d) {
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        easeInOutQuart: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
        },
        easeInQuint: function (x, t, b, c, d) {
            return c*(t/=d)*t*t*t*t + b;
        },
        easeOutQuint: function (x, t, b, c, d) {
            return c*((t=t/d-1)*t*t*t*t + 1) + b;
        },
        easeInOutQuint: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
            return c/2*((t-=2)*t*t*t*t + 2) + b;
        },
        easeInSine: function (x, t, b, c, d) {
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        },
        easeOutSine: function (x, t, b, c, d) {
            return c * Math.sin(t/d * (Math.PI/2)) + b;
        },
        easeInOutSine: function (x, t, b, c, d) {
            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
        },
        easeInExpo: function (x, t, b, c, d) {
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
        },
        easeOutExpo: function (x, t, b, c, d) {
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
        },
        easeInOutExpo: function (x, t, b, c, d) {
            if (t==0) return b;
            if (t==d) return b+c;
            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
        },
        easeInCirc: function (x, t, b, c, d) {
            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
        },
        easeOutCirc: function (x, t, b, c, d) {
            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
        },
        easeInOutCirc: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
        },
        easeInElastic: function (x, t, b, c, d) {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        },
        easeOutElastic: function (x, t, b, c, d) {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
        },
        easeInOutElastic: function (x, t, b, c, d) {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
            if (a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
        },
        easeInBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        easeOutBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        easeInOutBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        },
        easeInBounce: function (x, t, b, c, d) {
            return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
        },
        easeOutBounce: function (x, t, b, c, d) {
            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;
            }
        },
        easeInOutBounce: function (x, t, b, c, d) {
            if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
            return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
        }
    });

jquery.easing.1.3.js

/**
 * Created by Administrator on 2017/3/16.
 */
$(function(){
    $(".item-container").hover(function(){
        upHover(this);
    },function(){
        downHover(this);
    });
});
function upHover(obj){
    $(obj).animate({
        top:'-20px'
    },{
        easing:'easeInOutQuint'
    });
    $(obj).next().animate({
        width:'310px',
        'margin-left':'-5px',
        opacity:'0.7',
        'box-shadow':'0 0 16px 16px #000'
    },{
        easing:'easeInOutQuint'
    });
}
function downHover(obj){
    $(obj).animate({
        top:'0'
    },{
        duration: 1000,
        easing:'easeOutBounce'
    });
    $(obj).next().animate({
        width:'290px',
        'margin-left':'5px',
        opacity:'0.9',
        'box-shadow':'0 0 10px 8px #000'
    },{
        duration: 1000,
        easing:'easeOutBounce'
    });
}

demo.js

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery Easing 使用方法及其圖解 jquery.easing的使用 jquery 使用方法 jQuery Easing 動畫效果擴展--使用Easing插件，讓你的動畫更具美感。 jQuery插件的使用方法 jQuery(ajax)的使用方法 jQuery Mobile的使用方法 jQuery UI基本使用方法 JQuery 的定義和使用方法一、萬用表使用方法圖解