API de efeitos

[Wilker 3]

ae galera, vim aki colabora com minha class pra criar efeitos web facilmente ^^

 

ela ainda esta em versao beta, mas ja da pra usar, foi testada em IE e FireFox, vai o codigo ai primeiro (na verdade sao 2 classes), e depois explicacao e exemplos:

 

// Wilker Efect API// criador: Wilker Lúcio da Silva// versao: 1.0 beta b// site: www.wilkerdeveloper.comvar _efectsCount = 0;var _efectsObjects = [];function Efect(objEle) {	this.obj = objEle;	this.fila = [];	this.iFila = 0;	this.nowEfect = null;	this.initialized = false;	this.firstRun = true;	this.endEval = null;	this.speed = Efect.arguments[1] ? Efect.arguments[1] : 10;	this.stoped = false;	this.repeat = false;	this.finalized = false;	this.timerObj = null;	this.efectSinc = null;	this.numberID = _efectsCount++;	_efectsObjects[this.numberID] = this;		this.obj.efectObj = this;}Efect.prototype.start = function() {	if(this.initialized)		return;		this.initialized = true;		if(this.fila.length > 0) {		this.nowEfect = this.fila[this.iFila];		if(!this.efectSinc)			this.genericEfect();	} else {		this.doEnd();	}}Efect.prototype.stop = function() {	clearTimeout(this.timerObj);	this.stoped = true;}Efect.prototype.genericEfect = function() {	if(this.finalized)		return false;		var finished = eval("this." + this.nowEfect);	this.firstRun = false;		if(this.stoped) {		this.doEnd();		return false;	}		if(finished) {		this.iFila++;				if(this.iFila < this.fila.length) {			this.nowEfect = this.fila[this.iFila];			this.firstRun = true;			this.genericEfect();		} else {			if(!this.repeat) {				this.doEnd();				return false;			} else {				this.iFila = 0;				this.nowEfect = this.fila[this.iFila];				this.firstRun = true;				this.genericEfect();			}		}	} else {		if(this.efectSinc)			return true;		else			this.timerObj = setTimeout("_efectsObjects[" + this.numberID + "].genericEfect()", this.speed);	}}Efect.prototype.doEnd = function() {	_efectsObjects[this.numberID] = null;	this.finalized = true;		if(this.endEval != null)		eval(this.endEval);}Efect.prototype.calcDif = function(init, finish, amount) {	var dif = finish - init;	var dir = dif > 0 ? 1 : -1;	return Math.min(amount, dif * dir) * dir;}Efect.prototype.getAlpha = function() {	if(document.all) {		if(this.obj.filters.alpha) {			return this.obj.filters.alpha.opacity;		} else {			this.obj.style.filter = "alpha(opacity=100)";			return 100;		}	} else {		var initAlpha = this.obj.style.opacity;				if(!initAlpha && initAlpha !== 0) {			this.obj.style.opacity = 1;			initAlpha = 100;		} else {			initAlpha *= 100;		}				return initAlpha	}}Efect.prototype.getColor = function(prop) {	var iColor = eval("this.obj." + prop);		if(iColor.indexOf("rgb") > -1) {		var rgbPos = iColor.indexOf("rgb");		var rgbOpen = iColor.indexOf("(", rgbPos);		var rgbClose = iColor.indexOf(")", rgbOpen);				var rgbContent = iColor.substring(rgbOpen + 1, rgbClose);				rgbContent = rgbContent.split(",");		if(rgbContent.length == 3) {			rgbContent[0] = parseInt(rgbContent[0]);			rgbContent[1] = parseInt(rgbContent[1]);			rgbContent[2] = parseInt(rgbContent[2]);						iColor = hexFromRGB(rgbContent);		} else {			return null;		}	}		return iColor;}Efect.prototype.getX = function() {	if(this.obj.style.left)		return parseFloat(this.obj.style.left);	else		return getXOffset(this.obj);}Efect.prototype.getY = function() {	if(this.obj.style.top)		return parseFloat(this.obj.style.top);	else		return getYOffset(this.obj);}Efect.prototype.getWidth = function() {	if(this.obj.style.width)		return parseFloat(this.obj.style.width);	else {		var initW = this.obj.offsetWidth;		var bl = parseInt(this.obj.style.borderLeftWidth);		var br = parseInt(this.obj.style.borderRightWidth);				if(isFinite(bl))			initW -= bl;				if(isFinite(br))			initW -= br;				return initW;	}}Efect.prototype.getHeight = function() {	if(this.obj.style.height)		return parseFloat(this.obj.style.height);	else {		var initH = this.obj.offsetHeight;		var bt = parseInt(this.obj.style.borderTopWidth);		var bb = parseInt(this.obj.style.borderBottomWidth);				if(isFinite(bt))			initH -= bt;				if(isFinite(bb))			initH -= bb;				return initH;	}}Efect.prototype.doAlpha = function(initAlpha, finishAlpha, amount) {	if(!this.initialized) {		this.fila[this.fila.length] = "doAlpha(" + initAlpha + ", " + finishAlpha + ", " + amount + ")";		return;	}		if(!this.firstRun) {		initAlpha = null;	}		if(initAlpha === null) {		initAlpha = this.getAlpha();	}		var amt = this.calcDif(initAlpha, finishAlpha, amount);		initAlpha += amt;		if(document.all) {		this.obj.style.filter = "alpha(opacity=" + initAlpha + ")"; 	} else {		if(initAlpha == 100)			this.obj.style.MozOpacity = 0.99;		else			this.obj.style.MozOpacity = initAlpha / 100;	}		if(initAlpha != finishAlpha) {		return false;	} else {		return true;	}}Efect.prototype.doColor = function(attr, iColor, fColor, amt) {	if(!this.initialized) {		iColor = iColor == null ? null : "\"" + iColor + "\"";		this.fila[this.fila.length] = "doColor(\"" + attr + "\", " + iColor + ", \"" + fColor + "\", " + amt + ")";		return;	}		if(!this.firstRun) {		iColor = null;	}		if(!iColor) {		iColor = this.getColor(attr);				if(!iColor)			return true;	}		iColor = rgbFromHex(iColor);	fColor = rgbFromHex(fColor);		if(!iColor || !fColor) {		return true;	}		iColor[0] += this.calcDif(iColor[0], fColor[0], amt);	iColor[1] += this.calcDif(iColor[1], fColor[1], amt);	iColor[2] += this.calcDif(iColor[2], fColor[2], amt);		iColor = hexFromRGB(iColor);	fColor = hexFromRGB(fColor);		eval("this.obj." + attr + " = iColor");		if(iColor != fColor) {		return false;	} else {		return true;	}}Efect.prototype.doMove = function(initX, initY, finishX, finishY, amountX, amountY) {	if(!this.initialized) {		this.fila[this.fila.length] = "doMove(" + initX + ", " + initY + ", " + finishX + ", " + finishY + ", " + amountX + ", " + amountY + ")";		return;	}		if(!this.firstRun) {		initX = this.movePosX;		initY = this.movePosY;	}		if(initX == null) {		initX = this.getX();	}		if(initY == null) {		initY = this.getY();	}		if(finishX == null)		finishX = initX;		if(finishY == null)		finishY = initY;		if(initX == finishX && initY == finishY)		return true;		this.obj.style.position = "absolute";		if(amountY == null) {		if(initX == finishX) {			var velX = 0;			var velY = this.calcDif(initY, finishY, amountX);		} else if(initY == finishY) {			var velX = this.calcDif(initX, finishX, amountX);			var velY = 0;		} else {			var distX = finishX - initX;			var distX = distX > 0 ? distX : distX * -1;						var distY = finishY - initY;			var distY = distY > 0 ? distY : distY * -1;						var t = distX + distY;			var pctX = distX / t;			var pctY = distY / t;						var velX = amountX * pctX;			var velY = amountX - velX;						var velX = this.calcDif(initX, finishX, velX);			var velY = this.calcDif(initY, finishY, velY);		}	} else {		var velX = this.calcDif(initX, finishX, amountX);		var velY = this.calcDif(initY, finishY, amountY);	}		initX += velX;	initY += velY;		this.movePosX = initX;	this.movePosY = initY;		this.obj.style.left = initX + "px";	this.obj.style.top = initY + "px";		if(initX != finishX || initY != finishY) {		return false;	} else {		return true;	}}Efect.prototype.doResize = function(initW, initH, finishW, finishH, amountX, amountY) {	if(!this.initialized) {		this.fila[this.fila.length] = "doResize(" + initW + ", " + initH + ", " + finishW + ", " + finishH + ", " + amountX + ", " + amountY + ")";		return;	}		if(!this.firstRun) {		initW = this.resizePosX;		initH = this.resizePosY;	}		if(initW == null) {		initW = this.getWidth();	}		if(initH == null) {		initH = this.getHeight();	}		if(finishW == null)		finishW = initW;		if(finishH == null)		finishH = initH;		if(initW == finishW && initH == finishH)		return true;		if(amountY == null) {		if(initW == finishW) {			var velW = 0;			var velH = this.calcDif(initH, finishH, amountX);		} else if(initH == finishH) {			var velW = this.calcDif(initW, finishW, amountX);			var velH = 0;		} else {			var distW = finishW - initW;			var distW = distW > 0 ? distW : distW * -1;						var distH = finishH - initH;			var distH = distH > 0 ? distH : distH * -1;						var t = distW + distW;			var pctX = distW / t;			var pctY = distW / t;						var velW = amountX * pctX;			var velH = amountX - velW;						var velW = this.calcDif(initW, finishW, velW);			var velH = this.calcDif(initH, finishH, velH);		}	} else {		var velW = this.calcDif(initW, finishW, amountX);		var velH = this.calcDif(initH, finishH, amountY);	}		initW += velW;	initH += velH;		this.resizePosX = initW;	this.resizePosY = initH;		this.obj.style.width = initW + "px";	this.obj.style.height = initH + "px";		if(initW != finishW || initH != finishH) {		return false;	} else {		return true;	}}Efect.prototype.doBlindUp = function(amt) {	if(!this.initialized) {		this.fila[this.fila.length] = "doBlindUp(" + amt + ")";		return;	}		if(!this.objOverflow)		this.objOverflow = this.obj.style.overflow;		this.obj.style.display = 'block';	this.obj.style.overflow = 'hidden';		var r = this.doResize(null, null, null, 0, amt, null);		if(r == true) {		this.obj.style.display = 'none';		this.obj.style.overflow = this.objOverflow;		this.objOverflow = null;	}		return r;}Efect.prototype.doBlindDown = function(size, amt) {	if(!this.initialized) {		this.fila[this.fila.length] = "doBlindDown(" + size + ", " + amt + ")";		return;	}		if(!this.objOverflow)		this.objOverflow = this.obj.style.overflow;		this.obj.style.display = 'block';	this.obj.style.overflow = 'hidden';		var r = this.doResize(null, 0, null, size, amt, null);		if(r == true) {		this.obj.style.overflow = this.objOverflow;		this.objOverflow = null;	}		return r;}//sicronizador de efeitosvar _efectsSincCount = 0;var _efectsSincObjects = [];function EfectSinc() {	this.efects = [];	this.time = 10;		this.numberID = _efectsSincCount++;	_efectsSincObjects[this.numberID] = this;		for(var i = 0; i < EfectSinc.arguments.length; i++) {		this.efects[this.efects.length] = EfectSinc.arguments[i];		EfectSinc.arguments[i].efectSinc = this;	}}EfectSinc.prototype.start = function() {	var cont = false;		for(var i = 0; i < this.efects.length; i++) {		if(!this.efects[i].initialized)			this.efects[i].start();				var f = this.efects[i].genericEfect();				if(f == true)			cont = true;	}		if(cont)		setTimeout("_efectsSincObjects[" + this.numberID + "].start()", this.time);	else		_efectsSincObjects[this.numberID] = null;}

