javascript动画算法实例分析


Posted in Javascript onJuly 31, 2015

本文实例讲述了javascript动画算法。分享给大家供大家参考。具体如下:

动画算法

Linear:无缓动效果(匀速运动);
Quadratic:二次方的缓动;
Cubic:三次方的缓动
Quartic:四次方的缓动;
Quintic:五次方的缓动;
Sinusoidal:正弦曲线的缓动;
Exponential:指数曲线的缓动;
Circular:圆形曲线的缓动;
Elastic:指数衰减的正弦曲线缓动;
Back:超过范围的三次方缓动);
Bounce:指数衰减的反弹缓动。

每个效果都分三个缓动方式(方法),分别是:

easeIn:从0开始加速的运动;
easeOut:减速到0的运动;
easeInOut:前半段从0开始加速,后半段减速到0的运动。

函数的四个参数分别代表:

t--- current time(当前时间);
b--- beginning value(初始值);
c--- change in value(变化量);
d---duration(持续时间)

运算的结果就是当前的运动路程。

Tween.js如下:

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;
  }
 }
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
package.json配置文件构成详解
Aug 27 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
jquery实现手机号码选号的方法
Jul 31 #Javascript
javascript文本模板用法实例
Jul 31 #Javascript
Javascript实现网络监测的方法
Jul 31 #Javascript
jquery模拟alert的弹窗插件
Jul 31 #Javascript
JSON字符串转JSON对象
Jul 31 #Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 #Javascript
JavaScript实现快速排序的方法
Jul 31 #Javascript
You might like
ezSQL PHP数据库操作类库
2010/05/16 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
YII框架常用技巧总结
2019/04/27 PHP
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
Python2.x与Python3.x的区别
2016/01/14 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
基于python实现简单日历
2018/07/28 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
院领导写的就业推荐信
2014/03/09 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2015年教研工作总结
2015/05/23 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