javascript - 本机javascript中的动画

Question

如何在不使用 jQuery 库的 animate 方法的情况下在本机 javascript 中运行动画（如更改 CSS 属性）？我已经尝试过 jQuery 库 animate 和帧率间隔更改以使我的动画流畅。提前致谢

Answer 1

CSS3 可以自动对大多数样式属性的更改进行动画处理，使用transition. 它可能会比任何基于 javascript 的动画运行得更流畅。

有一个关于如何使用它的很好的教程，在这里。

Answer 2

这是一个例子：

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);

Answer 3

这是一个简短的演示：

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/