0

iPad の Safari で奇妙な状況に遭遇しています。「ピンポン」方式で再生できるスプライトシート ベースのアニメーション シーケンスがあります。1 回クリックすると、最後のフレームまで順方向に再生され、クリックして戻ると、フレーム 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通話をログに記録すると (Iポール・アイリッシュ・シムを使用しています-それでも、使用しても違いはありませんwebkitRequestAnimationFrame）iOSで再帰呼び出しが停止しないことがわかりpingpongます（デスクトップでは停止します）。cancelAnimationFrameまた、id私の呼び出しを試みても違いはありません。

私の理解にrequestAnimationFrame欠陥がありますか、それともここで何か違うものを見逃していますか? new Date().getTime()iPadでの動作に違いはありますか? 私は現在、setIntervalベースのソリューションを使用していますが、この動作に本当に完全に嘲笑されているので、誰かがここで間違っているのではないかと思いましたか?

4

1 に答える 1

0

次のことを試してください。

$('.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();

    }

});

});

于 2012-11-16T10:42:25.823 に答える