2

jQueryライブラリのanimateメソッドを使用せずにネイティブJavaScriptでアニメーション（CSSプロパティの変更など）を実行するにはどうすればよいですか？jQueryライブラリのアニメーションを試しました。アニメーションを滑らかにするためにフレームレート間隔を変更しました。前もって感謝します

4

3 に答える 3

4

CSS3は、を使用して、ほとんどのスタイルプロパティへの変更を自動的にアニメーション化できますtransition。おそらく、JavaScriptベースのアニメーションで得られるよりもスムーズに実行されます。

それを使用する方法についての素晴らしいチュートリアルがここにあります。

于 2012-11-25T09:36:44.407 に答える
3

次に例を示します。

http://jsfiddle.net/4M3ts/1/

function animate(object, property, start_value, end_value, time) {
  var frame_rate = 0.06; // 60 FPS
  var frame = 0;
  var delta = (end_value - start_value) / time / frame_rate;
  var handle = setInterval(function() {
    frame++;
    var value = start_value + delta * frame;
    object.style[property] = value + "px";
    if (value == end_value) {
      clearInterval(handle);
    }
  }, 1 / frame_rate);
}

animate(document.getElementById("a"), "top", 0, 100, 1000);
于 2012-11-25T09:52:44.107 に答える
0

これが短いデモンストレーションです：

function fade(element, started) {
    if (element.style.opacity > 0){
        console.log(element.style.opacity);
        element.style.opacity -= 0.02;
        setTimeout((function(e){return function(){fade(e);}})(element),10);
    }
}
fade(document.getElementById("myname"));

これがjsfiddleです：http：//jsfiddle.net/s6Kzh/1/

于 2012-11-25T09:40:10.860 に答える