2

だから、私はアニメーションをやっています（ウェブサイト/ウェブページではありません！）Javascript. アニメーションについては、必要なものに対して十分に機能しなかったため、requestAnimationFrame代わりにを使用します。setIntervalsetInterval

ただし、requestAnimationFrame十分な電力のデバイスでは問題なく動作しますが、低速のデバイスは標準の 60 FPS に追いつくことができないため、アニメーション全体の時間が遅くなります。

一定の時間枠でアニメーションを動作させ、それがどれだけ追いつくかによって FPS を変化させる方法はありますか? 他のアイデアも大歓迎です。

（注：コードを投稿したくないので、これについて私の言葉を聞いてください。アイデアが欲しいだけです）

4

1 に答える 1

7

このデモをご覧ください：http：//jsfiddle.net/q7ckebmh/

function Animate(id, useTime){
    var can = document.getElementById(id),
        ctx = can.getContext('2d'),
        wid = can.width,
        hei = can.height,
        lst = Date.now(),
        rps = 2*Math.PI,
        step = rps/60,                       // Expecting 60fps
        ang = 0;

    (function draw(){
        var dif = Date.now() - lst;          // Milliseconds since last we drew. 
        lst = Date.now();                    
        if (useTime) step = rps * dif/1000;  // Allows for variable fps

        ang += step;                         // Increment our placeholder. In the 
                                             // case where step is constant, this
                                             // ends up looking "slow" when we 
                                             // have less than 60fps. 

        ctx.clearRect(0,0,wid,hei);
        ctx.beginPath();
        ctx.arc(wid/2 + Math.cos(ang)*50,hei/2 + Math.sin(ang)*50, 
            10,0,2*Math.PI);
        ctx.fill();

        requestAnimationFrame(draw);
    })();
}

Animate('can1', false);
Animate('can2', true);

フレームのサイズを変更すると、アニメーションフレームがスキップされるため、最初のアニメーションの速度が低下することがわかります。

2番目のアニメーションは、最後に呼び出されてからの時間に基づいて円の位置が決まるため、速度が低下するようには見えません。少し途切れ途切れに見えますが、位置は常に正しいです。

于 2013-01-24T18:37:44.237 に答える