0

javascriptsetInterval関数を使用してボックス回転アニメーション効果を実現したい、アニメーションを1.5秒保持したい、1.5秒でボックスが360度回転するので、1ミリ秒で増分を計算し、ミリ秒あたりのsetInterval関数を使用します。コード：

var duration= 1500;//The animation duration time
var rotate = 360;//The rotate need to be rotate
var degPerSec = rotate / parseFloat(duration); //the increment per millisecond
var degree = 0;//the begin degree
console.time('rotate');
var timer = setInterval(function () {
    degree = degree + degPerSec;
    $('#test')[0].style.MozTransform = 'rotate(' + degree + 'deg)';
     $('#test')[0].style.WebkitTransform = 'rotate(' + degree + 'deg)';

    if (degree >= rotate) { //if reach 360 degree , clear the interval
        clearInterval(timer);
        console.timeEnd('rotate');// caculate the duration 
    }
    }, 1)
})

アニメーションは正常に実行できましたがconsole.time、全体の継続時間を計算するために使用すると、1.5秒だけでなく、約6秒続くようです！1.5秒ではありません。なぜこれが発生したのですか？この問題を解決するにはどうすればよいですか？

これがデモです

更新:: css3：cuzを使用しない理由回転度はパラメーターとして使用されます。これには、まだ定義されていない、外部のパスフォームが必要です。

4

5 に答える 5

0

domを変更すると、リフローが発生し、リフローによってビュー全体が更新されます（しばらく時間がかかります）。これを回避するには、更新の頻度を減らすか、css3アニメーション/トランジションを使用します。

于 2012-06-20T15:09:15.040 に答える
0

スケジューラのタイムスライスが約10ミリ秒であるため、特定のOS（Windowsなど）では1ミリ秒の間隔は意味がありません。さらに、関数には合計で1ミリ秒以上かかる場合があります。これらの2つはあなたの減速に同意します。

安全のために、関数呼び出し間の実際の遅延を測定できます。

于 2012-06-20T15:09:23.200 に答える
0

このようにしている理由はありますか？transition変換の期間を定義するためだけに使用しないのはなぜですか？

...
-webkit-transform: rotate(360deg);  
-webkit-transition:-webkit-transform 1s ease-in-out;  
...
于 2012-06-20T15:11:02.043 に答える
0

単純なスタイルシートを使用できるのに、なぜこれにJqueryを使用しているのですか？すでにMozillaおよびWebkit固有の分岐コードを使用しています。CSS3でそれを実行し、それで実行することもできます。はるかに高速で（JSではなくネイティブCコードを使用）、はるかに単純です。

#test{
    width:30px;
    height:30px;
    background:red;
    position:absolute;
    left:20px;
    top:20px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

編集：回転の角度に可変パラメーターを使用する必要がある場合でも、これはJSを使用して非常に実行可能です。

var degrees = 360;
var incrementer = 1;
setInterval(function() {
  var deg = "rotate(" + (degrees * incrementer) + "deg)";
  var obj = document.getElementById("test");
  if (typeof(obj.style.transform) !== "undefined") {
    obj.style.transform = deg;
  } else if (typeof(obj.style.MozTransform) !== "undefined") {
    obj.style.MozTransform= deg;
  } else if (typeof(obj.style.WebkitTransform) !== "undefined") {
   obj.style.WebkitTransform = deg;
  }
  incrementer = incrementer + 1;
}, 1500);
于 2012-06-20T15:15:51.650 に答える
0

cssの使用に関する上記のコメントはすべて確かに真実です。また、ミリ秒ごとに多くのコードを実行するのは非常にやり過ぎです。アニメーションを人間の目にスムーズに表示するには、30フレーム/秒しか必要ありません。ここでは、1000フレーム/秒を実行しています。フレームの間隔をもう少し広げて、アニメーションを約33ミリ秒ごとに実行すると、アニメーションはより速く進み、はるかにスムーズに表示されます。

最後に、最適なフレームレートを決定し、 requestAnimationFrameと呼ばれるブラウザに組み込まれている実行ループを実行するためのツールがあります。これをコールバックに渡すと、最も効率的なフレームレート（通常は可能であれば60）が決定され、可能な限り最も効率的な方法でアニメーションが実行され、再描画に関連するオーバーヘッドが最小限に抑えられます。

この例では、回転値を置き換えsetIntervalて微調整するのと同じくらい簡単です。requestAnimationFrame

于 2012-06-20T15:23:00.260 に答える