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原型继承的陷阱
Dec 03 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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自定义大小验证码的方法详解
2013/06/07 PHP
PHP生成树的方法
2015/07/28 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python创建学生成绩管理系统
2019/11/22 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
物业电工岗位职责
2013/11/20 职场文书
给护士表扬信
2014/01/19 职场文书
学生病假条怎么写
2015/08/17 职场文书
聘任书格式及范文
2015/09/21 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL