javascript - 如何暂停和继续一个简单的 javascript 创建的动画

Question

我正在尝试创建一个游戏，您必须在其中移动一个平台上的球。游戏开始时，球落在平台上，然后您可以使用箭头键移动它。这一切正常，这里没有问题。请看my fiddle (单击 1 开始)。

如您所见，平台有一个黄色的方 block 。当您在其上移动球时，动画将开始(球消失)。如果您将球滚离蓝色方 block ，此动画不会停止。问题就在这里。如果球离开黄色平台，我想停止动画，如果你再次滚动它，我想继续。所以我需要暂停它并继续它。如何做到这一点？

部分代码:

this.isOn = function (x, y) {
        var isOnIt = this.active && this.x == x && this.y == y;
        if (isOnIt) {
            if (this.ends) {
                ball.end(this.x, this.y);
            }
            if (this.breaks) {
                $('#roller div').eq(this.indx+1).data('tile', this).animate({opacity: 0}, 1300, this.breakAway);
            }
            return true;
        }
        return false;
    }

此 isOn 函数在球位于图 block 上时执行代码。 this.breaks 是在黄色方 block 上滚动并使其消失的代码部分。以下函数通过将其设置为 false 来删除该图 block :

this.breakAway = function() {
        var tile = $(this).data('tile');
        tile.active = false;
        plane.breaked(tile.x, tile.y);
    };

希望有人能帮帮我!非常感谢

Answer 1

只需调用 jQuery 方法 stop 来停止动画；确保参数 jumpToEnd 为 false，这样动画就会暂停。

要恢复，开始一个全新的动画。对于它的初始状态，您需要知道上一个动画停止的位置。创建一个跟踪动画状态的回调函数。创建动画时(jQuery 方法animate)，您可以指定一个回调函数step。它的参数now是当前的动画状态；让回调函数将该值复制到一个全局变量中，这样您手头总是有最新的值。

HTH.

• > http://api.jquery.com/animate/
• > http://api.jquery.com/stop/

编辑:我 fork 了你的 fiddle 来演示停止/开始技巧: http://jsfiddle.net/283Kz/2/

对原始代码的更改极少。

首先，我给tile添加了一个方法isOff；它所做的只是停止动画。

this.isOff = function (x, y) {
    if (this.active && this.x == x && this.y == y) {
        $('#roller div').eq(this.indx+1).data('tile', this).stop();
    }
};

该方法由平面的方法 move 调用，来自调用 isOn 的同一循环。这需要稍作重构。

if (oldTileX != tileX || oldTileY != tileY) {
    var newIndex;
    for (var i=0, lng = tiles.length; i<lng; i++) {
        tiles[i].isOff(oldTileX, oldTileY);
        if (tiles[i].isOn(tileX, tileY)) {
            onAny = true;
            newIndex = i;
            // no break to ensure isOff gets called too
            // (consequently, we need a separate variable newIndex)
        }
    }
    if (onAny === false) {
        ball.die();
        return;
    }
    tiles[newIndex].modify();
    oldTileX = tileX;
    oldTileY = tileY;
}

在 tile 的方法 isOn 中，我通过计算 1300 * obj.css('opacity') 替换了固定持续时间 1300 作为补偿已经部分消耗了图 block 的可能的早期动画。

if (this.breaks) {
    var obj = $('#roller div').eq(this.indx+1).data('tile', this);
    obj.animate({opacity: 0}, 1300 * obj.css('opacity'), this.breakAway);
}

请注意，我根本不需要回调函数，因为我可以使用 CSS 属性 opacity 而不是自定义变量。