animation in native javascript - Stack Overflow

admin管理员组

文章数量:1335895

How do i run an animation(like changing CSS properties) in native javascript without using jQuery library's animate method?? I have tried jQuery library animate and the framerate interval changes to make my animation fluid. Thanks in advance

How do i run an animation(like changing CSS properties) in native javascript without using jQuery library's animate method?? I have tried jQuery library animate and the framerate interval changes to make my animation fluid. Thanks in advance

• javascript

Share Improve this question Follow asked Nov 25, 2012 at 9:32 Chandan GorapalliChandan Gorapalli 34344 silver badges88 bronze badges 2

• jQuery is open source, why not look at their technique? – armen.shimoon Commented Nov 25, 2012 at 9:34
• 1 Why not use CSS3 transitions? It's faster. – beatgammit Commented Nov 25, 2012 at 9:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Here is an example:

http://jsfiddle/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);

CSS3 can automatically animate changes to most style properties, using transition. It will probably run smoother than you can get with any javascript-based animation.

There's a nice tutorial on how to use it, here.

Here is a short demonstration:

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

Here is a jsfiddle: http://jsfiddle/s6Kzh/1/

本文标签： animation in native javascriptStack Overflow