javascript中的缓动效果实现程序


Posted in Javascript onDecember 29, 2012

常见的动画有四种类型,介绍一下:

linear:线性动画,即匀速

easeIn:速度从小到大,即淡入

easeOut :速度从大到小,即淡出

easeInOut:开始时速度从小到大,结束时速度从大到小,即淡入淡出

其实说到缓动,就不得不提Robert Penner,他发明了N多缓动公式,举个例子

我还是解释一下吧:

设当前变化量为X,则

t / d = X / c,所以X = c * t / d,然后X + b就可以获得当前属性值

再看一个稍复杂的:
 
这个有淡入效果,也就是说动画开始时,值的变化量从小到大。
可以发现两者唯一的区别就是 t / d 和 (t /= d) * t,刚才说了t / d是一个>=0 && <=1的比值,暂取名为a,而(t /= d) * t就相当于Math.pow(a, 2)。

为什么要平方呢?

1. 首先a >= Math.pow(a, 2)是肯定的
2. 每次调用函数时,t / d 这个比值也是匀速变大的,比如第1次调用时是0.1(平方0.01),第2次调用时是0.2(平方0.04)等,那第10次调用时,肯定是1没错吧,这时候 c * 1 + b,动画就到此结束了
3. 第2点证明了比值越小,值的变化量就越小,比值越大,值的变化量就越大,如果不用平方而是三次方,那淡入效果就更明显了。

样式、结构及公共函数如下:

 <style>
        #container {width:500px;height:100px;border:1px #d1d1d1 solid;position:relative;}
        #drag {width:100px;height:100px;background:#369;position:absolute;left:0;top:0;}
    </style>
<div id="container">
<div id="drag"></div>
</div>    <script type="text/javascript">
        function $(id) {
            return typeof id == 'string' ? document.getElementById(id) : id;
        }
        function getStyle(el,styleProp){
            return el.currentStyle ? el.currentStyle[styleProp] : document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
        }
    </script>

首先,从最简单的入手:设定开始位置和结束位置及步长,每次增加固定的值,直至终止条件
var timer = null;
        var begin = 0, end = 400, step = 5;
        var drag = $("drag");
        function run() {
            if((iLeft = parseInt(getStyle(drag,"left"))) < end){
                drag.style.left = iLeft + step + "px";
            }else{
                clearInterval(timer);
            }
        }
        var timer = setInterval(run, 20);

上面这种方法是匀速,每次运动的距离是固定的,下面来看另外一种实现方式:
 var timer = null;
        var begin = 0, end = 400;
        var drag = $("drag");
        function run() {
            if((iLeft = parseInt(getStyle(drag,"left"))) < end){
                var step = Math.ceil((400 - iLeft)/7);
                drag.style.left = iLeft + step + "px";
            }else{
                clearInterval(timer);
            }
        }
        var timer = setInterval(run, 20);

上面这种方式是通过当前的位置距离目标的距离来计算此次位移的步长
在flash中有专门处理缓动的类tween,转化为javascript的代码为:

