Transição de Flip usando CSS3

Novos efeitos em css3 vão sendo adicionados. Por enquanto por causa do translate 3d, somente webkit reproduzem isso (resumindo só funciona em Google Chrome e Safari).

Parece inútil, mas se parar pra pensar. Em sites mobiles ou pra tablets, isso funciona praticamente em 100% dos acessos.

Veja o efeito, com o mínimo de código possível:

Pra quem se interessou, pode fazer download do exemplo aqui.

Como usar requestAnimationFrame ao invés de setInterval

Um grande passo pra evolução do HTML não precisar de plugins como Flash e Silverlight pra renderizar conteúdo e fazer animações ou jogos é a implementação de um controle de frames (além da aceleração por hardware que hoje já está presente em algumas features do CSS3).

Quando se fala em jogos e animações, pensamos em quantidade de frames por segundo, ou seja, quantas vezes por segundo algo vai mexer na tela.

Uma quantidade razoável pro trabalho não ficar “pesado” ou “travado” é cerca de 30 frames por segundo. Enquanto o máximo que o olho humano consegue distinguir é em torno de 60 frames por segundo, ou seja, não adianta fazer uma animação com intervalo de 10 milisegundos, seu olho não vai enxergar isso.

Antes, pra fazermos uma animação, trabalhávamos com o setInterval fixo de X milisegundos, ou então, criavamos e chamavamos uma função que se auto-invocava novamente com setTimeout também com um valor fixo de X milisegundos. O problema é que esse X de milisegundos varia de acordo com cada browser, cada processador e alguma hora acabava ficando ou muito lento, ou muito rápido.

Hoje, é possível trabalhar com o requestAnimationFrame, e ao invés de você gerenciar intervalo para o processamento, o browser faz isso.

Imaginem uma função onde algo, sei lá, um boneco, ande.

Como seria com setTimeout?

funcion mover(){
    var boneco = document.getElementById('boneco');
    boneco.style.left = (parseInt(boneco.style.left.replace('px','')) + 2).toString() + 'px';
}
setInterval(mover,20); // reinvoca a cada 20 miliseg.

Já com requestAnimationFrame seria assim:

funcion mover(){
    var boneco = document.getElementById('boneco');
    boneco.style.left = (parseInt(boneco.style.left.replace('px','')) + 2).toString() + 'px';
    mozRequestAnimationFrame(mover); 
}
mover();

Nesse caso funcionaria só pra Firefox, mas tem uma função já que funciona cross-browser e pra usuários de browsers sem HTML5 tem um work-around com setTimeout:

window.animationFrame = (function(){
	return	window.requestAnimationFrame       || 
		window.webkitRequestAnimationFrame || 
		window.mozRequestAnimationFrame    || 
		window.oRequestAnimationFrame      || 
		window.msRequestAnimationFrame     || 
		function(/* function */ callback, /* DOMElement */ element){
			window.setTimeout(callback, 1000 / 60);
		};
})();

Nesse caso, ficaria assim:

funcion mover(){
    var boneco = document.getElementById('boneco');
    boneco.style.left = (parseInt(boneco.style.left.replace('px','')) + 2).toString() + 'px';
    animationFrame (mover); 
}
mover();

Detalhes

Quando você troca de aba com o requestAnimationFrame, o processamento da animação / jogo / whatever é pausado na hora, e quando você volta, ele retorna.

Já no setInterval, hoje, pra dar uma melhor performance nos browsers, a maioria deles quando você troca de tab, ele automaticamente aumenta qualquer setInterval pra 1000 milisegundos se você ter declarado menos do que isso, e retorna ao valor inicial quando a aba é ativada novamente

Entendendo melhor o console do firebug

O console do firebug é uma poderosa ferramenta que além de mostrar erros de JavaScript, erros 404 e todos os detalhes de uma requisição ajax, é capaz de interagir com o próprio firebug, inspecionando os nodes HTML.

Mas o uso maior do console, é pra debugar javascript mesmo.

Vou listar alguns comandos, funcionam tanto no Firebug pro Firefox, quando no “Developer Tools” do Google Chrome

console.log ou console.debug

Sintaxe: console.log(variaveis);
Serve para: debugar variáveis no javascript ao invés de colocar 300 alerts

Até hoje, nunca descobri a diferença (se é que existe) entre os dois métodos.
Um detalhe que pouca gente sabe, é que é possível passar infinitos argumentos nessa função.

var nome = 'Danilo';
var sobrenome = 'Augusto';
var nome_completo = nome+' '+sobrenome;
console.log(nome_completo);
// Danilo Augusto
console.log('nome:',nome);
// nome: Danilo
console.log('nome:',nome,' e sobrenome: ',sobrenome);
// nome: Danilo e sobrenome: Augusto

console.dir

Sintaxe: console.dir(objeto);
Serve para: debugar um objeto, mostrando todos os childs dele

var posicoes = {
    left:10,
    top:50
}
console.dir(posicoes);
// left	10
// top 50

Ou então:

console.dir(document.getElementById(‘menu’));

retorna tudo sobre o elemento:

copy

Sintaxe: copy(variavel);
Serve para: copiar uma variável para a área de transferência do sistema operacional (funciona como um ctrl+c)

copy(document.getElementById('erro').innerHTML)

$0

Sintaxe: $0
Serve para: retornar o objeto selecionado/inspecionado no próprio firebug.

