3

我正在尝试使用 Tween.js 通过链接动画来沿 Three.js 中的路径为精灵设置动画，以便获得类似的效果：

- - @ - - @ - - @ - - @ - - @ - - ETC

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

如果 FPS 完全稳定，一切都会顺利，但我的问题是，如果在某些时候我有 FPS 下降，不同精灵的动画不再同步，精灵之间的空间不再相等。我最终可能会得到这样的结果：

- -@ - @ - - @-@-@ - - -@ - - ETC

我想知道是否有更好的方法来解决这个问题，比如所有精灵只有一个补间动画，但我不知道如何在许多线段上引入每个精灵之间的偏移量。

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

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

0 回答 0