Animações Javascript com jQuery
Bom pessoal hoje vou falar sobre animações em Javascript, mais especifacemente, com jQuery.
Todos nós, algum dia, procuramos saber como funciona e como se faz uma animação em uma página WEB sem precisar do flash, silverlight ou qualquer outra linguagem do tipo.
A cada dia que passa os navegadores vão melhorando seu interpretador javascript para dar mais poder aos programadores web usarem e abusarem da linguagem.
Alguns defendem em se fazer tudo em flash ou silverlight mas eu não gosto de nenhuma dessas linguagens e por isso não me aprofundo no aprendizado deixando tempo para me empenhar em lidar com o jQuery em si. Sou mais um no meio da multidão que apoia a iniciativa do Google do Flashless em minhas aplicações.
Para fazer animações com o javascript puro ficariamos muito tempo lidando apenas com o cross-browser, o que não queremos hoje em dia, então inclui a jQuery em meu dia-a-dia para aumentar a produtividade na manipulação de elementos do DOM, que é a eventual finalidade da bliblioteca.
Vamos parar de enrolação e começar com animações em si.
Não vou entrar em detalhes dos efeitos padrões com show(), slideUp(), hide() entre outros. Vamos focar nas animações em si partindo direto para o:
Método Animate
Sem dúvida alguma o método animate do jQuery é superior ao que se encontra por aí em termos de facilidade e resultado final.
No exemplo abaixo temos uma DIV que altera apenas sua largura e altura de acordo com cliques do no botão Animar Div:
Segue o código do exemplo acima:
jQuery(function(){
jQuery("#animar1").toggle(
function(){
$("#animar").animate({ width:400, height:200 })
},
function(){
$("#animar").animate({ width:200, height:150 })
}
);
});
Resumo das linhas:
- Setamos uma função para o evento onload do navegador especificando uma função como primeiro parâmetro do objeto jQuery.
- Seleciono o botão que contém o id ‘animar1′ e atribuimos e encadeamamos o método toggle que recebe duas funções que serão intercaladas de acordo com o cliques: primeira função chamada quando clicado pela primeira vez; segunda quando clicado novamente; clicado pela terceira vez ele retorna, e chama a primeira função. Mais detalhes acesse toggle.
- Dentro da função que foi definida no primeiro parâmetro nos selecionamos o elemento com id ‘animar’ e é atribuído a ele o método animate com a nova largura e altura do elemento.
- Na segunda função nos fazemos o inverso para o elemento retornar as dimensões anteriores.
Simples assim…
Especificações:
.animate( properties, [ duration ], [ easing ], [ callback ] )
Como podemos ver na explanação acima, o primeiro parâmetro é um objeto contendo as propriedades CSS e seus valores finais para executar animação. Os valores são o estado final da animação. No meu exemplo o elemento parte de 200px de largura para 400px.
Segunda parâmetro é a duração da animação.
Terceiro é uma função de abrandamento. A mais comum é a ‘swing’ que é chamada por padrão se omitido o parâmetro. As funções de abrandamento são como nas animações do Flex. São utilizadas para alterar o comportamento ao longo da animação. De uma olhada na documentação para mais detalhes.
Quarto parametro é uma função callback que será chamada assim que terminar a animação. Ex. quero remover o elemento ao final da animação. Então passo uma função neste parametro, dentro dela executo $(this).remove() e o elemento animado será removido. ( this dentro da função callback referencia o elemento animado)
O método animate é muito simples de ser utilizado e funciona com êxito em navegadores antigos como IE6.
Com jQuery.animate não precisamos nos preocupar com cross-browser ( que é uma das melhores vantagens de se utilizar um framework de desenvolvimento javascript ).
Bom pessoal é isso… fiz uma pequena animação com animate mas ele é capaz de fazer coisas muito complexas, depende de suas necessidades e imaginação.
Com jQuery tudo fica mais simples. Até uma animação, que é muito complexa de se fazer sem framework, fica simples com a utilização do jQuery.animate
Até mais então. Depois volto com animações mais avançadas utilizando plugins de abrandamento.
Recomendo o jquery.easing.js e os exemplos do http://jqueryui.com para aprender mais sobre o abrandamento.
Leituras recomendadas:
