Question

我在iPad上遇到Safari的奇怪情况。我有一个基于spritesheet的动画序列，你可以用“乒乓”方式播放：你点击一次，它向前播放直到它的最后一帧，你点击回来，它再次向后播放，直到它到达第1帧。

我使用的JS看起来像：

$('.pingpong').each(function(){

    var step = parseInt($(this).width(), 10);
    var frames = parseInt($(this).data('frames'), 10);
    var img = $(this).find('img');
    var running = false;
    $(this).data('playForward', true);

    $(this).bind(interaction, function(){ //interaction is tap on mobiles and click on desktops

        if (!running){

            running = true;
            var lastExecution = new Date().getTime();
            var counter = 1;

            function pingpong(){

                var now = new Date().getTime();

                if (now - lastExecution >= (1000 / config.fps)){ //animation is supposed to run at 12fps

                    img.css('margin-left', $(this).data('playForward') ? '+=' + step + 'px' : '-=' + step + 'px');
                    counter++;
                    lastExecution = new Date().getTime();

                }

                if (counter != frames){

                    requestAnimationFrame(pingpong);

                } else {

                    $(this).data('playForward', !($(this).data('playForward'))); //this change of direction is triggered on iOS as well strangely enough
                    running = false;

                }

            }

            pingpong();

        }

    });

});

这在所有桌面浏览器中运行得非常好，但iPad上的Safari不会停止请求动画帧，动画将“溢出”，直到图像很久（通过其边距），但是当我记录数字或requestAnimationFrame来电（我正在使用Paul Irish shim btw - 但如果我使用webkitRequestAnimationFrame它没有任何区别）我可以看到递归pingpong来电永远不会停止在iOS上（在桌面上）他们是这样）。此外，尝试cancelAnimationFrame id我的通话也没有任何区别。

我对requestAnimationFrame的理解是否有缺陷，或者我在这里遗漏了哪些不同之处？ iPad上的new Date().getTime()行为有什么不同吗？我目前正在使用基于setInterval的解决方案，但我真的完全被这种行为所嘲笑，所以我觉得有人可能现在我错了吗？

Answer 1

尝试以下方法：

$('.pingpong').each(function(){

var step = parseInt($(this).width(), 10);
var frames = parseInt($(this).data('frames'), 10);
var img = $(this).find('img');
var running = false;
$(this).data('playForward', true);

$(this).bind(interaction, function(){ //interaction is tap on mobiles and click on desktops

    if (!running){

        running = true;
        var lastExecution = new Date().getTime();
        var counter = 1;

        function pingpong(){

            var now = new Date().getTime();

            if (now - lastExecution >= (1000 / config.fps)){ //animation is supposed to run at 12fps

                img.css('margin-left', $(this).data('playForward') ? '+=' + step + 'px' : '-=' + step + 'px');
                counter++;
                lastExecution = new Date().getTime();

            }

            if (counter < frames){
                requestAnimationFrame(pingpong);
            } else {
                $(this).data('playForward', !($(this).data('playForward'))); //this change of direction is triggered on iOS as well strangely enough
                running = false;
            }

        }

        pingpong();

    }

});

}）;

iPad上的Safari不会停止请求动画帧

1 个答案: