0

私はこの考えを頭の中に持っていますが、それがどのように行われるのか、あるいはそれが可能であるのかどうか疑問に思っています。

次のようなリクエストアニメーションフレームがあります。

  window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback,  element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

私がやりたいのは、関数を呼び出してアニメーションが終了したときです...なんらかの方法で呼び出しを停止したいです。

したがって、これは私の考えに対する疑似ロジックになります。

do{
var result = requestAnimFrame( my_function.bind(null,start) );
}while(result == true);
//rest of code should not run until animation is finished

これは可能ですか？もしそうなら、リターンをサポートするために関数をどのように変更しますか？

編集これは私のアニメーション機能です...

function my_function(start){

var now = new Date().getTime() / 1000;
var into_anim = now - start;

    amount = 0.5000;
    opacity = amount * (into_anim - 10);
    opacity = parseFloat(opacity.toFixed(5))
    if(opacity > 1){ opacity = 1; }

if(opacity != 1){
    requestAnimFrame(my_function.bind(null,start));
  }
}
4

3 に答える 3

3

いいえ、requestAnimationFrameのように非同期setTimeoutです。したがって、条件が満たされたときに別の呼び出しを行わないmy_functionことで終了することで、「再帰的に」呼び出す必要があります。

アニメーションの後に何かを実行したい場合は、条件が満たされると呼び出されるコールバックを使用します。関数はすぐに返されることに注意してください。関数は、将来いつか実行される関数（それ自体とコールバック）の時間を計るだけです。

function my_function(callback) {
    var start = Date.now();
    frame(); // begin first frame
    function frame() {
        var into_anim = Date.now() - start;
        var opacity = 0.5 * (into_anim - 10);

        if(opacity > 1) {
            opacity = 1;
            callback(); // this was the last frame, do the next thing
        } else
            requestAnimFrame(frame);
     }
}

あれを呼べ：

my_function(function(){ alert("It's done"); });
alert("It just began");
于 2012-05-31T20:44:07.837 に答える
0

私があなたの質問を正しく理解しているなら、あなたはいくつかの条件が満たされた後にアニメーションを止めたいと思います。これを行うためのベストプラクティスは、条件付きステートメントを使用することです。条件が満たされている場合は、を呼び出します。それ以外の場合は、使用しているブラウザのバージョンに応じて、またはrequestAnimationFrameを呼び出して再描画フローを停止します。さまざまなポリフィルに対して、次のフォールバックソリューションを使用できます。 cancelRequestAnimationFramecancelAnimationFrame

window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                               || window[vendors[x]+'CancelRequestAnimationFrame'];

requestAnimationFrameの基本的な前提は、ブラウザに特定の一定のフレームレートでブラウザを更新させるのではなく、更新速度を管理するためにブラウザの機能に依存しているため、直接フックを取得することです。ブラウザの更新/再描画とその更新で、requestAnimationFrameを使用して特定の処理を実行するようにブラウザに指示できます。

しかし、元のアイデアに戻ると、次のように目的のタスクを実行できます。 

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                               || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
           lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
    };
}());

var updating = true,
    animationRequest = null;

animationRequest = requestAnimationFrame(function(func) {
    if (updating) {

        // THE DRAWING FUNCTION. WE SKIP THIS SECTION

        animationRequest = requestAnimationFrame(func);
    }
    else {
        updating = false;
        animationRequest = requestAnimationFrame(func);
    }
}));

この助けを願っています！

于 2012-06-07T12:12:24.020 に答える
0

ええと、requestAnimationFramesはcancelAnimationFrame（ID）またはそれぞれに相当するブラウザを呼び出すことによってアニメーションを停止するために使用できるIDを返します。

あなたがしたいと思うかもしれないことはあなたのコールバック関数からアクセスできる変数を設定することです。または、callback関数で何かを定義して、cancelAnimationFrame（）;を実行します。

多分次のようなものです：

編集：

requestAnimationFrameを誤解しました。実際には、新しいフレームの準備ができるたびに呼び出す必要があります。したがって、呼び出さないだけでは、アニメーションを続行できなくなります。以下の更新された例：

requestAnimFrame(animCallback);

var postAnimCallback = function(){
     alert('called after animation done');
}    

function animCallback(){
    if(typeof animCallback.count == 'undefined'){
        animCallback.count=0;
    }
    animCallback.count++;
    if(animCallback.count < 300){// or whatever condition you want to check to be sure you are ready for it to animate again.
        requestAnimFrame();
    } else { //since we aren't calling animateframe again, run callback code
        alert('animation done');
        // or run a previously defined animation callback
        postAnimCallback();
    }
}

お役に立てば幸いです。

于 2012-05-31T20:44:54.827 に答える