README.md

通常のアニメーションメソッドとしての利用。

animator(Element).animation(1000,{opacity:0,...},'easeInOutQuad',function(){...})

渡せる引数は以下の４つです。

@ css proparty = { proparty : change in value (int) }
@ duration     = number of duration time (msec)
@ callback     = function(){...} 
@ easing       = type of easing (string)

animateObject.timeSheetを利用して、Arrayを使った表形式でのアニメーション指定が可能です。

var animateObject = animator(document.getElementById('id'));
		
animateObject.timeSheet = [
	[1000, {marginTop:150, marginLeft:400} ],
	[1000, {marginTop:  0, marginLeft:500} ],
	[1000, {marginTop:150, marginLeft:  0} ],
	[1000, {marginTop:  0, marginLeft:  0} ],
	[2000, {/*wait*/} ],
	[1000, {marginTop:100, marginLeft:  0} ],
	[1000, {marginTop:200, marginLeft:500} ],
	[1000, {marginTop:  0, marginLeft: 50} ],
	[1000, {marginTop:200, marginLeft:250} ],
	[1000, {marginTop:200, marginLeft:  0} ],
];

animateObject.start();

渡す引数の順は自由な位置に書けます。

var animateObject2 = animator(document.getElementById('id2'));
		
animateObject2.timeSheet = [
	[400, {marginTop:100, marginLeft:500,fontSize: 10}, 'easeInOutSine' ],
	[400, 'easeInOutExpo', {marginTop:  0, marginLeft:500} ],
	[2000, 'easeInOutExpo', {fontSize: 30} ],
	[{marginTop:100, marginLeft:  0}, 400 ],
	[400, {marginTop:  0, marginLeft:  0} ]
];

stop()メソッドは時間指定が可能です。記載がない場合は即座に停止します。

animateObject2.start().stop(12000);

クロスブラウザには対応していません。IE9からの対応になります。

animator.js

/* animator JS
 
 *----------------------------------------------------
 * The MIT License (MIT) Copyright (c) 2014          |
 * copyright : Mistuki Suzuki                        |
 *                                                   |
 *----------------------------------------------------
 
 * how to use "animator()".
 *
 *  	animator(Element).animation(1000,{opacity:0,...},'easeInOutQuad',function(){...})
 *
 *	@ attributes = [array]{ prop : change in value (int) }
 *  	@ duration = number of duration time (msec)
 *  	@ callback = function(){...} 
 *  	@ easing = 'type of easing' (string)
 *
 *
 * how to use "animator.timeSheet"
 *
 *  	You can coding animation's script too easy by to use "animator.timeSheet".
 *	And it is like a animator's time-sheet.
 *
			var animateObject = animator(document.getElementById('id'));
						
			animateObject.timeSheet = [
				[1000, {marginTop:150, marginLeft:500} ],
				[1000, {marginTop:  0, marginLeft:500} ],
				[1000, {marginTop:150, marginLeft:  0} ],
				[1000, {marginTop:  0, marginLeft:  0} ]
			];
			
			@loop-flag : true or false.(defult : true)
			animateObject.loopFlag = true;
			
			animateObject.start();
			
*/	
var animator = function (Element) {
	return new animator.prototype.init(Element);
};
 
