jQuery自定義動畫函數(shù)實例詳解(附demo源碼)
更新時間：2015年12月10日 12:35:47 作者：思齊_
這篇文章主要介紹了jQuery自定義動畫函數(shù)實現(xiàn)方法,形式實例分析了jQuery通過插件結(jié)合數(shù)學運算實現(xiàn)滑塊動畫運動的效果,并附完整demo源碼供讀者下載,需要的朋友可以參考下
本文實例講述了jQuery自定義動畫函數(shù)完整實現(xiàn)技巧。分享給大家供大家參考，具體如下：
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定義動畫DEMO</title>
<script src="jquery-1.4.4.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
var Tween = {
Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最簡單的線性變化,即勻速運動
Quad:{//二次方緩動
easeIn:function (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,2)*alter;
},
easeOut:function (start,alter,curTime,dur) {
var progress =curTime/dur;
return start-(Math.pow(progress,2)-2*progress)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alter/2+start;
}
},
Cubic:{//三次方緩動
easeIn:function (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,3)*alter;
},
easeOut:function (start,alter,curTime,dur) {
var progress =curTime/dur;
return start-(Math.pow(progress,3)-Math.pow(progress,2)+1)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?Math.pow(progress,3):((progress-=2)*Math.pow(progress,2) + 2))*alter/2+start;
}
},
Quart:{//四次方緩動
easeIn:function (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,4)*alter;
},
easeOut:function (start,alter,curTime,dur) {
var progress =curTime/dur;
return start-(Math.pow(progress,4)-Math.pow(progress,3)-1)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?Math.pow(progress,4):-((progress-=2)*Math.pow(progress,3) - 2))*alter/2+start;
}
},
Quint:{//五次方緩動
easeIn:function (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,5)*alter;
},
easeOut:function (start,alter,curTime,dur) {
var progress =curTime/dur;
return start-(Math.pow(progress,5)-Math.pow(progress,4)+1)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?Math.pow(progress,5):((progress-=2)*Math.pow(progress,4) +2))*alter/2+start;
}
},
Sine :{//正弦曲線緩動
easeIn:function (start,alter,curTime,dur) {
return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter;
},
easeOut:function (start,alter,curTime,dur) {
return start+Math.sin(curTime/dur*Math.PI/2)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter/2;
}
},
Expo: {//指數(shù)曲線緩動
easeIn:function (start,alter,curTime,dur) {
return curTime?(start+alter*Math.pow(2,10*(curTime/dur-1))):start;
},
easeOut:function (start,alter,curTime,dur) {
return (curTime==dur)?(start+alter):(start-(Math.pow(2,-10*curTime/dur)+1)*alter);
},
easeInOut:function (start,alter,curTime,dur) {
if (!curTime) {return start;}
if (curTime==dur) {return start+alter;}
var progress =curTime/dur*2;
if (progress < 1) {
return alter/2*Math.pow(2,10* (progress-1))+start;
} else {
return alter/2* (-Math.pow(2, -10*--progress) + 2) +start;
}
}
},
Circ :{//圓形曲線緩動
easeIn:function (start,alter,curTime,dur) {
return start-alter*Math.sqrt(-Math.pow(curTime/dur,2));
},
easeOut:function (start,alter,curTime,dur) {
return start+alter*Math.sqrt(1-Math.pow(curTime/dur-1));
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?1-Math.sqrt(1-Math.pow(progress,2)):(Math.sqrt(1 - Math.pow(progress-2,2)) + 1))*alter/2+start;
}
},
Elastic: {//指數(shù)衰減的正弦曲線緩動
easeIn:function (start,alter,curTime,dur,extent,cycle) {
if (!curTime) {return start;}
if ((curTime==dur)==1) {return start+alter;}
if (!cycle) {cycle=dur*0.3;}
var s;
if (!extent || extent< Math.abs(alter)) {
extent=alter;
s = cycle/4;
} else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
return start-extent*Math.pow(2,10*(curTime/dur-1)) * Math.sin((curTime-dur-s)*(2*Math.PI)/cycle);
},
easeOut:function (start,alter,curTime,dur,extent,cycle) {
if (!curTime) {return start;}
if (curTime==dur) {return start+alter;}
if (!cycle) {cycle=dur*0.3;}
var s;
if (!extent || extent< Math.abs(alter)) {
extent=alter;
s =cycle/4;
} else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
return start+alter+extent*Math.pow(2,-curTime/dur*10)*Math.sin((curTime-s)*(2*Math.PI)/cycle);
},
easeInOut:function (start,alter,curTime,dur,extent,cycle) {
if (!curTime) {return start;}
if (curTime==dur) {return start+alter;}
if (!cycle) {cycle=dur*0.45;}
var s;
if (!extent || extent< Math.abs(alter)) {
extent=alter;
s =cycle/4;
} else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
var progress = curTime/dur*2;
if (progress<1) {
return start-0.5*extent*Math.pow(2,10*(progress-=1))*Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);
} else {
return start+alter+0.5*extent*Math.pow(2,-10*(progress-=1)) * Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);
}
}
},
Back:{
easeIn: function (start,alter,curTime,dur,s){
if (typeof s == "undefined") {s = 1.70158;}
return start+alter*(curTime/=dur)*curTime*((s+1)*curTime - s);
},
easeOut: function (start,alter,curTime,dur,s) {
if (typeof s == "undefined") {s = 1.70158;}
return start+alter*((curTime=curTime/dur-1)*curTime*((s+1)*curTime + s) + 1);
},
easeInOut: function (start,alter,curTime,dur,s){
if (typeof s == "undefined") {s = 1.70158;}
if ((curTime/=dur/2) < 1) {
return start+alter/2*(Math.pow(curTime,2)*(((s*=(1.525))+1)*curTime- s));
}
return start+alter/2*((curTime-=2)*curTime*(((s*=(1.525))+1)*curTime+ s)+2);
}
},
Bounce:{
easeIn: function(start,alter,curTime,dur){
return start+alter-Tween.Bounce.easeOut(0,alter,dur-curTime,dur);
},
easeOut: function(start,alter,curTime,dur){
if ((curTime/=dur) < (1/2.75)) {
return alter*(7.5625*Math.pow(curTime,2))+start;
} else if (curTime < (2/2.75)) {
return alter*(7.5625*(curTime-=(1.5/2.75))*curTime + .75)+start;
} else if (curTime< (2.5/2.75)) {
return alter*(7.5625*(curTime-=(2.25/2.75))*curTime + .9375)+start;
} else {
return alter*(7.5625*(curTime-=(2.625/2.75))*curTime + .984375)+start;
}
},
easeInOut: function (start,alter,curTime,dur){
if (curTime< dur/2) {
return Tween.Bounce.easeIn(0,alter,curTime*2,dur) *0.5+start;
} else {
return Tween.Bounce.easeOut(0,alter,curTime*2-dur,dur) *0.5 + alter*0.5 +start;
}
},
easeOutBounce: function (b, c, t, 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;
}
}
},
//start,alter,curTime,dur
easeOutBounce: function (b, c, t, 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;
}
}
};
jQuery(function($){
//兩種動畫方式對比，在w3c瀏覽器中是一致的，在IE中有差異（即使用同算法）
$("#start").click(function(){
//自定義動畫函數(shù)
animate(Fid("song"), {opacity:0.3, left:400}, 2000, Tween.easeOutBounce);
//jq動畫效果
$("#jian").animate( {opacity:0.3, left:400}, 2000, 'easeOutBounce')
})
/*
參數(shù)說明
o:要動畫的對象
end:元素最終的樣式
dur:動畫持續(xù)多長時
fx:效果插件
*/
function animate(o ,end, dur, fx) {
var curTime=0;
var start = {};//元素的初始樣式
var alter = {};//元素的增量樣式
var t=setInterval(function () {
if (curTime>=dur) clearTimeout(t);
for (var i in end) {
if(! (i in start))//注意加括號
{
//不能用 parseInt.有透明度時會出問題
start[i] = parseFloat(getStyle(o, i));
}
if(! (i in alter))
{
alter[i] = end[i] - start[i];
}
var val = fx(start[i],alter[i],curTime,dur);
if(i == 'opacity')
{
/**
o.style.filter, o.style.opacity 火狐下都為空字符串
只能用 o.style.opacity 檢測
注意：ietester下無法測試透明度
*/
if(typeof o.style.opacity == "undefined")
{
o.style.filter = "alpha(opacity="+val*100+")";
}else{
o.style[i] = val;
}
}else{
o.style[i] = val+'px';
}
}
curTime+=13; //jquery 中也為 13
},13);
}
/**
獲取元素樣式
處理透明度、元素浮動樣式的獲取 ，結(jié)果帶有單位
*/
function getStyle(elem, name) {
var nameValue = null;
if (document.defaultView) {
var style = document.defaultView.getComputedStyle(elem, null);
nameValue = name in style ? style[name] : style.getPropertyValue(name);
} else {
var style = elem.style,
curStyle = elem.currentStyle;
//透明度 from youa
if (name == "opacity") {
if (/alpha\(opacity=(.*)\)/i.test(curStyle.filter)) {
var opacity = parseFloat(RegExp.$1);
return opacity ? opacity / 100 : 0;
}
return 1;
}
if (name == "float") {
name = "styleFloat";
}
var ret = curStyle[name] || curStyle[camelize(name)];
//單位轉(zhuǎn)換 from jqury
if (!/^-?\d+(?:px)?$/i.test(ret) && /^\-?\d/.test(ret)) {
var left = style.left,
rtStyle = elem.runtimeStyle,
rsLeft = rtStyle.left;
rtStyle.left = curStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px";
style.left = left;
rtStyle.left = rsLeft;
}
nameValue = ret;
}
return nameValue === 'auto' ? '0px' : nameValue;
}
function camelize(s) {//將CSS屬性名轉(zhuǎn)換成駝峰式
return s.replace(/-[a-z]/gi,function (c) {
return c.charAt(1).toUpperCase();
});
}
function Fid(id)
{
return document.getElementById(id);
}
})
</script>
</head>
<style>
.main{ border:1px solid blue; height:350px;}
.pos {position:absolute; left:0px;top:50px; border:5px solid red; background:green;width:100px; height:100px;}
</style>
<body>
<div class="main">
<div id="song" class="pos" style="display:block;">song</div>
<div id="jian" class="pos" style="top:200px;">jian</div>
</div>
<button id="start">start</button>
</body>
</html>
完整實例代碼點擊此處本站下載。
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:
- 用js實現(xiàn)的模擬jquery的animate自定義動畫(2.5K)
- 深入理解jquery自定義動畫animate()
- jQuery中使用animate自定義動畫的方法
- Jquery 自定義動畫概述及示例
- jQuery使用動畫隊列自定義動畫操作示例
- jQuery動畫animate方法使用介紹
- jquery animate 動畫效果使用說明
- JQuery動畫animate的stop方法使用詳解
- jQuery實現(xiàn)圖像旋轉(zhuǎn)動畫效果
- 分享8款優(yōu)秀的 jQuery 加載動畫和進度條插件
- Jquery中使用show()與hide()方法動畫顯示和隱藏圖片
- jQuery三組基本動畫與自定義動畫操作實例總結(jié)
相關(guān)文章
在京東商城瀏覽時, 會發(fā)現(xiàn)產(chǎn)品圖片只顯示了一屏, 當頁面向下滾動時下面的產(chǎn)品圖片才逐漸加載.2010-06-06
基于jquery的web頁面日期格式化插件，需要的朋友可以參考下。2011-11-11
jQuery常用數(shù)據(jù)處理方法小結(jié)
這篇文章主要介紹了jQuery常用數(shù)據(jù)處理方法,實例總結(jié)了trim、param、isArray、isFunction、each等jQuery常用的數(shù)據(jù)處理方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
基于JQUERY的多級聯(lián)動實現(xiàn)代碼，需要的朋友可以參考下，另外腳本之家特為大家多整理了幾個大家可以測試下2012-01-01
jQuery ''行 4954 錯誤: 不支持該屬性或方法'' 的問題解決方法
這個問題只在IE下出現(xiàn)。詭異的是，對于出現(xiàn)這個問題的頁面，重新刷新一下就又好了，Ajax 工作一切正常。順便說一下，我的 jQuery 版本是 1.4.2。2011-01-01
jQuery的hover事件只是針對單個HTML元素，不過，有些時候我們希望當鼠標進入兩個或多個元素時觸發(fā)fun1，離開他們時觸發(fā)fun2，而在這些元素間移動鼠標并不觸發(fā)任何事件2014-06-06
jQuery獲取當前元素的索引值還是很方便的，比如一大堆的li，當鼠標移上去的時候，你知道這個li是眾多l(xiāng)i中的第幾個嗎？2009-05-05
jQuery用unbind方法去掉hover事件及其他方法介紹
jquery怎么去掉hover以為直接unbind(hover)就可以搞定，結(jié)果很失敗，接下來介紹下取消hover事件的多種方法，感興趣的你可以參考下哈2013-03-03
這篇文章主要介紹了jQuery實現(xiàn)當前頁面標簽高亮顯示的方法,涉及jQuery通過自定義函數(shù)操作css樣式的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
jquery submit ie6下失效的原因分析及解決方法
jquery submit ie6下失效的原因分析及解決方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11