Desenvolvimento - Javascript

jQuery Animate: Aprenda a fazer uma animação em jQuery

Aprenda neste tutorial à fazer animações usando o método .animate(). Alterando as propriedades css e um elemento.

por Anderson Weschnhoski


Jquery é uma ótima biblioteca do javascript que possui diversos métodos que ajudam muito a vida de qualquer desenvolvedor.

Um método bem interessante que pode ser muito bem explorado é o .animate(), ele controla controla propriedades do CSS para realizar animações em elementos HTML. Sendo assim seu uso se torna bem simples, e possibilita ao desenvolvedor criar desde pequenos efeitos até grandes animações.

Vou ensinar aqui a criar uma simples animação com duas bolas, simulando uma batendo na outra, assim conseguimos aprender como funciona este método.

Começamos com o código HTML já incluindo a biblioteca jQuery.

Listagem 1: Código HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js" type="text/javascript"></script>
<title>Animate jQuery</title>
</head>

<body>

<div id="box">
    <div id="ball1"></div>
    <div id="ball2"></div>
    <div id="earth"></div>
</div>

</body>
</html>

Vamos precisar de quatro elementos. A #box vai servir para “segurar” os outros três, aí temos a #ball1 e a #ball2 que serão as duas bolas que vamos animar e a div #earth será base, como se fosse o chão.

Listagem 2: Colocando o CSS

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js" type="text/javascript"></script>
<title>Animate jQuery</title>
</head>

<style type="text/css">
#box{
    border:1px solid #512B11;
    height:200px;
    left:10px;
    position:relative;
    top:10px;
    overflow:hidden;
    width:600px;
}

#earth{
    background:#523723;
    border-top:20px solid #090;
    bottom:0;
    height:50px;
    position:absolute;
    width:600px;
}

#ball1, #ball2{
    background:#095fc6;
    border-radius:30px;
    height:50px;
    left:-50px;
    position:absolute;
    top:80px;
    width:50px;
}
#ball2{
    background:#282828;
    left:130px;
}
</style>

<body>

<div id="box">
    <div id="ball1"></div>
    <div id="ball2"></div>
    <div id="earth"></div>
</div>

</body>
</html>

Com a implementação do código CSS a cima conseguimos dar forma às coisas. Colocamos na #ball1 e #ball2 um border-radius para simular uma bola, e um position:absolute para que possamos controlar a posição delas na tela. Na div #earth não tem nada demais, só um background e um border-top para criar um desenho de uma superfície.

Listagem 3: Código jquery

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js" type="text/javascript"></script>
<title>Animate jQuery</title>
</head>
<script>
$(document).ready(function(){
    $("#ball1").animate({
   	 "left": "80px"
    }, 300, null, function(){
   	 $("#ball2").animate({
   		 "left": "200px"
   	 }, 400);
   	 $("#ball1").animate({
   		 "left": "75px"
   	 }, 300);
    });
});
</script>

<style type="text/css">
#box{
    border:1px solid #512B11;
    height:200px;
    left:10px;
    position:relative;
    top:10px;
    overflow:hidden;
    width:600px;
}

#earth{
    background:#523723;
    border-top:20px solid #090;
    bottom:0;
    height:50px;
    position:absolute;
    width:600px;
}

#ball1, #ball2{
    border-radius:30px;
    height:50px;
    position:absolute;
    top:80px;
    width:50px;
}
#ball1{
    background:#095fc6;
    left:-50px;
}
#ball2{
    background:#282828;
    left:130px;
}
</style>

<body>

<div id="box">
    <div id="ball1"></div>
    <div id="ball2"></div>
    <div id="earth"></div>
</div>

</body>
</html>

A animação se resume em duas partes, a segunda inicializa exatamente quando a primeira termina.

Antes de começarmos a ver como as animações foram feitas, vamos entender funciona o método animate.

Listagem 4: Método .animate()

.animate( properties, duration, easing, complete )

Em properties colocamos as propriedades CSS que definiram os movimentos da animação.

Em duration podemos inserir um valor em milisegundos, isso diz quanto tempo ela vai durar.

O easing é forma como as transições serão executadas, não vou me aprofundar aqui, mas existem bibliotecas que inserem outras opções de easing.

No lugar do complete podemos inserir uma função qualquer, que será executada assim que a animação terminar.

Primeiro movemos a div #ball1 para direita, fazemos isso alterando o valor da propriedade left para 50px, dentro do método animate. Como o valor inicial, definido no CSS, era -50px a animação vai realizar um movimento para a direita. Essa animação irá durar 300 milisegundos e não terá nenhum tipo de easing.

Assim que a primeira animação terminar invocamos uma função anónima responsável por comportar as próximas duas animações.

No segundo passo movemos a outra div #ball2 para direita, alterando a propriedade left para 200px. Da mesma forma que no passo anterior, tínhamos também um valor inicial para left, que era 130px, aumentando esse valor o elemento vai se mover para a direita. Logo embaixo fazemos com que a primeira div animada, #ball1, recue um pouco para traz, simulando uma batida, mudando novamente o valor da propriedade left para 75px.

Finalizamos aqui esse tutorial, espero que eu tenha conseguido explicar o funcionamento básico do método.
Anderson Weschnhoski

Anderson Weschnhoski - Trabalho com PHP e MySQL, CSS, javascript, jQuery, manjo um pouco de Ajax, tenho um bom domínio sobre Wordpress e algumas técnicas de SEO. Como disse, também tenho uma pequena experiência de 2 anos com blogs.