animator.prototype = {
	'init': function init(Element) {
		var self = this, i = 0,
			length = Element.length;
 
		if (length) {
			for (; i < length; i++) {
				self[i].Element[i]
			}
			self.length = i;
		}
		else {
			self[0] = Element;
			self.length = 1;
		}
		self.name = 'animation object';
		return self;
	},
	queIndex: 0,
	loopFlag: true,
	'start': function () {
		var self = this,
			arg = self.timeSheet[self.queIndex++];
 
		if (arg != undefined) {
			self.animation(function (e) {
				e.start()
			}, arg[0], arg[1], arg[2]);
		}
		else if (self.loopFlag) {
			self.queIndex = 0;
			self.start();
		}
		else {
			self.queIndex = 0;
		}
		return self;
	},
	'stop': function (time) {
		var _this = this,
		time = time ? time : 0;
		setTimeout(function(){
			clearTimeout(_this.loop)
		}, time);
	},
	'getDefaultProp' : function(attributes,_this,style){
		var self = this;
		for (key in attributes) {
			self.on_value[key] = attributes[key];
 
			if (style[key]) {
				self.default_status[key] = style[key];
			}
			else if ( document.defaultView ) {
				self.default_status[key] = document.defaultView.getComputedStyle(_this, null)[key];
			}
			else {
				self.default_status[key] = _this.currentStyle[key];
				switch (self.default_status[key]){
					case 'auto' : self.default_status[key] = '0px';break;
					case 'medium' : self.default_status[key] = '0px';break;
					case 'undefined' : self.default_status[key] ='1';
				}
			};
			self.value_ex[key] = self.default_status[key].match(/[a-z]+/g),
			self.default_status[key] = parseInt(self.default_status[key].match(/[0-9]+/g)),
			self.change_in_value[key] = self.on_value[key] - self.default_status[key];
		};
	},
	'implement': function implement(_this, attributes, duration, callback, easing, loop_frag) {
 
		var self = this,
			style = _this.style,
			index = 0,
			time, key;
			
			self.default_status = {},
			self.value_ex = {},
			self.change_in_value = {},
			self.on_value = {}; 
		
		self.getDefaultProp(attributes,_this,style);
		
		(function () {
			time = 20 * index;
			if (time >= duration) {
				clearTimeout(self.loop);
				for (var key in attributes) {
					style[key] = self.on_value[key] + self.value_ex[key];
				};
				if (callback) {
					callback.call(_this, self);
				}
			}
			else {
				for (key in attributes) {
					style[key] = (animator.easing[easing](time,self.default_status[key],self.change_in_value[key],duration)) + self.value_ex[key];
				};
				index++;
				self.loop = setTimeout(arguments.callee, 20);
			}
		})();
	},
	'animation': function animation() {
		var self = this,
			duration = 700,
			easing = 'easeInOutQuad',
			attributes, callback, loop_frag, argument, class_type, length, i;
 
		for (i = 0;
			(argument = arguments[i]) != null; i++) {
			class_type = Object.prototype.toString.call(argument).slice(8, -1);
 
			switch (class_type) {
			case 'String':
				easing = argument;
				break;
			case 'Function':
				callback = argument;
				break;
			case 'Number':
				duration = argument;
				break;
			case 'Boolean':
				loop_frag = argument;
				break;
			case 'Object':
				attributes = argument;
				break;
			case 'Array':
				attributes = argument;
			}
		};
 
		length = self.length;
		for (i = 0; i < length; i++) {
			self.implement(self[i], attributes, duration, callback, easing, loop_frag);
		}
		return this;
	}
};
 
animator.prototype.init.prototype = animator.prototype;
 
animator.easing = {
	easeInOutQuad: function (t, b, c, d) {
		t /= d / 2;
		if (t < 1)
			return c / 2 * t * t + b;
		t--;
		return -c / 2 * (t * (t - 2) - 1) + b
	},
	easeInOutCubic: function (t, b, c, d) {
		t /= d / 2;
		if (t < 1)
			return c / 2 * t * t * t + b;
		t -= 2;
		return c / 2 * (t * t * t + 2) + b
	},
	easeInOutQuart: function (t, b, c, d) {
		t /= d / 2;
		if (t < 1)
			return c / 2 * t * t * t * t + b;
		t -= 2;
		return -c / 2 * (t * t * t * t - 2) + b
	},
	easeInOutSine: function (t, b, c, d) {
		return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
	},
	easeInOutExpo: function (t, b, c, d) {
		t /= d / 2;
		if (t < 1)
			return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
		t--;
		return c / 2 * (-Math.pow(2, -10 * t) + 2) + b
	}
};