碼上歡樂
相關內容    簡體    繁體

jQuery Easing 動畫效果擴展--使用Easing插件，讓你的動畫更具美感。

本文轉載自   查看原文   2013-10-17 15:55   20831    Easing/ jQuery/ JavaScript

jQuery  Easing

是一款比較老的jQuery插件，在很多網站都有應用，尤其是在一些頁面滾動、幻燈片切換等場景應用比較多。它非常小巧，且有多種動畫方案供選擇，使用簡單，而且免費。

引入Easing js文件

該插件基於jQuery，所以需要同時引入jQuery庫文件和Easing js文件。

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.min.js"></script>

jQuery Easing是在jQuery原有的動畫效果上進行了擴展，所以使用時可以根據jQuery原有的動畫函數進行擴展。

設置jQuery默認動畫效果

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

jQuery默認動畫

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery內置的動畫效果，使用代碼如下：

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

參數duration：定義動畫運動時間，毫秒，其實就是速度，時間越短，運動速度越快。

參數easing：指定動畫效果，Easing js提供多種動畫效果，有勻速運動、變加速運動、緩沖波動效果，它們 是：
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.

使用jQuery自定義動畫函數animate()

jQuery Easing結合jQuery的自定義動畫函數animate()可以制作各種你想要的動畫效果，使用代碼如下：

$(element).animate({ 
    height:500, 
    width:600 
    },{ 
    easing: 'easeInOutQuad', 
    duration: 500, 
    complete: callback 
}); 
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/效果實例


 
 

 

 

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; 

 

} 

}); 

 

 

至於該如何使用上面的緩動函數呢？將緩動函數保存為

js

文件，在

html

中

jquery

文件之后

調用。下面是使用示例，用

animate

動畫：

 

 

 

<!DOCTYPE 

HTML 

PUBLIC 

"-//W3C//DTD 

HTML 

4.01 

Transitional//EN" 

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 

<!-- saved from url= http://www.ushai.net/class/13.html --> 

<HTML 

 

xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>jQuery+easing

緩

動

的

動

畫

</TITLE> 

<META http-equiv=Content-Type content="text/html; charset=utf-8"> 

<STYLE type=text/css> { 

 

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; 

PADDING-TOP: 0px 

} 

BODY { 

 

FONT: 12px/1.8 Arial; COLOR: #666; TEXT-ALIGN: center 

} 

UL { 

 

LIST-STYLE-TYPE: none 

} 

H1 { 

 

MARGIN: 15px 0px; FONT: bold 24px/1.5 "Microsoft Yahei"; TEXT-ALIGN: center 

} 

.wrapper { 

 

BORDER-RIGHT: 

#e6e6e6 

1px 

solid; 

PADDING-RIGHT: 

20px; 

BORDER-TOP: 

#e6e6e6 

1px 

solid; 

PADDING-LEFT: 

20px; 

PADDING-BOTTOM: 

20px; 

MARGIN: 

0px 

auto; 

BORDER-LEFT: 

#e6e6e6 

1px 

solid; 

WIDTH: 

910px; 

PADDING-TOP: 

20px; 

BORDER-BOTTOM: #e6e6e6 1px solid; BACKGROUND-COLOR: #f6f6f6 

} 

.animation { 

 

BORDER-RIGHT: 

#ddd 

1px 

solid; 

BORDER-TOP: 

#ddd 

1px 

solid; 

BACKGROUND: 

#efefef; 

BORDER-LEFT: 

#ddd 

1px 

solid; 

BORDER-BOTTOM: 

#ddd 

1px 

solid; 

POSITION: 

relative; HEIGHT: 50px 

} 

.block { 

 

LEFT: 

0px; 

WIDTH: 

50px; 

POSITION: 

absolute; 

TOP: 

0px; 

HEIGHT: 

50px; 

BACKGROUND-COLOR: #000 

} 

