首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery自定义动画函数实例详解(附demo源码)

Posted in Javascript onDecember 10, 2015

本文实例讲述了jQuery自定义动画函数完整实现技巧。分享给大家供大家参考，具体如下：

运行效果截图如下：

jQuery自定义动画函数实例详解(附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程序设计有所帮助。

jQuery自定义动画函数实例详解(附demo源码)

- Author -

思齐_

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jquery 插件学习（二）
Aug 06 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
js查找节点的方法小结
Jan 13 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
webuploader分片上传的实现代码（前后端分离）
Sep 10 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
javascript图片预加载完整实例
Dec 10 #Javascript
JavaScript动态插入CSS的方法
Dec 10 #Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 #Javascript
js表单提交和submit提交的区别实例分析
Dec 10 #Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象（2）
Dec 10 #Javascript
JS提交form表单实例分析
Dec 10 #Javascript
对讲机(1) R72E(1) R71E(1) ICOM(2) R9700(1) DE1102(1) 胆机(1) GTX1660(1) React(6) WR-800F(1)
You might like
杏林同学录(六)
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP的加密方式及原理
2012/06/14 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
div层的移动及性能优化
2010/11/16 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
python列表操作实例
2015/01/14 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
如何使用python进行pdf文件分割
2019/11/11 Python
Python的pygame安装教程详解
2020/02/10 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商：The Outlet by John Smedley
2018/04/08 全球购物
新奥尔良珠宝：Mignon Faget
2020/11/23 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
二手房购房协议书范本
2014/10/05 职场文书
校长师德表现自我评价
2015/03/05 职场文书
技能培训通讯稿
2015/07/18 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL