0Pricing
jQuery Academy · Lección

Easing personalizado y callbacks de animación

Implemente funciones de easing personalizadas para controlar la velocidad y el flujo de las animaciones, y utilice callbacks para ejecutar código exactamente cuando las animaciones finalicen o avancen un paso.

Easing personalizado y callbacks de animación es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.

Más allá de la velocidad de animación básica

Las animaciones no consisten solo en mover elementos, sino también en cómo se mueven. La aceleración controla la aceleración y desaceleración de una animación, haciendo que parezca más natural o dramática.

jQuery proporciona dos opciones de aceleración integradas: 'linear' (velocidad constante) y 'swing' (inicio lento, velocidad alta en el centro y final lento). Pero ¿qué ocurre si necesita más?

Exploración de la aceleración predeterminada

Veamos la diferencia entre las opciones de aceleración predeterminadas de jQuery:

  • 'linear': la animación se mueve a velocidad constante desde el inicio hasta el final.
  • 'swing': es la opción predeterminada. Comienza lentamente, acelera en el centro y vuelve a ralentizarse al final.

Ambas son sencillas, pero a menudo querrá tener más control sobre la sensación de la animación.

Aceleración personalizada con jQuery UI

Para obtener efectos de aceleración más sofisticados, se suelen usar plugins. Una opción popular es el componente jQuery UI Easing.

Este amplía el objeto $.easing de jQuery con muchas funciones nuevas, como 'easeOutBounce', 'easeInOutQuad' y otras. Así dispondrá de una amplia biblioteca de curvas de movimiento predefinidas.

Para usarlas, normalmente deberá incluir la biblioteca jQuery UI en su proyecto.

Demostración de código: rebote con EaseOutBounce

Pruebe una animación con una función de aceleración personalizada de jQuery UI. Observe cómo el cuadro rebota al final en lugar de detenerse bruscamente. Este efecto se consigue mediante 'easeOutBounce'.

(Nota: este ejemplo presupone que se han incluido el núcleo y los efectos de jQuery UI.)

<!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>

Comprensión de las funciones de callback de animación

Las animaciones son asíncronas, lo que significa que el código continúa ejecutándose mientras tienen lugar. ¿Qué ocurre si necesita hacer algo después de que termine una animación?

El método .animate() de jQuery acepta una función de callback. La más habitual es el callback complete.

  • El callback complete se ejecuta una vez que la animación de los elementos seleccionados ha terminado por completo.
  • Es perfecto para encadenar acciones o mostrar un mensaje de "terminado".

Demostración de código: el callback `complete`

Aquí animaremos un cuadro y, después, cambiaremos su color de fondo y mostraremos un mensaje solo cuando la animación haya terminado al 100 %.

Así se garantiza la coherencia visual y una temporización adecuada para las acciones posteriores.

<!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>

El callback `step`

A veces necesita realizar una acción durante una animación, no solo al final. Aquí es donde interviene el callback step.

El callback step se ejecuta para cada propiedad animada en cada paso de la animación. Se invoca continuamente mientras la animación está en curso.

Recibe argumentos como now (valor actual de la propiedad), fx (un objeto que contiene los detalles de la animación) y tween (para un control más avanzado).

Demostración de código: el callback `step`

Usaremos el callback step para mostrar la posición actual del cuadro animado mientras se mueve.

Esto muestra cómo obtener actualizaciones en tiempo real y reaccionar al progreso de la animación. Usaremos específicamente el 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>

Uso de varios callbacks

Puede usar los callbacks step y complete en la misma animación.

El método animate() acepta un objeto de opciones como segundo argumento, donde puede definir duration, easing y las funciones de callback.

Esto permite un control preciso: seguir el progreso durante la animación y ejecutar una acción final después de que concluya.

Comprobación de callbacks

¿Qué callback de jQuery animate() es más adecuado para actualizar continuamente una barra de progreso mientras se ejecuta una animación?

Aceleración y callbacks: resumen

¡Excelente trabajo! Ha aprendido a mejorar sus animaciones de jQuery:

  • Aceleración personalizada: use plugins como jQuery UI para aplicar curvas de velocidad más dinámicas que 'linear' o 'swing'.
  • Callback complete: ejecute código exactamente cuando termine una animación.
  • Callback step: obtenga actualizaciones en tiempo real y realice acciones repetidamente durante el progreso de una animación.

Estas herramientas le proporcionan un control mucho más preciso sobre el flujo visual y la temporización interactiva de los elementos web.

Preguntas frecuentes

¿La lección «Easing personalizado y callbacks de animación» es gratis?

Sí — el texto completo de «Easing personalizado y callbacks de animación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Easing personalizado y callbacks de animación»?

Implemente funciones de easing personalizadas para controlar la velocidad y el flujo de las animaciones, y utilice callbacks para ejecutar código exactamente cuando las animaciones finalicen o avance… Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar jQuery Academy?

No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.

¿Cuánto tiempo toma la lección «Easing personalizado y callbacks de animación»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?

Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Encadenamiento y puesta en cola de animaciones
  2. Easing personalizado y callbacks de animación
  3. Efectos avanzados de alternancia y deslizamiento
← Volver a jQuery Academy