Animation Three.js与Tween.js中的动画同步

我正在尝试使用Tween.js在Three.js中通过链接动画沿路径设置精灵动画，以便实现如下效果：

// 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);
    }
}

----@----@----@----@----@----等

每个精灵都有自己的tween动画，我只是在开始时延迟每个tween动画。事实上，每个精灵在路径上都有N个动画（这不是一条直线），我将它们链接起来以产生循环效果

如果FPS非常稳定，一切都会顺利进行，但我的问题是，如果在某个点我有FPS下降，不同精灵的动画不再同步，精灵之间的空间也不再相等。我可能会得到这样的结果：

// 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);
    }
}

---@--@----@-@-@-----@---等

我想知道是否有更好的方法，比如所有精灵只有一个tween动画，但我不知道如何在许多线段上引入每个精灵之间的偏移

我无法发布确切的代码，因为它是一个更大应用程序的一部分，无法按原样使用，但它看起来是这样的：

// 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);
    }
}

---

好吧，两年多了，接近1K视图但没有回复：lol：我建议TweenJS用于动画；）我没有看到发布的问题，所以我添加了它