animation - Tween.js を使用した Three.js でのアニメーションの同期

Question

Tween.js を使用して Three.js のパスに沿ってスプライトをアニメーション化しようとしています。アニメーションを連鎖させて、次のようなものにします。

----@----@----@----@----@----など

すべてのスプライトには独自のトゥイーン アニメーションがあり、最初は各トゥイーン アニメーションを遅らせるだけです。実際、各スプライトにはパス (直線ではない) に沿って N 個のアニメーションがあり、それらを連鎖させてループ効果を持たせています。

FPS が完全に安定している場合はすべてうまくいきますが、私の問題は、ある時点で FPS が低下した場合、異なるスプライトのアニメーションが同期されなくなり、スプライト間のスペースが等しくなくなることです。私は潜在的にこのようなものになる可能性があります:

---@--@----@-@-@-----@---など

すべてのスプライトに対してトゥイーン アニメーションを 1 つだけにするなど、これに対するより良いアプローチがあるかどうか疑問に思っていましたが、多くの線分で各スプライト間にオフセットを導入する方法がわかりません。

より大きなアプリの一部であり、そのままでは使用できない正確なコードを投稿することはできませんが、次のようになります。

// create animations
for each (sprite) {
    for each (segment) {
        var currentAnimation = new TWEEN.Tween(sprite.position).to({
            x : segment.endpoint.x,
            y : segment.endpoint.y,
            z : segment.endpoint.z
        }, animationTime).easing(TWEEN.Easing.Linear.None);

        currentAnimation.delay(delayTime * currentSpriteNumber);
        previousAnimation.chain(currentAnimation);
    }
    lastAnimation.chain(firstAnimation);
    lastAnimation.onComplete(onEachSpriteAnimationCompleted);
}

// start the animations
for each (sprite) {
    spriteFirstAnimation.start();
}

// to remove the delay when each sprite animation has made one loop, 
// and instantly replace the sprite at the beginning of the path 
// (my paths are not closed)
var onEachSpriteAnimationCompleted = function() {
    sprite.position.set(starting position);

    for each (sprite animation) {
        animation.delay(0);
    }
}