tween.js一个平滑动效果的js动画库

最新推荐文章于 2025-09-29 14:18:03 发布

原创

最新推荐文章于 2025-09-29 14:18:03 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #库

tween.js是一个JavaScript库，用于创建平滑的动画效果，类似于CSS3过渡。它通过设定参数，如初始值、变化量、持续时间和不同类型的缓动效果，来实现各种动画。包括Linear、Quadratic到Elastic和Bounce等多种缓动函数。开发者可以结合实际需求，灵活运用tween.js实现不同的动画场景。

tween.js一个平滑动效果的js动画库

tween.js是什么？
tween.js是一款可生成平滑动效果的js动画库，允许以平滑的方式修改元素的属性值。
tween.js达到什么效果？
它可以通过设置，生成各种类似CSS3的动画效果。
tween.js的参数有哪些？
tween.js中的方法接收4个参数：t,b,c,d,分别是：
    t：current time 当前时间;
    意思为：开始的步骤（一般从0开始），预示着一段动画的开始；
    b beginning value 初始值;
    意思为：开始量(开始的属性值);
    c change in value 变化量;
    意思为：属性值的该变量，即结束位置的属性值 - 开始位置的属性值;
    d duration 持续时间;
    意思为：结束的步数（运动的总时间)。
tween.js的效果：
Linear：线性匀速运动效果；
Quadratic：二次方的缓动（t^2）；
Cubic：三次方的缓动（t^3）；
Quartic：四次方的缓动（t^4）；
Quintic：五次方的缓动（t^5）；
Sinusoidal：正弦曲线的缓动（sin(t)）；
Exponential：指数曲线的缓动（2^t）；
Circular：圆形曲线的缓动（sqrt(1-t^2)）；
Elastic：指数衰减的正弦曲线缓动；
Back：超过范围的三次方缓动（(s+1)*t^3 – s*t