bom, a classe Efect serve para criar os efeitos realmente, a classe EfectSinc serve pra sincronizar efeitos (caso você queira isso)

 

no momento a API dispoes de 4 efeitos basicos e 2 efeitos derivados, os basicos sao:

 

1. Efeitos Basicos

 

- doColor(attr, corInicial, corFinal, amount)

 

esse metodo serve pra alterar em modo fade a cor de algum atributo do objeto, por exemplo, c eu quizer mudar o valor da cor de preto para vermelho, eu o faria assim:

 

var efect = new Efect(obj);

efect.doColor("style.border", "#000000", "#FF0000", 10);

efect.start();

 

no 1 argumento eu coloquei o atributo que deve ser mudado, depois a cor inicial, depois a final, e depois a quantidade que deve ser incrementada em cada sequencia (qto maior o numero, mais rapido)

 

obs: tanto nesse metodo como em qualquer outro da API, o valor INICIAL pode ser passado como null, dessa forma o script ira tentar pegar o valor atual, exemplo:

 

efect.doColor("style.border", null, "#FF0000", 10);

 

 

- doAlpha(alphaInicial, alphaFinal, amount)

 

esse nao tem mto oq falar, ele simplesmente mexe com a transparencia do objeto, indo da cor inicial a cor final

 

 

