在 tween.js 和 three.js 中停止补间动画

Question

我在使用 tween.js 停止 three.js 中的补间时遇到问题。文档声明使用 tween.stop()，但这似乎不起作用。

当您将鼠标悬停在一个框上时，它开始改变颜色。这个动画需要 10 秒，但我试图停止它只是为了使用 setTimeout(function(){ tween.stop() }, 1000); 测试 .stop() 功能，但它什么也没做...

非常感谢任何帮助！

Answer 1

存在引用问题和更新问题。我对您的代码进行了一些更改。这不是解决方案，您可以单独使用每个更改。最好的解决方案是将每个补间作为函数内部的 var，在补间对象中集成计数并使用 onUpdate(function(){if(this.counter > 1000){tween.stop}}) (INTERSECTED.material.color) 因为你创建了很多未引用的计时器和补间，这将是一个性能问题。

function animate() { 
      //
      TWEEN.update();
      //
}

    if (intersects.length > 0) {

        if (INTERSECTED != intersects[0].object) {

            if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);

            INTERSECTED = intersects[0].object;
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            //INTERSECTED.material.emissive.setHex(0xff0000);
            TWEEN.remove(tween);
            tween = new TWEEN.Tween(INTERSECTED.material.color).onStart(function(){

      setTimeout(function(){ tween.stop() }, 1000); ///not good
}).start();     
            .to({r: 0, g: 25, b: 155}, 10000) /// here set correct time
            .easing(TWEEN.Easing.Quartic.In)
            .start();

            setTimeout(function(){ tween.stop() }, 1000);/// will not work if you create anoter it that one second

        }
        else {
            if(tween) tween.update(time); // bad
        }

    }

在 tween.js 和 three.js 中停止补间动画

Stop a tween animation in tween.js and three.js

three.js

tween.js