0Pricing
jQuery Academy · Aula

Suavização Personalizada e Retornos de Chamada de Animações

Implemente funções personalizadas de suavização para controlar a velocidade e o fluxo das animações e utilize retornos de chamada para executar código precisamente quando as animações terminarem ou avançarem uma etapa.

Suavização Personalizada e Retornos de Chamada de Animações é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

Além da velocidade básica da animação

As animações não se resumem a mover elementos; elas também envolvem a forma como eles se movem. A suavização controla a aceleração e a desaceleração de uma animação, fazendo com que ela pareça mais natural ou dramática.

jQuery oferece duas opções de suavização integradas: 'linear' (velocidade constante) e 'swing' (início lento, meio rápido e fim lento). Mas e se precisar de mais opções?

Explorando a suavização padrão

Vamos ver a diferença entre as opções de suavização padrão do jQuery:

  • 'linear': a animação se move a uma velocidade constante do início ao fim.
  • 'swing': esta é a opção padrão. Ela começa devagar, acelera no meio e desacelera novamente no final.

Ambas são simples, mas muitas vezes você desejará ter mais controle sobre a sensação transmitida pela animação.

Suavização personalizada com jQuery UI

Para obter efeitos de suavização mais sofisticados, geralmente usamos extensões. Uma opção popular é o componente jQuery UI Easing.

Ele amplia o objeto $.easing do jQuery com muitas funções novas, como 'easeOutBounce', 'easeInOutQuad' e outras. Isso fornece uma biblioteca abrangente de curvas de movimento predefinidas.

Para usá-las, normalmente é necessário incluir a biblioteca jQuery UI no projeto.

Demonstração de código: quique com EaseOutBounce

Vamos experimentar uma animação com uma função de suavização personalizada do jQuery UI. Observe como a caixa quica no final, em vez de simplesmente parar de forma abrupta. Esse efeito é obtido usando 'easeOutBounce'.

(Observação: este exemplo pressupõe que o núcleo e os efeitos do jQuery UI estejam incluídos.)

<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1500, 'easeOutBounce'); // Using a jQuery UI easing
      });
    });
  </script>
</body>
</html>

Entendendo as funções de retorno de chamada das animações

As animações são assíncronas, o que significa que seu código continua sendo executado enquanto elas acontecem. E se você precisar fazer algo depois que uma animação terminar?

O método .animate() do jQuery aceita uma função de retorno de chamada. A mais comum é a chamada de retorno complete.

  • A chamada de retorno complete é executada quando a animação do(s) elemento(s) selecionado(s) termina completamente.
  • Ela é perfeita para encadear ações ou exibir uma mensagem de "concluído".

Demonstração de código: a chamada de retorno `complete`

Aqui, vamos animar uma caixa e depois alterar sua cor de fundo e exibir uma mensagem somente quando a animação estiver 100% concluída.

Isso garante consistência visual e o momento adequado para as ações seguintes.

<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #008CBA;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p id="message"></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1000, function() { // This is the complete callback
          $(this).css("background-color", "#f44336");
          $("#message").text("Animation complete! Color changed.");
        });
      });
    });
  </script>
</body>
</html>

A chamada de retorno `step`

Às vezes, você precisa executar uma ação durante uma animação, não apenas no final. É nesse ponto que a chamada de retorno step entra em ação.

A chamada de retorno step é executada para cada propriedade animada em cada etapa da animação. Ela é chamada continuamente enquanto a animação está em execução.

Ela recebe argumentos como now (valor atual da propriedade), fx (um objeto que contém detalhes da animação) e tween (para um controle mais avançado).

Demonstração de código: a chamada de retorno `step`

Vamos usar a chamada de retorno step para exibir a posição atual da nossa caixa animada enquanto ela se move.

Isso mostra como obter atualizações em tempo real e reagir ao progresso da animação. Usaremos especificamente o argumento now.

<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #FFC107;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p>Current Left Position: <span id="position">0px</span></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, {
          duration: 1500,
          step: function(now, fx) { // This is the step callback
            $("#position").text(now.toFixed(0) + "px");
          }
        });
      });
    });
  </script>
</body>
</html>

Usando várias chamadas de retorno

Você pode usar as chamadas de retorno step e complete na mesma animação.

O método animate() aceita um objeto de opções como segundo argumento, no qual você pode definir duration, easing e as funções de retorno de chamada.

Isso permite um controle preciso: acompanhar o progresso durante a animação e executar uma ação final depois que ela terminar.

Verificação das chamadas de retorno

Qual chamada de retorno do jQuery animate() é mais adequada para atualizar continuamente uma barra de progresso enquanto uma animação é executada?

Suavização e chamadas de retorno: resumo

Ótimo trabalho! Você aprendeu a aprimorar suas animações com jQuery:

  • Suavização personalizada: use extensões como jQuery UI para aplicar curvas de velocidade mais dinâmicas do que apenas 'linear' ou 'swing'.
  • Chamada de retorno complete: execute o código precisamente quando uma animação terminar.
  • Chamada de retorno step: obtenha atualizações em tempo real e execute ações repetidamente durante o progresso de uma animação.

Essas ferramentas oferecem um controle muito mais preciso do fluxo visual e do momento das interações dos seus elementos web.

Perguntas Frequentes

A aula “Suavização Personalizada e Retornos de Chamada de Animações” é grátis?

Sim — o texto completo de “Suavização Personalizada e Retornos de Chamada de Animações” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “Suavização Personalizada e Retornos de Chamada de Animações”?

Implemente funções personalizadas de suavização para controlar a velocidade e o fluxo das animações e utilize retornos de chamada para executar código precisamente quando as animações terminarem ou a… Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.

Quanto tempo leva a aula “Suavização Personalizada e Retornos de Chamada de Animações”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Encadeamento e Enfileiramento de Animações
  2. Suavização Personalizada e Retornos de Chamada de Animações
  3. Efeitos Avançados de Alternância e Deslizamento
← Voltar para jQuery Academy