Home > Article > Web Front-end > Detailed explanation of jQuery custom animation function examples (with demo source code)_jquery
Detailed explanation of jQuery custom animation function examples (with demo source code)_jquery
- WBOYOriginal
- 2016-05-16 15:26:301374browse
本文实例讲述了jQuery自定义动画函数完整实现技巧。分享给大家供大家参考，具体如下：
运行效果截图如下：
在线演示地址如下：
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: {//指数曲线缓动
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: {//指数衰减的正弦曲线缓动
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(){
//自定义动画函数
animate(Fid("song"), {opacity:0.3, left:400}, 2000, Tween.easeOutBounce);
//jq动画效果
$("#jian").animate( {opacity:0.3, left:400}, 2000, 'easeOutBounce')
})
/*
参数说明
o:要动画的对象
end:元素最终的样式
dur:动画持续多长时
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);
}
/**
获取元素样式
处理透明度、元素浮动样式的获取 ，结果带有单位
*/
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)];
//单位转换 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属性名转换成驼峰式
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程序设计有所帮助。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Using the template engine in Express_javascript tipsNext article：Using the template engine in Express_javascript tips
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills