Page 1 of 1
Proper way to animate with JavaScript
Posted: 22 Dec 2014, 08:22
by Marius
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().
Animation using requestAnimationFrame
Posted: 22 Dec 2014, 08:42
by 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>