如何控制tweenjs，有没有方便的工具

Question

在学习threejs ，在blender里做好的模型动画可以通过gui来控制速率，帧动画等效果。同时我也用tweenjs来控制摄像头的运动效果，该如何控制tweenjs的动画效果可以实现播放速度，帧播放等效果？又该如何使模型动画和摄像头运动相比配?

 this.action0.play()
        //this.action0.loop = THREE.LoopOnce
        this.action0.paused = true
        let animationGUI = gui.addFolder("动画控制器");
        animationGUI.add(this.action0, 'time', 0, 4).step(0.1).name("播放帧动画");
        animationGUI.add(this.action0, 'timeScale', 0, 3).step(0.1).name("播放速度");
        animationGUI.add(this.action0, 'paused').name("暂停播放")

if (this.start == false) {
        this.tween.chain(this.tween1);
        this.tween1.chain(this.tween2);
        this.tween.start();
        this.tween2.onComplete(() => {
          this.finishAnimation()
        });     
      } else {
        this.camera1.position.set(-35, 90, -35)
      }

有没有什么方法可以滚动条控制tweenjs的播放

Answer 1

首先，Tween.js 并没有内置的进度控制接口，但你可以手动创建一个。实现这个功能的一个基本思路是创建一个变量用来控制动画的进度，然后在动画的每一帧更新这个变量。
下面是一个简单的示例来展示这个思路：

let progress = 0; // 动画的初始进度
let duration = 1000; // 动画的总持续时间，单位毫秒
let tween = new TWEEN.Tween({ progress: 0 }) // 创建Tween对象
.to({ progress: 1 }, duration) // 设置目标值和总持续时间
.onUpdate(function() { // 设定一个函数，在每一帧都会被调用
  progress = this.progress; // 更新 progress 的值
  render(); // 重新渲染场景
})
.start(); // 开始动画

然后你可以通过设置 progress 的值来控制动画的播放。例如，如果你想要暂停动画，你可以停止更新 progress。如果你想要跳到动画的某个时刻，你可以直接设置 progress 的值。
另外，关于模型动画和相机运动的配合，你需要明白这两者之间的关系。通常，相机运动的速度是固定的，而模型动画的播放速度是可以调整的。调节两者的播放速度，让模型动画在相机移动到指定位置时刚好完成，这就需要你通过实验来找到最佳的播放速度。
以上就是基于 Tween.js 控制动画播放的一种思路，希望可以帮助到你。