var Tween = {
 Linear: function(t,b,c,d){ return c*t/d + b; },
 Quad: {
  easeIn: function(t,b,c,d){
   return c*(t/=d)*t + b;
  },
  easeOut: function(t,b,c,d){
   return -c *(t/=d)*(t-2) + b;
  },
  easeInOut: function(t,b,c,d){
   if ((t/=d/2) < 1) return c/2*t*t + b;
   return -c/2 * ((--t)*(t-2) - 1) + b;
  }
 },
 Cubic: {
  easeIn: function(t,b,c,d){
   return c*(t/=d)*t*t + b;
  },
  easeOut: function(t,b,c,d){
   return c*((t=t/d-1)*t*t + 1) + b;
  },
  easeInOut: function(t,b,c,d){
   if ((t/=d/2) < 1) return c/2*t*t*t + b;
   return c/2*((t-=2)*t*t + 2) + b;
  }
 },
 Quart: {
  easeIn: function(t,b,c,d){
   return c*(t/=d)*t*t*t + b;
  },
  easeOut: function(t,b,c,d){
   return -c * ((t=t/d-1)*t*t*t - 1) + b;
  },
  easeInOut: function(t,b,c,d){
   if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
   return -c/2 * ((t-=2)*t*t*t - 2) + b;
  }
 },
 Quint: {
  easeIn: function(t,b,c,d){
   return c*(t/=d)*t*t*t*t + b;
  },
  easeOut: function(t,b,c,d){
   return c*((t=t/d-1)*t*t*t*t + 1) + b;
  },
  easeInOut: function(t,b,c,d){
   if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
   return c/2*((t-=2)*t*t*t*t + 2) + b;
  }
 },
 Sine: {
  easeIn: function(t,b,c,d){
   return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
  },
  easeOut: function(t,b,c,d){
   return c * Math.sin(t/d * (Math.PI/2)) + b;
  },
  easeInOut: function(t,b,c,d){
   return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
  }
 },
 Expo: {
  easeIn: function(t,b,c,d){
   return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
  },
  easeOut: function(t,b,c,d){
   return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
  },
  easeInOut: function(t,b,c,d){
   if (t==0) return b;
   if (t==d) return b+c;
   if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
   return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
  }
 },
 Circ: {
  easeIn: function(t,b,c,d){
   return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
  },
  easeOut: function(t,b,c,d){
   return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
  },
  easeInOut: function(t,b,c,d){
   if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
   return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
  }
 },
 Elastic: {
  easeIn: function(t,b,c,d,a,p){
   if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
   if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
   else var s = p/(2*Math.PI) * Math.asin (c/a);
   return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  },
  easeOut: function(t,b,c,d,a,p){
   if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
   if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
   else var s = p/(2*Math.PI) * Math.asin (c/a);
   return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
  },
  easeInOut: function(t,b,c,d,a,p){
   if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
   if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
   else var s = p/(2*Math.PI) * Math.asin (c/a);
   if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
   return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
  }
 },
 Back: {
  easeIn: function(t,b,c,d,s){
   if (s == undefined) s = 1.70158;
   return c*(t/=d)*t*((s+1)*t - s) + b;
  },
  easeOut: function(t,b,c,d,s){
   if (s == undefined) s = 1.70158;
   return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  },
  easeInOut: function(t,b,c,d,s){
   if (s == undefined) s = 1.70158;
   if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
   return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
  }
 },
 Bounce: {
  easeIn: function(t,b,c,d){
   return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
  },
  easeOut: function(t,b,c,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;
   }
  },
  easeInOut: function(t,b,c,d){
   if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
   else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
  }
 }
}

其中每种缓动方式中对应3种类型
easeIn:从0开始加速的缓动;
easeOut:减速到0的缓动;
easeInOut:前半段从0开始加速,后半段减速到0的缓动
参数说明:
t:当前时间
b:初始值
c:变化量
d:持续时间
调用方式:
 var timer = null;
        var b=0,c=400,d=100,t=0;
        var drag = $("drag");
        function run() {
            drag.style.left = Math.ceil(Tween.Circ.easeInOut(t,b,c,d)) + "px";
            if(t<d){
                t++;
            }else{
                clearInterval(timer);
            }
        }
var timer = setInterval(run, 20);
Javascript 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
通过正则格式化url查询字符串实现代码
Dec 28 #Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 #Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 #Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 #Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 #Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 #Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 #Javascript
You might like
PHP学习之数组的定义和填充
2011/04/17 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python代码制作configure文件示例
2014/07/28 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python实现FM算法解析
2019/06/18 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
个人简历中的自我评价怎么写
2014/01/26 职场文书
毕业论文评语大全
2014/04/29 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
python小型的音频操作库mp3Play
2022/04/24 Python