tweenjs缓动算法的使用实例分析


Posted in Javascript onAugust 26, 2019

本文实例讲述了tweenjs缓动算法的使用。分享给大家供大家参考,具体如下:

这里的tweenjs不是依托于createjs的tewwnjs,而是一系列缓动算法集合。因为本身是算法,可以用在各个业务场景中,这也正是总结学习它的价值所在。tweenjs代码详情:

/*
 * Tween.js
 * t: current time(当前时间);
 * b: beginning value(初始值);
 * c: change in value(变化量);
 * d: duration(持续时间)。
 * you can visit 'http://easings.net/zh-cn' to get effect
*/
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) {
      var s;
      if (t==0) return b;
      if ((t /= d) == 1) return b + c;
      if (typeof p == "undefined") p = d * .3;
      if (!a || a < Math.abs(c)) {
        s = p / 4;
        a = c;
      } else {
        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) {
      var s;
      if (t==0) return b;
      if ((t /= d) == 1) return b + c;
      if (typeof p == "undefined") p = d * .3;
      if (!a || a < Math.abs(c)) {
        a = c;
        s = p / 4;
      } else {
        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) {
      var s;
      if (t==0) return b;
      if ((t /= d / 2) == 2) return b+c;
      if (typeof p == "undefined") p = d * (.3 * 1.5);
      if (!a || a < Math.abs(c)) {
        a = c;
        s = p / 4;
      } else {
        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 (typeof s == "undefined") s = 1.70158;
      return c * (t /= d) * t * ((s + 1) * t - s) + b;
    },
    easeOut: function(t, b, c, d, s) {
      if (typeof 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 (typeof 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;
      }
    }
  }
}
Math.tween = Tween;

具体每种算法的操作实例,可以看大神张鑫旭的博客实例:http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html

当然,以上这些算法仅仅是一个状态,需要配合时间上的变化,才能实现缓动,这里使用的是requestAnimationFrame,具体代码好吧,也是拿来主义

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                  || window[vendors[x]+'CancelRequestAnimationFrame'];
  }
  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
       timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

最后是简单的实例应用,很简单,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用tweenjs</title>
  <style type="text/css">
  div {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    text-align: center;
    line-height: 100px;
    position: absolute;
  }
  </style>
</head>
<body>
  <div id="test">
    这是测试
  </div>
  <script type="text/javascript" src="RequestAnimationFrame.js"></script>
  <script type="text/javascript" src="tween.js"></script>
  <script type="text/javascript">
    var DOM=document.getElementById("test");
  var t = 0,//开始时间
    b = 0,//开始位置
    c = 1000,//变化值
    d = 100;//持续时间
  var step = function() {
    var value = Tween.Bounce.easeOut(t, b, c, d);
    DOM.style.left = value + 'px';
    t++;
    if (t <= d) {
      // 继续运动
      requestAnimationFrame(step);
    } else {
      // 动画结束
    }
  };
  step();
  </script>
</body>
</html>

具体使用中,需要参数以及控制好结束条件即可。

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

Javascript 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
js验证是否为数字的总结
Apr 14 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 #Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 #Javascript
小程序实现层叠卡片滑动效果
Aug 26 #Javascript
微信小程序 数据缓存实现方法详解
Aug 26 #Javascript
使用typescript构建Vue应用的实现
Aug 26 #Javascript
微信小程序实现手势滑动卡片效果
Aug 26 #Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 #Javascript
You might like
网站用php实现paypal整合方法
2010/11/28 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
javascript实现评分功能
2020/06/24 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
python中的错误处理
2016/04/10 Python
python requests 使用快速入门
2017/08/31 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python读写docx文件的方法
2018/05/08 Python
python实现Windows电脑定时关机
2018/06/20 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
五种Python转义表示法
2020/11/27 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
数控专业个人求职信范文
2014/02/05 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
python实现简单的名片管理系统
2021/04/26 Python
opencv检测动态物体的实现
2021/07/21 Python
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers