Question

我编写了一个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;
};

Answer 1

如果您希望下一个动画的时间与上一个动画的完成时间（您这样做）完全一致，则您无法使用delay()来安排下一个动画。相反，您必须使用一个动画中的完成功能来触发下一个动画。只有这样，即使在连续数百个动画之后，时机也会完美。

你可以这样做：

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();

使用jQuery为NxN拼图设置解决方案的动画

1 个答案: