Tween.js的使用示例

可参考：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等，用法是

[javascript]  view plain  copy

 

 

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

 

 

 

使用步骤：

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

 

[javascript]  view plain  copy

 

 

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

 

 

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

 

 

②指明过渡形式

 

[html]  view plain  copy

 

 

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

这里选择了线性过渡

 

 

③启动Tween

 

[javascript]  view plain  copy

 

 

1. tween.start();  

 

 

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

 

[javascript]  view plain  copy

 

 

1. TWEEN.update();  

以上代码可精简为

 

 

[javascript]  view plain  copy

 

 

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

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

转载于:https://www.cnblogs.com/chengqiaoli/p/6098455.html