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
-
Get id from url in javascript
JavaScript - jQuery - Ajax
First post
Last time you learnt me how to add an id from url to a javascript
but by this script it is not working what do I do wrong ????
<?php...
Last post
Maybe there is some mistake in other part of your script.
Check to see if there is any js error in browser console, F12.
What value it shows in...
-
Problem with value of $_GET from php to javascript
PHP - MySQL
First post
I found a script from: tutorialzine.com/2014/09/cute-file-browser-jquery-ajax-php
what I wanna use for my website.
But I can`t find out how to...
Last post
Thanks Chief for the support `it is working now`
-
Get country code from JavaScript to PHP
PHP - MySQL
First post
Chief I have a problem to get the countrycode into my sql-statement.
Please help me out....
This script is to detect the countrycode...
Last post
The JavaScript code cannot be executed in php.
Javascript is executed in browser, after the php finished to output its data.
Also, Javascript it is...
-
Dot product of two arrays in Javascript
JavaScript - jQuery - Ajax
First post
What's an efficient way of implementing the dotProduct method (to get the Dot product of two arrays) without importing any new Javascript libraries?...
Last post
Here is a method.
Use the map() function to create a new array with multiplied results of each index and the reduce() function to sum the values of...
-
javascript add image to varible
JavaScript - jQuery - Ajax
First post
Hello Coursesweb I do not known mutch about javascipts
& for view hours I gambling to try to get images in this javascript
I try with...
Last post
You had the best support on the internet,
mutch better then stackoverflow.
i learnt alot from you it was really valuable
+ Thanks for all you...