Raphäel JS - Desenho e Animação

Biblioteca para desenho e animações com SVG

Publicado em: 22 de Abril de 2013 as 00:12h por Lucas Klassmann em Javascript.

Tags: raphaeljs animacao javascript


O que é Raphäel JS?

Raphäel JS é uma biblioteca para desenho e animação de imagens vetoriais em SVG.

A maioria dos browsers atualmente permitem o uso de conteúdo SVG, na verdade os navegadores mais comuns como Firefox, Chrome, Opera e até mesmo o Internet Explorer nas versões mais atuais, conseguem trabalhar com este tipo de conteúdo.

Você pode encontrar mais informações aqui.

Mas afinal o que é possivel fazer com SVG?

Abaixo temos alguns exemplos do que a biblioteca é capaz de fazer com SVG, esses exemplos foram retirados da própria galeria do Raphael JS, clique no exemplo para visualizar uma demonstração.

Gráfico Analítico

Gráfico em Pizza

Mapa do Mundo

Colocando a mão na massa

Bom, os exemplos acima mostram um pouco do que é possível fazer com o Raphael JS. Eu vou começar neste primeiro post sobre o assunto, com alguns exemplos bem simples, mas bem explicados.

Em um outro momento irei dar exemplos mais complexos.

Como funciona?

Trabalhar com a biblioteca consiste basicamente em criar uma <div> e inicializar para que seja criado dentro desta uma área para desenho(também chamado de canvas), normalmente nomeada como Paper, após criar uma instância de Raphael, você fará chamadas dos seus métodos para desenhar dentro da área.

A imagem abaixo mostra a inicialização de uma área para desenho, esta nada mais é do que uma tag <svg> que é criada, permitindo a biblioteca manipular imagens vetoriais dentro do navegador.

Inicialização Básica

Primeiro devemos baixar a biblioteca do RaphäelJS, sendo a versão usada a 2.1.0, que é a mais recente durante a publicação deste post.

Nota: Não vou ensinar os conceitos básicos de desenvolvimento, crie uma pasta para cada exemplo e lembre de adicionar uma pasta javascript dentro da pasta onde está o seu arquivo HTML.

Agora crie um arquivo chamado circulo.html, e adicione o seguinte código:

<html>
<head>
    <title>RaphaelJS - Circulo</title>
    <script src="javascripts/raphael-min.js" type="text/javascript"></script>
    <script src="javascript/exemplo.js" type="text/javascript"></script>
</head>
<body>
    <div id="area_desenho"></div>
</body>
</html>

Depois crie um arquivo onde iremos adicionar nosso Javascript, chame de exemplo.js e salve na pasta javascript:

// Executa apenas após o carregamento completo da página
window.onload = function() {

    var area_desenho = document.getElementById("area_desenho");

    // Inicializa a área para desenho
    var paper = Raphael(area_desenho, 500, 500);

    // Cria um circulo e retorna o objeto para manipulação
    var circulo = paper.circle(100, 100, 30);

    // Modifica os atributos do ciculo
    // Cor de preenchimento
    circulo.attr("fill", "#00F");

    // Cor da borda
    circulo.attr("stroke", "#000");
};

Se você ler a documentação, notará que este é semelhante ao exemplo básico, mas nós iremos acrescentar mais funcionalidades ao nosso exemplo.

O resultado deverá ser semelhante a esse:

Adicionando Eventos e animação básica

Após a criação do circulo, podemos utilizar o objeto para associar eventos, como por exemplo onmouseover e onmouseout.

Como exemplo de eventos, altere o arquivo exemplo.js para que fique igual ao código abaixo:

// Executa apenas após o carregamento completo da página
window.onload = function() {

    var area_desenho = document.getElementById("area_desenho");

    // Inicializa a área para desenho
    var paper = Raphael(area_desenho, 500, 500);

    // Cria um circulo e retorna o objeto para manipulação
    var circulo = paper.circle(100, 100, 30);

    // Modifica os atributos do circulo
    // Cor de preenchimento
    circulo.attr("fill", "#00F");

    // Cor da borda
    circulo.attr("stroke", "#000");

    // Evento On Mouse Over
    circulo.node.onmouseover = function() {
        // animate(propriedades, tempo, efeito, funcao chamada ao finalizar)
        circulo.animate({fill:"#F00"}, 500, 'ease', function() { 
            console.log('Finalizado o onmouseover');
         });
    };

    // Evento On Mouse Out
    circulo.node.onmouseout = function() {
        // animate(propriedades, tempo, efeito, funcao chamada ao finalizar)
        circulo.animate({fill:"#00F"}, 500, 'ease', function() { 
            console.log('Finalizado o onmouseout');
         });
    };

};
Resultado dos Eventos

Note que os eventos são semelhantes os eventos de qualquer elemento DOM, mas não se engane, porque nem todos eles estão disponíveis, verifique a documentação do RaphaelJS para mais detalhes.

O que podemos observar é que adicionamos métodos aos eventos de OnMouseOver e OnMouseOut, na entrada do mouse no elemento e da saida do mouse, respectivamente. Dentro de cada execução utilizamos o método animate do objeto circulo.

Se você já conhece Javascript, o entendimento dos eventos é fácil e similar.

O mais importante aqui são os efeitos de animação, na verdade a ideia de animação é como em outras tecnologias, basicamente temos:

Estado Inicial => Tempo => Função => Estado Final. WTF?!

Vamos ilustrar:

Não pretendo ensinar sobre a teoria de animação e tudo mais, quero apenas exemplificar como funciona basicamente a animação sendo o foco a biblioteca RaphaelJS.

Na animação existem várias técnicas para criar a ilusão de movimento, no nosso caso a técnica é a exemplificada acima.

Quando utilizamos a função animate, devemos observar que o objetivo é informar o estado final do objeto (observando que ele já está no estado inicial), informar o tempo limite para a animação(500ms, 600ms ou 1s) e a função a qual deverá trabalhar a aceleração nos pontos da animação, esta última informação tem a ver com os efeitos como elasticidade, o efeito bounce e assim por diante. Para mais exemplo tenho uma ótima referência Aqui.

Lembrando que as imagens são vetoriais, e por isso conseguimos informar o formato, cor de preenchimento, borda e outras propriedades, pois a biblioteca consegue manipular em tempo real, ao contrário de uma animação baseada em bitmaps.

Para isso temos esse trecho:

circulo.animate({fill:"#F00"}, 500, 'ease', function() { });

Com o RaphaelJS utilizamos este método do objeto para realizar a animação conforme foi explicado, um último detalhe está por conta do parâmetro que é uma function, aqui deverá ser declarado uma função de callback, a ser chamada no fim da animação.

Finalizando

Bom, o básico da biblioteca está agora em suas mãos, a partir daqui será fácil utilizar a documentação e inventar outros efeitos de animação.

Como o exemplo foi bem básico, mas foi para dar uma introdução no assunto, estou já planejando mostrar como trabalhar com formas mais complexas como os Paths, no próximo post sobre esse assunto será mostrado como fazer um mapa básico e interativo.

Obrigado.

Faça um comentário