- doMove(inicioX, inicioY, finalX, finalY, amountX, amountY)

 

esse faz o movimento do objeto, das posicoes iniciais as finais, a velocida de X e Y sao controladas no ultimo argumento, mas obs: para o objeto se mover em linha reta entre um ponto e outro, o argumento amountY deve ser passado como null

 

novamente as posicioes iniciais (inicioX, inicioY) podem ser passados como null para obter a posicao atual, voce tambem pode passar finalX ou finalY como null, para que o objeto mantenha a posicao X ou Y

 

 

- doResize(inicioW, inicioH, finalW, finalH, amountW, amountY)

 

funciona da mesma maneira que o doMove, mas serve para mudar o tamanho do objeto

 

2. Efeitos Derivados

 

- doBlindUp(amount)

 

faz o objeto ir "fechando" para cima, deve ser usado em objetos com display block (como um div)

 

 

- doBlindDown(size, amount)

 

faz o objeto ir "abrindo" para baixo, o objeto vai abrir ateh o tamanho size

 

 

bem galera, basicamente os efeitos sao esses, agora vamos a um uso + extendido da API

 

3. Sequenciando Efeitos

 

digamos que voce quer q o objeto muda a borda para azul, depois va para amarelo, e apos isso o objeto suma (ficando totalmente transparente)

 

