JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Animation</title>
</head>
<body>
<div id="output"></div>
<input type="button" id="control" value="start"/>
</body>
</html>
JavaScript
// Animation object
// Provides renderer registration, start and stop
var Animation = (function() {
"use strict";
var interval, moz, renderers = [];
// PRIVATE
function __mozFix(val) { /* Mozilla fails to return interger per specification */
if (!val) {
moz = true;
val = Math.ceil(Math.random() * 10000);
}
return val;
}
function __renderAll() {
var r, length;
// execute all renderers
length = renderers.length;
for (r = 0; r < length; ++r) {
renderers[r]();
}
if (interval) {
interval = __mozFix(window.requestAnimationFrame(__renderAll));
console.log(interval);
}
}
function __registerAnimationEventHandlers() {
var pre, prefixes = ['webkit', 'moz', 'o', 'ms'];
// check vendor prefixes
for (pre = prefixes.length - 1; pre >= 0 && !window.requestAnimationFrame; --pre) {
window.requestAnimationFrame = window[prefixes[pre] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[prefixes[pre] + 'CancelAnimationFrame'] || window[prefixes[pre] + 'CancelRequestAnimationFrame'];
}
// downlevel support via setTimeout / clearTimeout
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback) {
// could likely be an adaptive set timeout
return window.setTimeout(callback, 16.7);
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}
__registerAnimationEventHandlers();
// PUBLIC
function add(renderer) {
if (renderer) {
renderers.push(renderer);
}
}
function isRunning() {
return !!interval;
}
function start() {
interval =...