在three.js中经常需要移动物体,希望在移动的过程中有补间动画,平移过去,而不是直接出现在目标位置,这个时候,我们就需要使用到Three.js的动画库TWEEN了.

引入TWEEN

  1. <script src='./js-r100/libs/tween.min.js'></script>

调用动画库

在成功引入后,我们需要在合适的地方调用补间动画对象

  1.  new TWEEN.Tween(belineobj.scale)      //- 需要改变的对象,scale可以进行缩放
  2.    .to({ x: 2, y: 2, z:2 }, 500)   //- 变化到原来的2倍
  3.    .easing(TWEEN.Easing.Sinusoidal.InOut)  //- 动画类型这里的InOut表示前半段加速，后半段减速
  4.    .onComplete(function () {   //- 执行完毕函数
  5.    belineobj.scale.x = 0.2    //- 在回调完成时,执行的内容
  6.    belineobj.scale.y = 0.2;
  7.    belineobj.scale.z = 0.2;
  8.  }).start();

更新动画

这还没完,我们还需要在渲染场景时更新动画对象.

  1. //- 渲染函数
  2. function render() {
  3.   //执行渲染操作   指定场景、相机作为参数
  4.   renderer.render(scene, camera);
  5.   stats.update(); // 调用stats.update()统计时间和帧数
  6.   TWEEN.update();
  7.   requestAnimationFrame(render)
  8. }

TWEEN的函数

以上三步可以完成一个简单的补间动画操作,从上面的demo可以发现,TWEEN.Tween函数是可以链式调用的,并且有一些方法可以控制动画的每个阶段,比如to()是指最终的赋值,onComplete()则是完成时触发,下面列举常用的函数用于更好的控制动画

  • tween.start() // 启动动画
  • tween.delay(int) // 延时一个时间
  • tween.stop() // 停止
  • tween.repeat(10) // 设置重复10次， repeat(Infinity) 无限循环
  • tween.chain(tween) // 链接下一个动画
  • tween.easing(fun) // 设置动画函数

这里需要另外单独说的是tween.easing(fun)设置动画函数.是自定义的函数，包括一个输入参数，一个返回参数

easing函数:

easing函数 描述
Linear 线性匀速运动效果
Quadratic 二次方的缓动（t^2）
Cubic 三次方的缓动（）
Quartic 四次方的缓动（）
Quintic 五次方的缓动
Sinusoidal 正弦曲线的缓动（）
Exponential 指数曲线的缓动（）
Circular 圆形曲线的缓动（）
Elastic 指数衰减的正弦曲线缓动（）
Back 超过范围的三次方的缓动
Bounce 指数衰减的反弹缓动

easing类型

easing类型 描述
In 加速，先慢后快
Out 减速，先快后慢
InOut 前半段加速，后半段减速

全局方法

TWEEN.update() // 激活所有tween
TWEEN.getAll() // 获取所有激活tween数组
TWEEN.removeAll // 移除所有激活的tween
TWEEN.add(tween) // 添加一个到激活的列表中
TWEEN.remove(tween) // 移除一个