bom, fica facil com minha API, o codigo seria:

 

var efect = new Efect(obj);

efect.doColor("style.borderColor", null, "#0000FF", 10);

efect.doColor("style.borderColor", null, "#FFFF00", 10);

efect.doAlpha(null, 0, 6);

efect.start();

 

com isso a class vai montando uma fila de efeitos e vai executando um apos o encerramento do anterior

 

4. Loop de efeitos

 

agora voce quer que um efeito fique continuo, por exemplo, mudando a cor da borda para vermelho, depois preto, depois vermelho d novo, preto, vermelho....

 

vamos ver o codigo de como fazer isso:

 

var efect = new Efect(obj);

efect.doColor("style.borderColor", null, "#FF0000", 10);

efect.doColor("style.borderColor", null, "#000000", 10);

efect.repeat = true;

efect.start();

 

assim ele vai ficar num loop eterno, para parar o loop você tem 2 opcoes:

 

1 - mudando o repeat para false (efect.repeat = false), assim ele vai terminar a sequencia e parar a animacao

2 - usando o metodo efect.stop(), mas tome cuidado, esse metodo vai parar a animacao exatemente do jeito que o objeto esta (por exemplo, a borda poderia estar num tom vermelho escuro e seria parado exatamente nesse momento)

 

 

5. Adicionando evento de finalizacao

 

caso voce queira que algo aconteca apos o encerramento da animacao você simplesmente adiciona isso ao efeito:

 

efect.endEval = "alert('efeito finalizado')";

 

