Tweens Engine Tutorial

Reference to the script:

 
<script type="text/javascript" src="library/tweens.js"></script> 
 

Example 1 - init and target

A basic 400px left to right "inOut" animation:

 
function tween1 (id) { 
	tweens.add(id, { 
		init: { 
			top: 0, 
			left: 0 
		}, 
		ease: tweens.inOut, // inOut by default if not specified 
		duration: 1000, 
		target: { 
			left: 400 
		} 
	}); 
} 
 
<div class="container"> 
	<button onclick='tween1("test1")'>Animate!</button><br /> 
	<img id="test1" src="images/r70.gif" alt=""/> 
</div> 
 

Note: first "id" parameter can be:

 
	// 1: an [HTMLElement] object 
	id = document.getElementById("whateverID"); 
	// 2: a string 
	id = "whateverID"; 
	// 3: an array of id's : same animation will apply to all elements 
	id = ["myID1", "myID2", "myID3"]; 
 

Example 2

multiple css properties + chained animation:

 
function tween2 (id) { 
	tweens.kill(id); 
	tweens.add(id, { 
		init: { 
			top: 0, 
			left: 0, 
			width: 106, 
			height: 69 
		}, 
		duration: 1000, 
		target: { 
			left: 300, 
			top: -40, 
			width: 212, 
			height: 138 
		}, 
		onFinish: function() { 
			tweens.add(id, { 
				duration: 1000, 
				target: { 
					top: 0, 
					left: 0, 
					width: 106, 
					height: 69 
				}, 
				onFinish: tween2, // function to be called once motion is complete 
				params: [id] // function parameters 
			}); 
		} 
	}); 
} 
 
<div class="container"> 
	<button onclick='if(!tweens.running)tween2("test2")'>Animate!</button> 
 
	<button onclick='tweens.kill("test2")'>Stop</button><br /> 
	<img id="test2" src="images/r70.gif" alt=""/> 
</div> 
 

tweens.running = true / false
tweens.kill(id) to stop and kill running tweens of a given HTML element
tweens.reset() to stop the whole engine

Example 3 - onTween: function

Advanced use for complex animations:

 
function test3 (id) { 
	tweens.add(id, { 
		cssMode: false, // animation will be handled by an external function 
		onTween : function () { 
			// custom function, can be as simple or as complex as needed 
			this.style.background = "RGB("+this.r+","+this.g+",0)"; 
		}, 
		duration: 3000, 
		init : { r: 0, g: 0 }, 
		target: { r: 255, g: 128 } 
	}); 
} 
 

tweens engine source code

///////////////////////////////////// 
// ==== Tweens mini-engine v1.0 ==== 
// Gerard Ferrandez 
// http://www.dhteumeuleu.com 
// last update: Oct 20, 2009 
// Licensed under CC-BY-NC 
///////////////////////////////////// 
 
var tweens = { 
	tweens: [], 
	nbTweens: 0, 
	add : function (obj, params) { 
		var self = this, 
		    objList = [], 
		    objReturn = []; 
		var anim = function () { 
			var i = -1, o; 
			while( o = self.tweens[++i] ) { 
				var cTime = (new Date() * 1) - o.start; 
				if (cTime < o.timeframe) { 
					for (var k in o.val) { 
						var m = o.val[k]; 
						o.obj[k] = Math.round(o.ease(m.from, m.to, cTime / o.timeframe)) + (o.cssMode ? 'px' : 0); 
					} 
				} else { 
					for (var k in o.val) { 
						var m = o.val[k]; 
						o.obj[k] = o.cssValue ? (Math.round(m.from + m.to) + 'px') : (m.from + m.to); 
					} 
					self.tweens.splice(i, 1); 
					self.nbTweens--; 
					if (o.onFinish) o.onFinish (o.params); 
					self.stop(); 
				} 
            	if (!o.cssMode) o.obj.onTween(); 
			} 
		}; 
		if (typeof obj == "string" || !obj.length) objList.push(obj); else objList = obj; 
		for (var il = 0, l = objList.length; il < l; il++) { 
			var obj = document.getElementById(objList[il]) || objList[il]; 
			var o = {}; 
			o.val = {}; 
			o.cssMode = true; 
			o.o = obj; 
			o.obj = obj.style; 
			for (var k in params) { 
				var p = params[k]; 
				if (k === "cssMode") { 
					if (p === false) { 
						o.cssMode = false; 
						o.obj = obj; 
					} 
				} else if (k === "onTween") { 
					o.obj.onTween = p; 
				} else if (k === "init") { 
					for (var i in p) o.obj[i] = o.cssMode ? (Math.round(p[i]) + 'px') : p[i]; 
				} else if (k === "target") { 
					for (var i in p) { 
						var from = o.cssMode ? (parseInt(o.obj[i]) || 0) : (o.obj[i] || 0); 
						o.val[i] = { 
							from: from, 
							to: p[i] - from 
						}; 
					} 
				} else o[k] = params[k]; 
			} 
			if (!o.ease) o.ease = this.inOut; 
        	if (!o.cssMode && params['init']) o.obj.onTween(); 
			if (o.duration) { 
				o.start = new Date() * 1; 
				o.end = o.start + o.duration; 
				o.timeframe = o.end - o.start; 
				this.tweens.push(o); 
				this.nbTweens++; 
				if (!this.running) this.running = window.setInterval(anim, 16); 
			} 
			objReturn.push(o); 
		} 
		return objReturn.length === 1 ? o : objReturn; 
	}, 
	stop : function () { 
		if (!this.nbTweens) { 
			window.clearInterval(this.running); 
			this.running = false; 
		} 
	}, 
	kill : function (obj) { 
		if (obj) { 
			for (var i = 0; i < this.nbTweens; i++) { 
				if (this.tweens[i] === obj || this.tweens[i].o === obj || this.tweens[i].o === document.getElementById(obj)) { 
					this.nbTweens--; 
					this.tweens.splice(i, 1); 
					this.stop(); 
				} 
			} 
		} 
	}, 
	reset : function () { 
		this.nbTweens = 0; 
		this.stop(); 
		while( this.tweens.length ) { 
			this.tweens.pop(); 
		} 
	}, 
	linear : function (f, t, d) { return t * d  + f; }, 
	inOut : function (f, t, d) { return -t * .5 * (Math.cos(Math.PI * d) - 1) + f; } 
}