ホームページ > 記事 > ウェブフロントエンド > jQueryアニメーションイージングの使い方

jQueryアニメーションイージングの使い方

WBOYオリジナル: 2016-06-20 08:42:161113ブラウズ

jQuery API ドキュメントからわかるように、jQuery カスタムアニメーション関数 .animate(properties [,duration] [,easing] [,complete] ) には 4 つのパラメーターがあります:

プロパティ: 一連のスタイルプロパティとその値 (アニメーションプロパティと最終値として)
duration (オプション): アニメーションの実行時間。その値は、あらかじめ決められた 3 つの速度 (「遅い」、「遅い」、 "normal"、または "fast")、またはアニメーションの継続時間を示すミリ秒の値 (例: 1000)
イージング (オプション): 使用するトランジションエフェクトの名前 (例: "linear") または「スイング」
complete (オプション): アニメーションが完了したときに実行される関数

パラメータイージングには、デフォルトで「リニア」と「スイング」の 2 つの効果があります。さらに多くの効果が必要な場合は、プラグインのサポートである jQuery Easing が必要です。プラグインには、「easeOutExpo」や「easeOutBounce」など 30 種類以上のエフェクトが用意されています。ここをクリックすると、各イージングのデモンストレーション効果を確認できます。以下では、その使用法と各イージングのカーブチャートについて詳しく説明します。

jQuery イージングの使い方

まず、プロジェクトで特殊なアニメーション効果を使用する必要がある場合は、jQuery を導入した後に jquery.easing.1.3.js を導入する必要があります

<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="http://code.jquery.com/jquery-1.8.3.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>

が導入された後、イージングパラメーターには 32 のオプションの値があります:

線形
スイング
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.easing.1.3.js，我们可以只把我们需要的几种easing放入Javascript文件中，如项目中只用到"easeOutExpo"和"easeOutBounce"两种效果，只需要下面的代码就可以了

<span style="color: #000000;"> jQuery.extend( jQuery.easing,  
{  
    easeOutExpo: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (x, t, b, c, d) {  
        </span><span style="color: #0000ff;">return</span> (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;  
<span style="color: #000000;">    },  
    easeOutBounce: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (x, t, b, c, d) {  
        </span><span style="color: #0000ff;">if</span> ((t/=d) < (1/2.75<span style="color: #000000;">)) {  
            </span><span style="color: #0000ff;">return</span> c*(7.5625*t*t) +<span style="color: #000000;"> b;  
        } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (t < (2/2.75)) {  
            <span style="color: #0000ff;">return</span> c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;  
        } <span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (t < (2.5/2.75)) {  
            <span style="color: #0000ff;">return</span> c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;  
        } <span style="color: #0000ff;">else</span><span style="color: #000000;"> {  
            </span><span style="color: #0000ff;">return</span> c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;  
<span style="color: #000000;">        }  
    },  
});  </span>

使用jQuery自定义动画函数animate来指定easing效果，如自定义一种类弹簧效果的动画：

<span style="color: #000000;"> $(myElement).animate({  
    top: </span>500<span style="color: #000000;">,  
    opacity: </span>1<span style="color: #000000;">  
}, </span>1000, 'easeOutBounce');

值得一提的是jQuery 1.4版本中对animate()方法，easing的方法进行了扩展，支持为每个属性指定easing方法，详细请参考这里，如：

<span style="color: #008000;">//</span><span style="color: #008000;">第一种写法</span>
<span style="color: #000000;"> $(myElement).animate({  
    left: [</span>500, 'swing'<span style="color: #000000;">],  
    top: [</span>200, 'easeOutBounce'<span style="color: #000000;">]  
});  
</span><span style="color: #008000;">//</span><span style="color: #008000;">第二种写法</span>
<span style="color: #000000;"> $(myElement).animate({  
    left: </span>500<span style="color: #000000;">,  
    top: </span>200<span style="color: #000000;">  
}, {  
    specialEasing: {  
        left: </span>'swing'<span style="color: #000000;">,  
        top: </span>'easeOutBounce'<span style="color: #000000;">  
    }  
});  </span>

使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果，以下两种方法都可以：

 $(myElement).slideUp(1000<span style="color: #000000;">, method, callback});  
$(myElement).slideUp({  
    duration: </span>1000<span style="color: #000000;">,   
    easing: method,   
    complete: callback  
});  </span>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブラウザハックの概要とブラウザ互換性ソリューションの詳細次の記事：ブラウザハックの概要とブラウザ互換性ソリューションの詳細

続きを見る

jQueryアニメーションイージングの使い方

jQuery イージングの使い方

関連記事