você coloca o codigo dentro de uma string (na variavel endEval da classe) e ele sera executado ao final da animacao

 

 

6. Sincronizando efeitos

 

agora você quer fazer 2 efeitos ao mesmo tempo (e n em sequencia), como mudar a transparencia e a cor de borda ao mesmo tempo, você poderia simplesmente fazer isso:

 

var efect = new Efect(obj);

efect.doColor("style.borderColor", null, "#00FF00", 10);

efect.start();

 

var efect = new Efect(obj);

efect.doAlpha(null, 0, 6);

efect.start();

 

para maquinas rapidas, isso funciona corretamente, e para esse caso, nao eh preciso a sincronizacao pois um efeito nao depende do outro, mas por exemplo, no caso de um menu sanfona, onde você deve abrir um menu e o outro deve fechar no mesmo tempo, nesse caso você precisa que os efeitos ocorram de forma sincronizada, como exemplo eu irei sincronizar o exemplo anterior:

 

var efect = new Efect(obj);

efect.doColor("style.borderColor", null, "#00FF00", 10);

 

var efect2 = new Efect(obj);

efect2.doAlpha(null, 0, 6);

 

var sinc = new EfectSinc(efect, efect2);

sinc.start();

 

pronto, ja vao correr sincronizados (simples nao?)

note que eu nao dei start() nos efeitos, eu dei start() apenas no sincronizador, você pode passar quantos efeitos você quizer para serem sincronizados (eu passei apenas 2, mas a qtd possivel eh indefinida)

 

 

por enquanto isso eh td pessoal ^^

 

qualquer duvida, bug report, ou algo do genero eh soh me perguntar (ou avisar) q eu estarei respondendo / tentando corrigir, o + breve possivel

[Wilker 3]

sim a API eh de minha autoria ^^

 

c quizer um exemplo, eu a usei (usando os efeitos doBlindUp e doBlindDown) para fazer o menu do meu site (que ainda esta em construcao)

 

mas pode ser visto aqui:

 

http://www.uniguararapes.com.br/site/pesso...ilkerdeveloper/

 

 

 

 

 

a sim... lembrei agora, minha API na parte de cores e mudanca de posicao nescessitam de funcoes de apoio (eh q eu coloco elas em um arquivo separado), mas seguem abaixo elas (podem ser colocadas no mesmo JS abaixo das classes):

 

//funcoes para manuseamento de coresfunction dec2hex(dec) {	var hex_chars = "0123456789ABCDEF";		var n1 = hex_chars.charAt(Math.floor(dec / 16));	var n2 = hex_chars.charAt(dec % 16);		return n1 + n2;}function hex2dec(hex) {	var hex_chars = "0123456789ABCDEF";		var n1 = hex.charAt(0);	var n2 = hex.charAt(1);		var n1 = hex_chars.indexOf(n1) * 16;	var n2 = hex_chars.indexOf(n2);		return n1 + n2;}function colorAjust(color) {	if(color.length == 7 || color.length == 4) {		color = color.substring(1, color.length);	}		if(color.length == 3) {		color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);	}		if(color.length != 6) {		alert("Cor invalida: " + color);		return null;	}		return color.toUpperCase();}function rgbFromHex(hex) {	hex = colorAjust(hex);		if(hex) {		var r = hex2dec(hex.substring(0, 2));		var g = hex2dec(hex.substring(2, 4));		var b = hex2dec(hex.substring(4, 6));			return [r, g, b];	} else {		return null;	}}function hexFromRGB(rgb) {	var simbol = hexFromRGB.arguments[1] ? false : true;		var str = dec2hex(rgb[0]) + dec2hex(rgb[1]) + dec2hex(rgb[2]);		if(simbol)		str = "#" + str;		return str;}//funcoes para manuseamento de posicaofunction getXOffset(obj) {	var x = obj.offsetLeft;		while((obj = obj.offsetParent) != null) {		x += obj.offsetLeft;	}		return x;}function getYOffset(obj) {	var y = obj.offsetTop;		while((obj = obj.offsetParent) != null) {		y += obj.offsetTop;	}		return y;}