3

私はdivの幅を増やす単純な機能を持っていますが、スムーズにそれを行っていません。

Chromeでこれを行うためにリクエストアニメーションフレームを使用しています..数値を丸めないことにしたので、小数点以下の幅の増分を取得できました..しかし、まったく滑らかにすることはできません。私の方法。

これは私の機能です：

function test(data){


var start = parseInt(data.start);
var length = parseInt(data.length); //total length in minutes to complete
var dif = (new Date().getTime() / 1000) - start; //start holds seconds since epoch
var minutes = dif / 60; //convert seconds past into minutes past
var percentage = (minutes/length) * 100;

if(percentage > 100){ percentage = 100; }

    if( percentage != 100 ){
        document.getElementById('r').style.width = percentage+'%';
        document.getElementById('rt').innerHTML = Math.round(percentage)+'%';
    } else if (percentage == 100 ){
        document.getElementById('r').style.width = percentage+'%';
        document.getElementById('rt').innerHTML = 'COMPLETED';
    }
}

私の関数は次のように呼び出されます：

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

function Update(){
    requestAnimFrame( Update ); 
    test();
}

JSFIddle: http://jsfiddle.net/RmXr9/7/

div幅の増分の滑らかさを改善する方法について何か提案はありますか?

4

2 に答える 2

10

cssトランジションを使用してみてください。アニメーションはずっとスムーズになりますが、コードの構造を少し変える必要があります。css遷移プロパティの例は次のとおりです。

transition:300ms linear;

次に、変更するプロパティ（幅など）が何であれ、それに向かって300ミリ秒の滑らかな線形遷移が行われます。

したがって、スムーズな幅の変更を行うのは、トランジションを設定してからjavascriptで次のようなことを行うのと同じくらい簡単です。

div.style.width="400px";

これが私がモックアップした簡単な例です：

http://jsfiddle.net/nTMsC/1/

これがあなたが始めるための素晴らしいチュートリアルです： http ：//www.css3.info/preview/css3-transitions/

于 2013-01-17T06:52:47.690 に答える
2

私にとって「ジャダリー」なアニメーションの最大の原因の 1 つは、常にフレーム レートです。フレーム レートが遅すぎると、明らかにアニメーションが「ジャダー」します。しかし、ブラウザが処理するには速すぎる場合、ブラウザは混乱し、別の種類の「混乱」が発生します。

13 ～ 30 ミリ秒のフレーム レートをお勧めします。JQuery は 13 ミリ秒を使用することになっていますが、それでもまだ速すぎる場合があることがわかりました。私は通常、16ms から始めて、そこから実験します。

重要なのは、1 つのフレームが前のフレームの終了時または終了後に開始されるように、タイミングを確実にとることです。これは、処理するコードによって異なります。現在のフレームの処理を開始する前に次のフレームを呼び出すことに気付きました。そのため、まだバックアップされている可能性があります。おそらく試してみてください：

function Update(){
    test();
    requestAnimFrame( Update ); 
}

フォールバック関数のフレーム レートは200 / 100、2 ミリ秒です。お使いのブラウザーが 2 ミリ秒でアニメーションを完了できる可能性は非常に低いため、バックアップされる可能性があります。requestAnimationFrame16ms の最大フレーム レートを使用します。

更新：

jsfiddle によると、あなたが抱えている問題は、パーセンテージを頻繁に計算しているときに、パーセンテージの変更が非常に小さく、div の幅の変更に変換されないことです。このhttp://jsfiddle.net/RmXr9/13/は、パーセンテージの変化を示し、実際の幅の対応する変化を示します。したがって、計算を頻繁に (おそらく 1 秒間に 60 回) 行っても、実際の視覚的な変化は 16 フレームごとに 1 回程度しか発生しません。そのため、実際のフレーム レートは 1 秒あたり約 4 フレームにすぎず、「ジャダー」アニメーションになります。残念ながら、唯一のオプションは、アニメーションの実行を高速化する (おそらくlength変数を減らすことによって) か、div をもっと長くする (またはその両方) ことです。

余談ですが、最後にアニメーションを停止する方法がないことに気付きました。それを jsfiddle にも追加しました。

于 2013-01-17T06:42:47.167 に答える