tween.js缓动补间动画算法详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了tween.js缓动补间动画算法详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7656字，纯文字阅读大概需要11分钟。

内容图文

本文主要和大家介绍了tween.js缓动补间动画示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

一、理解tween.js

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

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

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

二、四个参数

t: current time-->代表第一个点，也就是第一帧，也就是一个动画开始的地方。
b: beginning value-->代表初始值，也就是开始量，我们看电影或者动画一般都不会看序幕把，那么跳过开头部分，选择第一帧和最后一帧之间你要开始看位置，而此位置就是初始值。
c: change in value-->代表的就是最后一帧减去初始值就是变化量，
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>
    <p id="app" class="out">
      <p class="inner" id="ball"></p>
      <button id="start" @click="start()">start</button>
    </p>
  </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实现效果是依据算法，不是某种语言的语法，因此可以运用的地方很广泛，一次学习终身受益。

内容总结

以上是互联网集市为您收集整理的tween.js缓动补间动画算法详解全部内容，希望文章能够帮你解决tween.js缓动补间动画算法详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/295043.html

来源：【匿名】

【上一篇】如何实现快速排序的方法【下一篇】浅谈php实现映射的两种方法（链表和二叉树）

更多 ►

【tween.js缓动补间动画算法详解】教程文章相关的互联网学习教程文章

最小二乘法原理最小二乘法的目标：求误差的最小平方和，对应有两种：线性和非线性。线性最小二乘的解是closed-form（如下文），而非线性最小二乘没有closed-form，通常用迭代法求解（如高斯牛顿迭代法，本文不作介绍）。【首先得到线性方程组】1.概念最小二乘法（又称最小平方法）是一种数学优化技术。它通过最小化误差的平方和寻找数据的最佳函数匹配。利用最小二乘法可以简便地求得未知的数据，并使得这些求得的数据与实际数据之...

Java排序需掌握算法详解【代码】

