LinkedInTwitterFacebook

Using Frame Rate with requestAnimationFrame

Today I will show you one simple tutorial about requestAnimationFrame.
According to mozilla development team ths requestAnimationFrame has made to :
The Window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.
This allow you to controlling the frame rate by limiting the frame rate.
First you need to make a simple HTML5 file with h1 tag and id named frame_count ( you can use any id name -if you want).

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<script>
</script>
<h1 id=”frame_count”></h1>
</body>
</html>
The next step is to customize with CSS into style tab.
I make it with a Arial green font and bold style.
Just add the next source code into style HTML tag.

Now you need to use javascript with requestAnimationFrame.
Let see the source code:

So two functions: first will used the requestAnimationFrame into the windows and draw function will drawing all into browser.
The first function has another function to setTimeout.This creates a function object and executes it immediately bacause I used }());
Most of variable is named to understand how happend.
I also used this document.querySelector.bind to return the first element within the document (using depth-first pre-order traversal of the document’s nodes) and that matches the specified group of selectors.
And the output is this:
requestAnimationFrame_example

Share