Tween.js的使用示例

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

bgk083

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

阅读量9.1k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/bgk083/article/details/51240940

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Tween.js库的核心概念，包括补间动画原理、过渡形式及关键回调事件。通过实例展示了如何利用Tween.js创建从原始位置到目标位置的动画，包括设置过渡时间和选择过渡效果。此外，提供了简化代码示例，演示了Tween.js函数链式的高效使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可参考：http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html

官方文档：https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

1.Tween原意是补间动画，也就是给出一个物体的原始位置和目标位置，Tween会在原始位置和目标位置补充动画，实现移动的动画效果。

2.从原始位置到目标位置中间有过渡，过渡的效果有很多，Linear.None,Elastic.InOut等等

3.TWEEN有几个callback事件，onStart,onStop,onComplete等，用法是

new TWEEN.Tween(position).to(target, 2000).easing(TWEEN.Easing.Linear.None).onComplete(function(){
   console.log("done")
}).start()

使用步骤：

①创建Tween对象，指明初始位置和目标位置

<pre name="code" class="javascript">var position = { x : 0, y: 300 };
var target = { x : 400, y: 50 };
new TWEEN.Tween(position).to(target, 2000).easing(TWEEN.Easing.Linear.None).start()

其中2000表示从开始位置到目标位置需要2秒

②指明过渡形式

tween.easing(TWEEN.Easing.Linear.None)

这里选择了线性过渡

③启动Tween

tween.start();

④定期更新tween，一般放入在render循环里

TWEEN.update();

以上代码可精简为

var position = { x : 0, y: 300 };
var target = { x : 400, y: 50 };
new TWEEN.Tween(position).to(target, 2000).easing(TWEEN.Easing.Linear.None).start()

因为TWEEN的每一个函数都返回tween对象，所以可以链式调用。