jQuery自定义动画函数实例详解(附demo源码)
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jQuery自定义动画函数实现方法,形式实例分析了jQuery通过插件结合数学运算实现滑块动画运动的效果,并附完整demo源码供读者下载,需要的朋友可以参考下
本文实例讲述了jQuery自定义动画函数完整实现技巧。分享给大家供大家参考，具体如下
运行效果截图如下
在线演示地址如下
具体代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://.w3./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://.w3./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/duralter;},//最简单的线性变化,即匀速运动
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)-2progress)alter;
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur2;
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/dur2;
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/dur2;
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/dur2;
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/durMath.PI/2)-1)alter;
},
easeOut:function (start,alter,curTime,dur) {
return start+Math.sin(curTime/durMath.PI/2)alter;
},
easeInOut:function (start,alter,curTime,dur) {
return start-(Math.cos(curTime/durMath.PI/2)-1)alter/2;
}
},
Expo: {//指数曲线缓动
easeIn:function (start,alter,curTime,dur) {
return curTime?(start+alterMath.pow(2,10(curTime/dur-1))):start;
},
easeOut:function (start,alter,curTime,dur) {
return (curTime==dur)?(start+alter):(start-(Math.pow(2,-10curTime/dur)+1)alter);
},
easeInOut:function (start,alter,curTime,dur) {
if (!curTime) {return start;}
if (curTime==dur) {return start+alter;}
var progress =curTime/dur2;
if (progress < 1) {
return alter/2Math.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-alterMath.sqrt(-Math.pow(curTime/dur,2));
},
easeOut:function (start,alter,curTime,dur) {
return start+alterMath.sqrt(1-Math.pow(curTime/dur-1));
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur2;
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=dur0.3;}
var s;
if (!extent || extent< Math.abs(alter)) {
extent=alter;
s = cycle/4;
} else {s=cycle/(Math.PI2)Math.asin(alter/extent);}
return start-extentMath.pow(2,10(curTime/dur-1)) Math.sin((curTime-dur-s)(2Math.PI)/cycle);
},
easeOut:function (start,alter,curTime,dur,extent,cycle) {
if (!curTime) {return start;}
if (curTime==dur) {return start+alter;}
if (!cycle) {cycle=dur0.3;}
var s;
if (!extent || extent< Math.abs(alter)) {
extent=alter;
s =cycle/4;
} else {s=cycle/(Math.PI2)Math.asin(alter/extent);}
return start+alter+extentMath.pow(2,-curTime/dur10)Math.sin((curTime-s)(2Math.PI)/cycle);
},
easeInOut:function (start,alter,curTime,dur,extent,cycle) {
if (!curTime) {return start;}
if (curTime==dur) {return start+alter;}
if (!cycle) {cycle=dur0.45;}
var s;
if (!extent || extent< Math.abs(alter)) {
extent=alter;
s =cycle/4;
} else {s=cycle/(Math.PI2)Math.asin(alter/extent);}
var progress = curTime/dur2;
if (progress<1) {
return start-0.5extentMath.pow(2,10(progress-=1))Math.sin( (progressdur-s)(2Math.PI)/cycle);
} else {
return start+alter+0.5extentMath.pow(2,-10(progress-=1)) Math.sin( (progressdur-s)(2Math.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.5625Math.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,curTime2,dur) 0.5+start;
} else {
return Tween.Bounce.easeOut(0,alter,curTime2-dur,dur) 0.5 + alter0.5 +start;
}
},
easeOutBounce: function (b, c, t, d) {
if ((t/=d) < (1/2.75)) {
return c(7.5625tt) + 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.5625tt) + 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="+val100+")";
}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;: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=":200px;">jian</div>
</div>
<button id="start">start</button>
</body>
</html>
完整实例代码点击此处。
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程