Próximo post

Criando campos condicionais no Drupal 7

Leia mais»
x
jun 21 2010

Usando easing para animações com jQuery

Eu já havia mencionado o "Easing" em outro artigo, e me perguntaram estes dias como se usa o plugin para controlar melhor animações, então resolvi escrever um artigo rápidinho para esclarecer e mostrar o poder do easing.

Preparação

Se já não o tiver feito, vá para o site e baixe o plugin. Vamos utilizar uma página bem simples em HTML:

1
2
3
4
56
7
8
9
1011
12
13
14
1516
17
18
19
2021
22
23
24
2526

<html>
<head>
<title></title>
<style type="text/css">
#target {        background-color: red;
        width: 200px;
        height: 200px;
        position: relative;
}</style>
<script src="http://www.google.com/jsapi"></script>
<!-- não é estritamente necessário usar a última versão do jQuery pois
o easing funciona com todas as versões desde o 1.1 -->
<script type="text/javascript">google.load("jquery", "1.4.4");</script><script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
  // nosso código irá aqui
</script>
</head><body>
 
<div id="target"></div>
 
</body></html>

Até aqui sem novidades, agora vamos fazer uma animação simples:

1
2
3
4
56
7
8

jQuery(document).ready(function($){
  $('#target').click(function(){
    $(this).animate(
      { left : 100 },
      1000    );
  });
});

Beleza, quando clicamos no div anima a sua propriedade left até 100 em um intervalo de 1000ms.

E agora, para dar uma variada, vamos usar um pouco de easing!

1
2
3
4
56
7
8
9

jQuery(document).ready(function($){
  $('#target').click(function(){
    $(this).animate(
      { left : 100 },
      1000,      'easeOutElastic' // adicionamos um efeito elastico
    );
  });
});
Legalzinho né?

Bom, é isso ae, como viram não tem segredo!

O terceiro parâmetro (opcional) do método animate() do jQuery permite especificar uma função de easing para as animações.

Além de fornecer maior controle sobre as animações ele também pode ser combinado com vários outros plugins por exemplo o Cycle para criar efeitos customizados bem legais.

O site do plugin possui alguns exemplos mas é meio confuso, recomendo dar uma olhada aqui para ver não só quais os efeitos disponíveis como também exatamente o que faz cada um.

Até mais!

[]s

animação dica easing javascript jquery
Se curtiu este post, por favor tome alguns segundos para compartilhá-lo usando os links do lado esquerdo! Valeu!!!