⭐使用tweenjs来实现平滑的动画效果，最近在项目中遇到了需要根据数据实现地铁进站出站的动画效果，threejs和tweenjs的结合其实不要太好用。

tweenjs

• TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性，并允许链接补间动画和行动结合起来，创造出复杂的序列

• tween.js允许以平滑的方式修改元素的属性值。只需要告诉tween想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果

安装tween.js

npm

npm i @tweenjs/tween.js@^18

tweenjs CDN

https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.1.1/Tween.min.js

tweenjs在threejs中的应用

⭐将 TWEEN.update() 添加到three的animate里面，这个很重要。

 animate () {
      this.render();
      this.controls.update();
      requestAnimationFrame(this.animate);
      TWEEN.update()
  }

⭐动画方法封装

/**
*@cube 需要移动的物体位置
*@oldPo 物体原来的位置，也就是动画开始位置
*@newPo 物体新的位置，也就是动画结束的位置
*@time 动画的时间 1000=1s
*/
  initTweenNone(cube, oldPo, newPo, time) {
      const tween = new TWEEN.Tween(oldPo)
        .to(newPo, time)
        .easing(TWEEN.Easing.Exponential.Out)
        .onUpdate((obj) => {
          cube.x = obj.x;
          cube.y = obj.y;
          cube.z = obj.z;
        })
        .start();
  }
  

⭐方法调用

 var oldObjF = {
      x: -2000,
      y: -140,
      z: 0,
  };
 var newObjF = {
     x: 0,
     y: -140,
     z: 0,
 };
 this.initTweenNone(this.card.position, oldObjF, newObjF, 5000);

⭐如果需要在移动物体的同时也移动相机位置进行运镜的效果，可直接加入相机的位置

 var tween = new TWEEN.Tween({
      x1: oldC.x, // 相机x
      y1: oldC.y, // 相机y
      z1: oldC.z, // 相机z
      x2: oldT.x, // 控制点的中心点x
      y2: oldT.y, // 控制点的中心点y
      z2: oldT.z  // 控制点的中心点z
  });
 tween.to({
      x1: newC.x,
      y1: newC.y,
      z1: newC.z,
      x2: newT.x,
      y2: newT.y,
      z2: newT.z
  }, 1000);

❤ 感谢浏览~