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 22 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
分析JavaScript数组操作难点
Dec 18 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
Vue 数据响应式相关总结
2021/01/28 Vue.js
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Django logging配置及使用详解
2019/07/23 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
怎样声明子类
2013/07/02 面试题
婚礼新郎父母答谢词
2014/01/16 职场文书
停电调休通知
2015/04/16 职场文书
党支部半年考察意见
2015/06/01 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
基于Redission的分布式锁实战
2022/08/14 Redis