package com.sxt.review;/*内部排序：（在内存）* 插入排序-->希尔排序* 冒泡排序-->快速排序* 选择排序-->堆排序* 归并排序* 基数排序* 外部排序：（排序过程需访问外存）*/import java.util.Arrays;publicclass TestSort {publicstaticvoid main(String[] args) {int[] arr = { 2, 45, 3, 0, 7, 9, 2, 88 };// BubbleSort(arr);// System.out.println("冒泡排序："+Arrays.toString(arr));// ChoiceSort(arr);// System.out.prin...

朱、刘算法：求最小树形图权值个人理解+个人详解【最小树形图模板】【图】

什么是最小树形图？相信大家如果会过来看这篇文章，想必也应该对最小生成树有所了解的，最小生成树求的是无向图的一颗生成树的最小权值。我们的最小树形图就是来解决一个有向图的一颗生成树的最小权值，对于度娘来说，最小树形图是这样定义的：最小树形图，就是给有向带权图中指定一个特殊的点root，求一棵以root为根的有向生成树T，并且T中所有边的总权值最小。通解最小树形图的一种算法是是1965年朱永津和刘振宏提出的复杂度为O(...

分享《深度学习与计算机视觉算法原理框架应用》PDF《大数据架构详解从数据获取到深度学习》PDF +数据集【图】

下载：https://pan.baidu.com/s/12-s95JrHek82tLRk3UQO_w更多分享资料：https://www.cnblogs.com/javapythonstudy/《深度学习与计算机视觉算法原理、框架应用》PDF，带书签，347页。《大数据架构详解：从数据获取到深度学习》PDF，带书签，373页。配套源代码。《深度学习与计算机视觉算法原理、框架应用》全书共13章，分为2篇，第1篇基础知识，第2篇实例精讲。用通俗易懂的文字表达公式背后的原理，实例部分提供了一些工具，很实...

Union-Find算法详解【代码】

今天讲讲 Union-Find 算法，也就是常说的并查集算法，主要是解决图论中「动态连通性」问题的。名词很高端，其实特别好理解，等会解释，另外这个算法的应用都非常有趣。说起这个 Union-Find，应该算是我的「启蒙算法」了，因为《算法4》的开头就介绍了这款算法，可是把我秀翻了，感觉好精妙啊！后来刷了 LeetCode，并查集相关的算法题目都非常有意思，而且《算法4》给的解法竟然还可以进一步优化，只要加一个微小的修改就可以把时间...

高性能服务框架revolver：RUDP(可靠UDP)算法详解

上一篇BLOG已经介绍了revolver RUDP的传输性能、基本的框架和接口，这篇文章我重点讲述RUDP的实现细节。在RUDP的模块中最为重要的是其收发缓冲控制和CCC发送窗口控制、CCC发送慢启动控制、CCC快恢复控制等几个过程。（关于RUDP源代码实现在revolver开源项目的RUDP目录:点击打开链接）数据块定义在RUDP模块中，所有发送的数据被定义成RUDPRecvSegment 和 RUDPSendSegment结构，其中RUDPSendSegment是发送块定义，RUDPRecvSegment 是...

算法导论学习---红黑树详解之插入(C语言实现)【代码】【图】

前面我们学习二叉搜索树的时候发现在一些情况下其高度不是很均匀，甚至有时候会退化成一条长链,所以我们引用一些”平衡”的二叉搜索树。红黑树就是一种”平衡”的二叉搜索树，它通过在每个结点附加颜色位和路径上的一些约束条件可以保证在最坏的情况下基本动态集合操作的时间复杂度为O(nlgn).下面会总结红黑树的性质，然后分析红黑树的插入操作，并给出一份完整代码。先给出红黑树的结点定义：#define RED 1#define BLACK 0///红黑...

Bellman-ford算法与SPFA算法思想详解及判负权环（负权回路）

我们先看一下负权环为什么这么特殊：在一个图中，只要一个多边结构不是负权环，那么重复经过此结构时就会导致代价不断增大。在多边结构中唯有负权环会导致重复经过时代价不断减小，故在一些最短路径算法中可能会凭借不断重复经过负权环来得到权和为无穷小的最短路径，但因重复经过边不符合简单路径的定义导致这些算法跑最短路时要避免有负权环的出现。这类算法说的就是Bellman-ford以及基于它进行优化的spfa了。由于负权环的出现导...

大数据技术之_24_电影推荐系统项目_04_推荐系统算法详解【图】

第九章推荐系统算法详解9.1 常用推荐算法分类9.1.1 基于人口统计学的推荐与用户画像9.1.2 基于内容的推荐与特征方程9.1.3 基于协同过滤的推荐第九章推荐系统算法详解9.1 常用推荐算法分类9.1.1 基于人口统计学的推荐与用户画像9.1.2 基于内容的推荐与特征方程特征按照不同的数据类型分类，有不同的特征处理方法推荐系统常见反馈数据基于 UGC 的推荐TF-IDF算法代码示例9.1.3 基于协同过滤的推荐基于近邻的协同过滤的推荐基于模型的...

SIFT 算法详解

有什么特征可以帮助我们来区分导致功能和表型变化的变异和其他变异，然后我们如何综合特征来做出一个预测模型？表型或功能的改变(phenotypical/functional effect)a,个体表型上的体现（导致疾病的或不导致疾病的）b,演化上的概念（它是不是会影响这个人的适应性，deleterious,还是说它对人的这个适应性没有影响，即neutral）c,特征（比如头发，身高）…………一般来说，蛋白序列的改变，它就更有可能结构和功能的改变，就更有可能...

Manacher算法详解【代码】【图】

/*首先呢，手动@一下逸安dalao。前几天一是考试没时间，再就是这个算法我只是懂，没写过题所以不敢写一个专题博客。终于抽出时间写一下这个noip基本不会涉及的算法啦*/首先我们知道回文的定义：正反读都是一样的字符串叫做回文串。如：madam，lol，oppo，zz，甚至连单字符都可以被称为回文（串）。上面的例子可以看出，回文串可以分为两种：奇数回文和偶数回文。如果我们想知道以一个字符串的所有子串中，最长的回文串是多长，怎么...

SIFT算法详解

尺度不变特征变换匹配算法详解Scale Invariant Feature Transform(SIFT)Just For Fun zdd zddmail@gmail.com or (zddhub@gmail.com) 对于初学者，从David G.Lowe的论文到实现，有许多鸿沟，本文帮你跨越。如果你学习SIFI得目的是为了做检索，也许OpenSSE更适合你，欢迎使用。 1、SIFT综述尺度不变特征转换(Scale-invariant feature transform或SIFT)是一种电脑视觉的算法用来侦测与描述影像中的局部性特征，它在空间尺度中寻找极值...

算法 - 最热教程

浅谈SQLServer查询优化器中的JOIN算法有没那种可逆算法是密文比明文短的呢？...javascript-类似Excel里面的NORMDIST函...C++中的分治算法及常见题目汇总压缩感知重构算法综述-学习笔记 c++中内置函数qsort（快速排序）和bsea...一、fpga图像处理算法整合基于遗传算法（deap）的非线性函数寻优...集成学习-Bagging集成学习算法随机森林...机器学习笔记（九）聚类算法及实践（K-...

首页 / 算法 / tween.js缓动补间动画算法详解

tween.js缓动补间动画算法详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【tween.js缓动补间动画算法详解】教程文章相关的互联网学习教程文章

算法学习#03--详解最小二乘法原理和代码【代码】【图】

Java排序需掌握算法详解【代码】

朱、刘算法：求最小树形图权值个人理解+个人详解【最小树形图模板】【图】

分享《深度学习与计算机视觉算法原理框架应用》PDF《大数据架构详解从数据获取到深度学习》PDF +数据集【图】

Union-Find算法详解【代码】

高性能服务框架revolver：RUDP(可靠UDP)算法详解

算法导论学习---红黑树详解之插入(C语言实现)【代码】【图】

Bellman-ford算法与SPFA算法思想详解及判负权环（负权回路）

大数据技术之_24_电影推荐系统项目_04_推荐系统算法详解【图】

SIFT 算法详解

Manacher算法详解【代码】【图】

SIFT算法详解

关联规则算法(The Apriori algorithm)详解【代码】【图】

【codeup】1959: 全排列及全排列算法详解【代码】

JVM GC算法 CMS 详解(转)【代码】

算法 - 相关标签

算法 - 最新教程

算法 - 最热教程