.console { 

 

PADDING-RIGHT: 

15px; 

PADDING-LEFT: 

15px; 

PADDING-BOTTOM: 

15px; 

PADDING-TOP: 15px 

} 

.text { 

 

TEXT-ALIGN: left 

} 

P { 

 

PADDING-RIGHT: 

0px; 

PADDING-LEFT: 

0px; 

PADDING-BOTTOM: 

0px; 

PADDING-TOP: 10px 

} 

</STYLE> 

 

<META content="MSHTML 6.00.2900.6148" name=GENERATOR></HEAD> 

<BODY> 

<H1>jQuery+easing

緩動的動畫

</H1> 

<DIV class=wrapper> 

<DIV class=animation> 

<DIV class=block id=block></DIV></DIV> 

<DIV class=console><SELECT id=easingType name=swing> <OPTION value="" 

 

 

 

selected>def - 

默認方式設置

</OPTION> <OPTION value=easeInQuad>in - Quadratic - 

 

 

 

二次方緩動

</OPTION> 

<OPTION 

value=easeOutQuad>out 

- 

Quadratic 

- 

二次方緩動

</OPTION> 

 

 

 

<OPTION value=easeInOutQuad>inOut - Quadratic - 

二次方緩動

</OPTION> <OPTION 

 

 

 

value=easeInCubic>in - Cubic - 

三次方緩動

</OPTION> <OPTION value=easeOutCubic>out 

- 

 

 

 

Cubic

：三次方緩動

</OPTION> <OPTION value=easeInOutCubic>inOut - Cubic

：三次方緩

動

</OPTION> 

 

 

 

<OPTION value=easeInQuart>in - Quartic - 

四次方緩動

</OPTION> <OPTION 

 

 

 

value=easeOutQuart>out - Quartic - 

四次方緩動

</OPTION> <OPTION 

 

 

 

value=easeInOutQuart>inOut - Quartic - 

四次方緩動

</OPTION> <OPTION 

 

 

 

value=easeInQuint>in 

- 

Quintic 

- 

五

次

方

緩

動

</OPTION> 

<OPTION 

value=easeOutQuint>out 

 

 

 

- Quintic - 

五次方緩動

</OPTION> <OPTION value=easeInOutQuint>inOut - Quintic - 

 

 

 

五次方緩

動

</OPTION> 

<OPTION 

value=easeInSine>in 

- 

Sinusoidal 

- 

正弦曲

線緩動

</OPTION> 

 

 

 

<OPTION value=easeOutSine>out - Sinusoidal - 

正弦曲線緩動

</OPTION> <OPTION 

 

 

 

value=easeInOutSine>inOut - Sinusoidal - 

正弦曲線緩動

</OPTION> <OPTION 

 

 

 

value=easeInExpo>in - Exponential - 

指數曲線緩動

</OPTION> <OPTION 

 

 

 

value=easeOutExpo>out - Exponential - 

指數曲線緩動

</OPTION> <OPTION 

 

 

 

value=easeInOutExpo>inOut - Exponential - 

指數曲線緩動

</OPTION> <OPTION 

 

 

 

value=easeInCirc>in 

- 

Circular 

- 

圓

形

曲

線

緩

動

</OPTION> 

<OPTION 

value=easeOutCirc>out 

 

 

 

- Circular - 

圓形曲線緩動

</OPTION> <OPTION value=easeInOutCirc>inOut - Circular - 

 

 

 

圓形曲線緩動

</OPTION> <OPTION value=easeInElastic>in - Elastic - 

 

 

 

指數衰減的正弦曲線緩動

</OPTION> <OPTION value=easeOutElastic>out - Elastic - 

 

 

 

指數衰減的正弦曲線緩動

</OPTION> <OPTION value=easeInOutElastic>inOut - Elastic - 

 

 

 

指數衰減的正弦曲線緩動

</OPTION> <OPTION value=easeInBack>in - Back - 

超過范圍的

三次方緩動

</OPTION> 

 

 

 

<OPTION value=easeOutBack>out - Back - 

