Question

我正在尝试制作一个你必须在平台上移动球的游戏。在游戏开始时，球落在平台上然后你可以用箭头键移动它。这是工作，这里没有问题。请参阅my fiddle（点击1开始）。

如您所见，该平台有一个黄色的瓷砖。当你在球上移动球时，动画将开始（球的消失）。如果您将球从蓝色瓷砖上滚下，此动画将不会停止。这就是问题所在。如果球离开黄色平台，我想停止动画，如果你再次打开球，我想继续。所以我需要暂停它并继续它。怎么做？

部分代码：

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函数执行代码。 this.breaks是在黄色瓷砖上滚动并使其消失时的代码部分。以下函数通过使其成为false：

来删除图块

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://jsfiddle.net/283Kz/2/

对原始代码的更改很少。

首先，我添加了一个方法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();
    }
};

该方法由plane的方法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替换了固定的持续时间1300 * obj.css('opacity')，作为对已经部分使用了该块的可能的早期动画的补偿。

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 而不是自定义变量。

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

1 个答案: