Tween

Tween.js：一个JS库，其效果是可以让元素平滑地执行简单的动画效果
使用方式：<script src = "tween.js" > < /script>在文件中引入tween.js文件
具体方法：

• Linear：线性 (匀速)
• Quad: 二次方缓动效果
• Cubic: 三次方缓动效果
• Quart：四次方缓动效果
• Quint：五次方缓动效果
• Sine：正弦缓动效果
• Expo：指数缓动效果
• Circ：圆形缓动效果
• Elastic：指数衰减正弦曲线缓动函数
• Back：超过范围的三次方的缓动函数
• Bounce：指数衰减的反弹曲线缓动函数

以上每种方式都有三种不影响总时间和总路程的缓动效果：

• easeIn：逐渐加速
• easeOut：逐渐减速
• easeInOut：先加速后减速

使用参数：

• t：动画已经执行时间
• b：初始的位置
• c：变化的数值
• d：总时间

---

使用实例：

元素使用tween来获得简单的缓动效果：
	var t = 0;
	var b = 0;
	var c = 100;
	var d = 200;
	var box = document.getElementsByClassName("box")[0];
	var time = setInterval(function () {
		t++;
		if(t >= d){
			clearInterval(time);
		}
		box.style.left = Tween.Linear(t,b,c,d) + "px";
		box.style.top = Tween.Linear(t,b,c,d) + "px";
	},50);

来源：CSDN

作者：Listener丶

链接：https://blog.csdn.net/Listner/article/details/104154950