超過范圍的三次方緩動

</OPTION> <OPTION 

 

 

 

value=easeInOutBack>inOut - Back - 

超過范圍的三次方緩動

</OPTION> <OPTION 

 

 

 

value=easeInBounce>in - Bounce - 

指數衰減的反彈緩動

</OPTION> <OPTION 

 

 

 

value=easeOutBounce>out - Bounce - 

指數衰減的反彈緩動

</OPTION> <OPTION 

 

 

 

value=easeInOutBounce>inOut 

- 

Bounce 

- 

指數衰減的反彈緩動

</OPTION></SELECT> 

<INPUT 

id=button_start 

type=button 

value=

向右運動

> 

<INPUT 

id=button_stop 

type=button 

value=

向左運動

> </DIV> 

<DIV class=text> 

<P><STRONG>

方法介紹：

</STRONG></P> 

<UL> 

 

 

<LI>def

：默認方式設置

 

 

 

 

<LI>swing

：默認方式加載

 

 

 

 

<LI>Quad

：二次方緩動

(t) 

 

 

 

<LI>Cubic

：三次方緩動

 

 

 

 

<LI>Quart

：四次方緩動

 

 

 

 

<LI>Quint

：五次方緩動

 

 

 

 

<LI>Sine

：正弦曲線緩動

 

 

 

 

<LI>Expo

：指數曲線緩動

 

 

 

 

<LI>Circ

：圓形曲線的緩動

 

 

 

 

<LI>Elastic

：指數衰減的正弦曲線緩動

 

 

 

 

<LI>Back

：超過范圍的三次方緩動

 

 

 

 

<LI>Bounce

：指數衰減的反彈緩動

 

</LI></UL> 

<P><STRONG>

關於

In

、

Out

、

Inout

的說明：

</STRONG></P> 

<UL> 

 

 

<LI>ease<STRONG>In</STRONG>

：加速度緩動；

 

 

 

 

<LI>ease<STRONG>Out</STRONG>

：減速度緩動；

 

 

 

 

<LI>ease<STRONG>InOut</STRONG>

：

先

加

速

度

至

50%

，

再

減

速

度

完

成

動

畫

。

 

</LI></UL> 

<P>

緩動方式的翻譯來自：

<A 

 

href="http://www.ushai.net/class/13.html">

優曬女裝

</A></P> 

<P>

原創文章，轉載請注明出處：

 

<A href="http://www.ushai.net/">

優曬

</A></P></DIV></DIV> 

 

<div id="test"></div> 

 

<SCRIPT src="jQuery+easing

緩動的動畫

.files/jquery.min.js" 

 

type=text/javascript></SCRIPT> 

 

<SCRIPT src="jQuery+easing

緩動的動畫

.files/jquery.easing.1.3.js" 

 

type=text/javascript></SCRIPT> 

 

<SCRIPT type=text/javascript> 

$(document).ready(function(){ 

 

$('#button_start').click(function(event){ 

 

 

var actionType = $("#easingType").val(); 

 

 

$('#block').animate({left:858},1000,actionType,function(){}); 

 

 

event.preventDefault(); 

 

}); 

 

$('#button_stop').click(function(event){ 

 

 

var actionType = $("#easingType").val(); 

 

 

$('#block').animate({left:0},1000,actionType,function(){}); 

 

 

event.preventDefault(); 

 

}); 

}); 

</SCRIPT> 

 

</BODY></HTML> 


免責聲明！

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



猜您在找 jQuery Easing 動畫效果擴展詳細講解 jquery.easing的使用 wpf動畫——緩動動畫Animation Easing（2） wpf動畫——緩動動畫Animation Easing easing.js讓頁面動畫豐富起來 jQuery Easing 使用方法及其圖解 網站建設中前端常用的jQuery+easing緩動的動畫 jQuery Easing 使用方法及其圖解 jQuery 動畫效果 與 動畫隊列 jQuery效果之jQuery Color animation 色彩動畫擴展
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM