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 相关文章推荐
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
JavaScript验证知识整理
Mar 24 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
通过正则格式化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实现生成验证码实例分享
2016/04/10 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
javascript事件模型介绍
2016/05/31 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python编程中类与类的关系详解
2019/08/08 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python笔记之工厂模式
2019/11/20 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python3读写ini配置文件的示例
2020/11/06 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
承诺书怎么写
2014/03/26 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
村干部培训方案
2014/05/02 职场文书
高三英语教学计划
2015/01/23 职场文书
2015年教师节活动总结
2015/03/20 职场文书
大学运动会通讯稿
2015/07/18 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL