javascript - 如何在 3 个 js 中依次使用 2 个不同的动画对 2 个对象进行动画处理？

Question

我正在用 3 js 创建动画。我是初学者，我想出了如何使用 VectorKeyframeTrack 函数为 1 个对象设置动画。我想对 2 个不同的对象依次执行 2 个不同的动画(不是组)。我已经让它同时工作，即同时播放动画。当球体循环 4 次后，如何让矩形移动。我本来打算使用setTimeout。有没有更好的办法？

const animationClip = new THREE.AnimationClip(null,3, [track1]);
const animationClip1 = new THREE.AnimationClip(null,3, [track]);
const animationAction = mesh.userData.mixer.clipAction(animationClip);
const animationAction1 = cube.userData.mixer.clipAction(animationClip1);

animationAction.setLoop(THREE.LoopRepeat ,4);
animationAction.play();
setTimeout(function(){
   animationAction1.setLoop(THREE.LoopRepeat ,4);
   animationAction1.play(); 
},6000);

这是 js fiddle : https://jsfiddle.net/bpyLsfda/5/

Answer 1

Is there a better way?

是的。您可以向第一个动画混合器注册事件监听器并监听 finished 事件，而不是使用 setTimeout()。您的代码现在看起来像这样:

mesh.userData.mixer.addEventListener( 'finished', ( /*event*/ ) => {

    animationAction1.setLoop( THREE.LoopRepeat ,4 );
    animationAction1.play(); 

} );

动画 Action 播放完成后会触发该事件。您还可以通过 event.action 从 event 对象中提取相应的操作。

https://jsfiddle.net/6hzr0a9v/

三.js R106