首页
所有分类
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中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
javascript中layim之查找好友查找群组
Feb 06 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
AM(1) 频偏(1) 实习报告(1) 高放电路(1) 灵敏度(1) 发烧友(1) 频率(1) 电路(15) 鉴频器(1) 原理(1)
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
丧钟首部独立剧集《丧钟：骑士与龙》北美正式开播，场面血腥
2020/04/09 欧美动漫
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php学习笔记之面向对象
2014/11/08 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
AngularJS Module方法详解
2015/12/08 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python八大排序算法速度实例对比
2017/12/06 Python
python实现单向链表详解
2018/02/08 Python
学习python分支结构
2019/05/17 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
巴西家用小家电购物网站：Polishop
2016/08/07 全球购物
马来西亚和新加坡巴士票在线预订：CatchThatBus
2018/11/17 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
专升本个人自我评价
2013/12/22 职场文书
小学生倡议书范文
2014/05/13 职场文书
争先创优公开承诺书
2014/08/30 职场文书
员工保密协议书
2014/09/27 职场文书
公司内部升职自荐信
2015/03/27 职场文书
python glom模块的使用简介
2021/04/13 Python
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL