首页
所有分类
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 相关文章推荐
Javascript 构造函数 实例分析
Nov 26 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
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) openpyxl(1) mt-swipe(1) requests(1) hmac(1) exists(2) Mint UI(1) 相对路径(1) 相对路径 (1) 面向对象(3)
You might like
PHP数据缓存技术
2007/02/14 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP制作万年历
2015/01/07 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
十大 Node.js 的 Web 框架（快速提升工作效率）
2017/06/30 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
深入解析Python中的集合类型操作符
2015/08/19 Python
python连接mysql实例分享
2016/10/09 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
精彩的推荐信范文
2013/11/26 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
打架检讨书
2015/01/27 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技