$0.style.display = 'none';

$$

Sintaxe: $$(expressao)
Serve para: retornar um ou mais objetos através de um seletor.

Funciona como o $ do jQuery. Então, é ideal pra testar em sites que não usam jQuery (sacou? sacou?).

$$('#footer').style.display = 'none';

inspect

Sintaxe: inspect(elemento)
Serve para: inspecionar no próprio firebug um elemento HTML.

Funciona como o $ do jQuery. Então, é ideal pra testar em sites que não usam jQuery (sacou? sacou?).

inspect($$('#footer'));

Acho interessante quem gostou do assunto dar uma olhada num vídeo do Paul Irish em que ele demonstra essas e outras funções do console do firebug.

Introdução ao <canvas> – um objeto girando

Acredito muito em <canvas> por ser uma tecnologia que já está no mercado a bastante tempo e boa parte dos browsers já aceita. O único browser que dá problema, vamos lá, adivinhem…. sim, é o Internet Explorer, nas versões  6, 7 e 8 porém eles tem o objeto deles (do famoso padrão Microsoft “me deu na telha criar isso”), chamado shape, esse objeto não é igual ao canvas, tem menos métodos, mas dá pra criar algo nele.

Mas existem frameworks, como o explorer canvas, que traduzem um código javascript que é feito em canvas, pra shape, ou seja, na teoria o Internet Explorer não é um problema pra desenvolvermos em canvas. Na teoria, já na prática alguns métodos não funcionam, como degradê radial e escrever texto em canvas também dá problemas.

copy of tidbitsMas, ainda assim, graças ao mercado de mobile e tablets que não tem suporte ainda direito a flash, o uso de canvas pra interfaces de navegação ou até mesmo jogos. No site Canvas Demos dá pra ver dezenas de aplicações em canvas que se pode se comparar muito facilmente com sites feitos em flash. Porém são mais acessíveis, muitas vezes até pro IE6.

Vamos programar um pouco:

HTML

Só adicionar no seu html

	<canvas id="canvas" width="300" height="300">
		Seu browser não suporta canvas
	</canvas>

Javascript

// função que move um objeto em circulos calculando x e y
var fx = function(centro_x, raio, incremento){ 
    return (centro_x + raio*Math.cos(incremento/20)) 
}
var fy = function(centro_y, raio, incremento){ 
    return (centro_y + raio*Math.sin(incremento/20)) 
}

// Contexto trata-se do estado objeto canvas
var contexto;

// O incremento é o que faz o objeto girar;
// se você calcular fx() com 0
// e depois calcular fx() com 1, 2, 3... etc
// a funcao retornará uma posição de X em forma de círculo
// e a mesma coisa com fy();
var incremento = 1; 

var Canvas = {
	// iniciando o objeto
	_init:function(){
		// Instanciando o contexto do canvas 
		// numa variavel global
		contexto = document.getElementById('canvas').getContext("2d");
		// aqui eu peço pra funçao que vai posicionar 
		// o canvas ser chamada a cada 30 milisegundos
		return setInterval(Canvas._preencher, 30);
	},
	_preencher:function(){
		// apagando o que tinha no canvas
		// não é possível desenhar um objeto no canvas 
		// e depois mover ele pra isso é necessário 
		// apagar o conteudo do canvas
		// e desenhar tudo novamente 

		contexto.clearRect(0,0,300,300);

		/* CRIANDO UM QUADRADO COM DEGRADÊ */
		// inicia o desenho
		contexto.beginPath();
		// cria um degradê
		var my_gradient = contexto.createLinearGradient(300, 0, 0, 300);
		// adiciona a cor de inicio
		my_gradient.addColorStop(0, '#ff5');
		// adiciona a cor final
		my_gradient.addColorStop(1, "#f60");
		// adiciona o degradê ao estilo do contexto
		contexto.fillStyle = my_gradient;
		// cria um quadrado 300x300 na posicao 0x0
		contexto.fillRect(0, 0, 300, 300);			
		// fecha o desenho
		contexto.closePath();
		
		
		// CALCULANDO X E Y DO OBJETO
		x = fx(150, 100, incremento);
		y = fy(150, 100, incremento);

		// acionando o incremento
		incremento++;		

		// o incremento não precisa ser maior 
		// do que PI * 2 * Numero de vezes 
		// que vc quer pra dar uma volta
		// assim fica mais facil e rapido pro js
		// trabalhar com 0 a 63
		// do que 0 a infinito
		if( incremento == Math.PI * 2 * 20 ) incremento = 0
		
		// CRIANDO O CIRCULO
		// redefinindo o estilo do canvas pra pretro
		contexto.fillStyle = "#000000";
		// inicia um novo desenho
		contexto.beginPath();
		//  criando o circulo
		contexto.arc(x, y, 10, 0, Math.PI * 2, true); 
		// preenchendo a cor dele
		contexto.fill();
		// fecha o desenho
		contexto.closePath();
	}
}	
// iniciando nosso js
window.onload = Canvas._init;

Resultado

E depois disso dá pra brincar, vejam outros exemplos que eu fiz, deu pra usar o explorer canvas, ou seja, é acessível pra todos os browsers, desde ie6 até iphone:

Com sombras

Estilo Vitrine

Quem se interessar, deixei todos os exemplos disponíveis pra download.