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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
Vue props用法详解(小结)
Jul 03 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 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针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php微信开发之百度天气预报
2016/11/18 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
js中less常用的方法小结
2017/08/09 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
详解Python验证码识别
2016/01/25 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
python热力图实现简单方法
2021/01/29 Python
携程英文网站:Trip.com
2017/02/07 全球购物
年度考核自我评价
2014/01/25 职场文书
环保建议书作文
2014/03/12 职场文书
学雷锋标语
2014/06/25 职场文书
2014年医院工作总结
2014/11/20 职场文书
2015年派出所工作总结
2015/04/24 职场文书
python实现高效的遗传算法
2021/04/07 Python
字节飞书面试promise.all实现示例
2022/06/16 Javascript