0

我编写了一个 JavaScript 程序，它为 NxN 滑动瓷砖拼图生成了一个解决方案。它找到了一个正确的解决方案，但是当涉及到在不同的拼图实例之间制作动画以得到解决方案时，事情变得一团糟。起初（3-4 步）瓷砖会按应有的方式移动，但随后一些瓷砖开始沿对角线移动并在其他瓷砖上方移动。终于找到了解决方案，但中间动画出错了。这是我的动画循环的代码：

var steps = solution.length;
for (i=0; i<steps; i++) {


    next = solution.pop();
    // ANIMATE TILE
    var delay = speed*i;
        // sp is an array where the position (y, x) of the free spot is
    var spA = current.spacePos;     
    var spB = next.spacePos;
    var movingTile = current.box[spB[0]][spB[1]];
    var leftOffset = size*(spA[1]-spB[1]);
    var topOffset = size*(spA[0]-spB[0]);
    var thisTile = $('#tile'+movingTile);
    thisTile.delay(delay).animate({
        opacity: 1.0,
        top: "+=" + topOffset,
        left: "+=" + leftOffset
        }, speed);
    // Update for next round
    current = next;
};
4

1 回答 1

1

如果您希望下一个动画的时间与前一个动画的完成时间完全一致（您这样做），那么您不能使用 adelay()来安排下一个动画。相反，您必须使用一个动画的完成功能来触发下一个动画。只有这样，时间才能完美，即使在数百个连续动画之后。

你可以这样做：

var current = xxx;   // this has to get initalized (I'm not sure how in your code)
function goNext() {
    if (!solution.length) {
        return;
    }

    var next = solution.pop();
    // ANIMATE TILE
    // sp is an array where the position (y, x) of the free spot is
    var spA = current.spacePos;     
    var spB = next.spacePos;
    var movingTile = current.box[spB[0]][spB[1]];
    var leftOffset = size*(spA[1]-spB[1]);
    var topOffset = size*(spA[0]-spB[0]);
    var thisTile = $('#tile'+movingTile);
    var current = next;
    thisTile.animate({
        opacity: 1.0,
        top: "+=" + topOffset,
        left: "+=" + leftOffset
        }, speed, goNext);
}

goNext();
于 2012-08-16T21:21:42.707 回答