同步动画，或在动画的中途点调用

Synching animations, or calling at the halfway point of an animation

本文关键字：动画 调用 同步      更新时间：2023-09-26

我有一个有点困难的动画在JQuery中做，我还没有找到一个好的方法来处理它。我有一个移动网站，在屏幕上显示一系列选择的场景。当玩家做出选择时，这些选择就会从屏幕上消失，同时出现一个城市的新场景(这应该是模拟驾驶)——这个场景并没有停在屏幕的中央，而是从屏幕的另一端一直走过去。问题是，当它到达中心时，我想在它后面触发一个新的div，匹配速度，等等，这样一切就同步了。

如果我将城市场景的动画设置为两部分，一次在中间，它可以触发新的选择场景，一次离开屏幕，有一个明显的抖动。我还没有找到触发延迟的方法，因为在延迟结束时，我需要调用自定义函数，而不是jquery函数。这是我的代码:

Driving Scene (called when choices begin animating out):
$('#interlude').animate({marginLeft: -viewportW + "px"},3000,'linear',function(){
    $('#interlude').remove();
    displayScene(sceneID); //need to figure out how to call this at the halfway point
});

在动画之前使用setTimeout()，在第一个动画的中途触发第二个动画。

var animateTime = 3000;
setTimeout("displayScene(" + sceneId + ")", animateTime / 2);
$('#interlude').animate({marginLeft: -viewportW + "px"},animateTime,'linear',function(){
    $('#interlude').remove();
});
相关文章：