Question

我试图通过链接动画来使用Tween.js沿着Three.js中的路径为sprite做动画，以便得到类似的内容：

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

每个精灵都有自己的补间动画，我只是在开始时延迟每个补间动画。事实上，每个精灵沿路径都有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.js在Three.js中进行动画同步

0 个答案: