Tween

最新推荐文章于 2025-03-12 13:12:42 发布

原创最新推荐文章于 2025-03-12 13:12:42 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了Tween.js动画库的使用方法，包括线性、二次方到五次方缓动效果，以及正弦、指数、圆形等缓动函数。解释了easeIn、easeOut和easeInOut三种缓动效果，并提供了具体实例，帮助读者理解如何应用Tween.js实现平滑动画。

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);