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 相关文章推荐
基于jquery实现的表格分页实现代码
Jun 21 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 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
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
vue3.0 上手体验
2020/09/21 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python isinstance函数介绍
2015/04/14 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
QML使用Python的函数过程解析
2019/09/26 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
会计人员演讲稿
2014/09/11 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
初中作文评语集锦
2014/12/25 职场文书
立案决定书范文
2015/06/24 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server