Today I will show you one simple tutorial about requestAnimationFrame.
According to Mozilla development team, this requestAnimationFrame has made to :
The Window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls 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 allows you to control 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 an Arial green font and bold style.
Just add the next source code into the style HTML tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | html, body { width: 50%; height: 50%; } body { background: whiteSmoke; font-family: Arial; } #frame_count { height: 50px; width: 50%; position: absolute; top: 50%; margin-top: -50px; text-align: center; font-weight: bold; color: #00FF00 ;} |
Now you need to use javascript with requestAnimationFrame.
Let see the source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!DOCTYPE html> <html> <head> <style> html, body { width: 50%; height: 50%; } body { background: whiteSmoke; font-family: Arial; } #frame_count { height: 50px; width: 50%; position: absolute; top: 50%; margin-top: -50px; text-align: center; font-weight: bold; color: #00FF00 ; } </style> </head> <body> <script> window.requestAnimationFrame = function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(f_timeout) { window.setTimeout(f_timeout,1e3/60); } }(); var $ = document.querySelector.bind(document); var fps = 60; var now; var then = Date.now(); var interval = 1000/fps; var delta; var counter = 0; var first = then; function draw() { requestAnimationFrame(draw); now = Date.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); var time_el = (then - first)/1000; $('#frame_count').innerHTML = ++counter + 'frames / ' + parseInt(time_el) + 'second = ' + parseInt(counter/time_el) + 'frame per second'; } } draw();</script> <h1 id="frame_count"></h1> </body> </html> |
So two functions: first will use the requestAnimationFrame into the windows and draw function will drawing all into the browser.
The first function has another function to setTimeout.This creates a function object and executes it immediately because I used }());
Most of the variable is named to understand how happened.
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:
