Animation Utility T{}

Description

This script is a Request Animation Frame(RAF) api wrapper object named T{}.

T{} conveniently provides RAF timing functionality to any and multiple objects. Objects using T{} must include a tick() method and this is the RAF callback that includes the elapsed time data argument. Objects can easily be animated by adding and removing themselves to T{}. T{} is a singleton object and so there should only be one per program.

Understanding and using RAF may be an advanced topic. Besides understanding RAF however, only very basic Web Programming skills are required to take advantage of T{}. Namely, familiarity with simple algorithm coding, the basic JavaScript OOP pattern, and html dom node css property manipulation.

This script works on all modern browsers including IE9 and above.

Usage

Include the T{} singleton object in your JavaScript. Then design animation programming using basic JavaScript OOP techniques naming your animation update function tick. Then to start/stop the animation, just add/remove your object to/from T{} using T.add() and T.rm().

DEMO

In this usage example we will animate a red div forward and back across the width of this page. We markup a div element in the page, give it an id, style it, and then go into JavaScript programming. In the JavaScript programming, we write a tick method. On each tick call we advance our red div. If the end is reached, we reverse our advance value from a positive amount to a negative amount.

html markup

<div id="myAnimatingRedDiv"></div>

css styles

#myAnimatingRedDiv { width: 100px; height: 100px; background: red; }

result so far:

We have a wrapper div of width:600px, and background:black.

Inside the wrapper div we have our 100 X 100px red div.

Our mission is to animate this red div moving back and forth inside it's parent wrapper div. A very simple algorithm is to successively add an amount to it's margin-left css property. And when the end is reached, to successively minus an amount. Finally, when the beginning is reached, the cycle is complete, so we wish to repeat.

So we will advance right by increasing margin-left property from 0->500px.

And we will retreat left by decreasing margin-left property from 500->0px.

adding the JavaScript

// design animating class var ScrollingDiv = function($domNode){ this.node = $domNode; this.position = 0; this.speed = 20; }; ScrollingDiv.prototype.setPosition = function(){ this.node.style.marginLeft = this.position + "px"; }; ScrollingDiv.prototype.tick = function(elapsed){ // RAF gives time elapsed between frames // we do not use it for this simple example this.position += this.speed; if(this.position > 500){ this.position = 500; this.speed *= -1; } else if(this.position < 0){ this.position = 0; this.speed *= -1; } this.setPosition(); }; ScrollingDiv.prototype.start = function(){ T.add(this); }; ScrollingDiv.prototype.stop = function(){ T.rm(this); }; // get handle to dom element var redDiv = document.getElementById("myAnimatingRedDiv"); // instantiate the animate class we designed var scrollingRedDiv = new ScrollingDiv(redDiv); // Start Animating scrollingRedDiv.start();

result:

Final Notes

Timer.js & Timer.min.js download links are a very small file size. T{} is just a few lines. And so to reduce the number of file gets() your web page requires, I would advise to just copy-paste the code in with the rest of your JavaScript.

The minified script was minified using the closure compiler with the Optimization level set to (O)Whitespace only, and all formatting options unchecked.

This page and all it contents are also posted at the following github link: github.com/nadeemelahi/timer.

License

gpl v3

Free for personal or business use.
Source code is included -no obfuscation.
Not for re-sale.