Proper way to animate with JavaScript

Topics related to client-side programming language.
Post questions and answers about JavaScript, Ajax, or jQuery codes and scripts.
Marius
Posts: 106

Proper way to animate with JavaScript

Hi there,
I would like a little advice for a proper way to animate with JavaScript, without using jQuery or other framework, just with pure JavaScript.
For example, i would like to do a basic horizontal moving on a Div. Let's say that the animation interval is 30ms. I would write it that way :

Code: Select all

var elm = document.getElementById('d1');
var x_pos = 0;
var x = 1;
setInterval(function() {
  if(x_pos < 0 || x_pos > 90) x = x * -1;
  x_pos += x;
  elm.style.left = x_pos +'%';
}, 30);
However, it seems to me that this method is not the best, because whenever you have complex animation, you'll have to chain setTimeout() inside setInterval() or inside other setTimeout().
Admin
Hello,
The JavaScript has a function for animating objects, called requestAnimationFrame() that works in modern browsers (IE 10+).
requestAnimationFrame(function_name) only runs the given function once, you need to call it inside the function_name() if you want to make a UI change for the animation.
The function_name(time) can have a parameter, time, which is the timestmp in milliseconds.
Just do a search on google and there should be a ton of resources about requestAnimationFrame().

Here's an example with a bouncing element. Test it and check the comments in code to understand how the requestAnimationFrame works.

Code: Select all

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example requestAnimationFrame</title>
<style type="text/css">
#d1 {
 position: absolute;
 top: 100px;
 left: 1px;
 width: 70px;
 height: 70px;
 background: #33f;
 border-radius: 50%;
}
</style>
</head>
<body>

<div id="d1"></div>

<script>
var elm = document.getElementById('d1');
var x_pos = 0;
var y_pos = 2;
var x_speed = 1;  // higher value increase the speed
var y_speed = 1.4;  // higher value increase the speed

// bouncing elm for 4 seconds ( code from https://coursesweb.net/ )
function bounce(time){
  //calculate difference since last repaint (in milliseconds)
  var diff = time - start_time;

  // if less than 4 seconds
  if(diff < 4000) {
    // set values for x, y position
    if(x_pos < 0 || x_pos > 90) x_speed = x_speed * -1;
    if(y_pos < 0 || y_pos > 25) y_speed = y_speed * -1;
    x_pos += x_speed;
    y_pos += y_speed;

    // set left and top position
    elm.style.left = x_pos +'%';
    elm.style.top = y_pos +'%';

    requestAnimationFrame(bounce);  // call the next frame
  }
}

var start_time = window.performance.now();  // starting timestmp in milliseconds
requestAnimationFrame(bounce);  // call 1st frame
</script>

</body>
</html>

Similar Topics