tween.js缓动补间动画算法示例


Posted in Javascript onFebruary 13, 2018

一、理解tween.js

如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b、c、d三个参数(即初始值,变化量,持续时间)在缓动开始前,是需要先确定好的。 首先引入一个概念就补间动画 Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动、弹簧等等。 tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢?

相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一.补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多. 好了,废话不多说,先看看百度百科关于补间动画给出的定义: 补间动画:做flash动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动; 插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的

那么什么是关键帧呢? 举个栗子: 先科普一下,平常所看的电影,动画都是24帧的,24帧为一秒.在人眼可以捕捉的范围内.可以想象两个点之间有有22个点,形成一条直线或者曲线.而每一个点就代表一帧,帧——就是动画中最小单位的单幅影像画面,而单幅影像画面就可以看做是一个对象(一切皆对象,除去值类型)了.而这条线就代表对象的运动轨迹.

二、四个参数

  1. t: current time-->代表第一个点,也就是第一帧,也就是一个动画开始的地方。
  2. b: beginning value-->代表初始值,也就是开始量,我们看电影或者动画一般都不会看序幕把,那么跳过开头部分,选择第一帧和最后一帧之间你要开始看位置,而此位置就是初始值。
  3. c: change in value-->代表的就是最后一帧减去初始值就是变化量,
  4. d: duration-->代表最后一帧,1s的结束,也是动画的结束。

tween.js的使用 1.下载 2.引入 3.使用tween.js语法

Tween.缓动函数名.缓动效果名(t,b,c,d);

注意:当开始步数增加到与结束步数相等时,整个运动结束. 注注意:只有当t增加到与d相等时才会结束运动;如果不等,运动不会停止.

三、tween文件代码

/*
 * Tween.js
 * t: current time(当前时间);
 * b: beginning value(初始值);
 * c: change in value(变化量);
 * d: duration(持续时间)。
*/
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;

四、举个栗子

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="Tween/tween.js"></script>
    <style>
      *{margin: 0;padding: 0;}
      .out{width: 800px;height: 500px;background: #e5e5e5;position: relative;padding: 20px;text-align: center;}
      .inner{width: 50px;height: 50px;border-radius: 50%;background: #FF0000; position: absolute;left: 50px;top: 50px;}
    </style>
  </head>

  <body>
    <div id="app" class="out">
      <div class="inner" id="ball"></div>
      <button id="start" @click="start()">start</button>
    </div>
  </body>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        t: 0,
        b: 50,
        c: 500,
        d: 1500,
      },
      methods:{
        start(){
          var t = this.t;
          const b = this.b;
          const c = this.c;
          const d = this.d;
          const setInt = setInterval(()=>{
            t++;
            console.log(t)
            if(t==300){clearInterval(setInt)}
            console.log(t);
            const ballLeft = Tween.Linear(t,b,c,d)+"px";
            ball.style.left = ballLeft;
          },20)
        }
      }
    })
  </script>
</html>

五、个人体会

tween的优势在于tween实现效果是依据算法,不是某种语言的语法,因此可以运用的地方很广泛,一次学习终身受益。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
基于Node.js实现压缩和解压缩的方法
Feb 13 #Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 #Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 #Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 #Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 #Javascript
Vue+webpack项目基础配置教程
Feb 12 #Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 #Javascript
You might like
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
JavaScript—window对象使用示例
2013/12/09 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JS功能代码集锦
2016/05/04 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
python读写LMDB文件的方法
2018/07/02 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python读取图片任意范围区域
2019/01/23 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
机械个人求职信范文
2014/01/24 职场文书
大学三年计划书范文
2014/04/30 职场文书
C++程序员求职信
2014/05/07 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
英语教师求职信
2014/06/16 职场文书
市场部岗位职责
2015/02/12 职场文书
2015年导购员工作总结
2015/04/25 职场文书