1

http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animationingから次の RequestAnimationframe 関数を取得しました

私はそれを使用しようとしています。しかし、それを呼び出す方法と使用する方法がわかりません。誰かが私に簡単な例を教えてもらえますか。私はこのhtml5アニメーションのことは初めてなので、理解できます..

どんな助けでも本当に感謝します！機能は以下の..

    (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.cancelRequestAnimationFrame = 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);
        };
}())
4

1 に答える 1

1

そのコードを JS または独自のファイルに貼り付けて、これをレンダリング関数の一番下に配置します。

requestAnimationFrame(yourrenderingfunction);

ライブデモ

// requestAnimationFrame shim
(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.cancelRequestAnimationFrame = 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);
        };
}())



// Sprite unimportant, just for example purpose
function Sprite(){ 
    this.x = 0;
    this.y = 50;
}

Sprite.prototype.draw = function(){
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.fillRect(this.x, this.y, 10, 10);
}


// setup
var canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext("2d");

canvas.width = 200;
canvas.height = 200;

//init the sprite
var sprite = new Sprite();

// draw the sprite and update it using request animation frame.
function update(){
    ctx.clearRect(0,0,200,200);

    sprite.x+=0.5;
    if(sprite.x>200){
        sprite.x = 0;            
    }
    sprite.draw();

    // makes it update everytime
    requestAnimationFrame(update);
}

// initially calls the update function to get it started
update();
于 2012-10-21T05:14:33.373 に答える