0Pricing
jQuery Academy · Leçon

Accélération personnalisée et rappels d’animation

Mettez en œuvre des fonctions d’accélération personnalisées pour contrôler la vitesse et le déroulement des animations, et utilisez des rappels pour exécuter du code précisément à la fin ou à chaque étape d’une animation.

Accélération personnalisée et rappels d’animation est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Au-delà de la vitesse d’animation de base

Les animations ne consistent pas seulement à déplacer des éléments : la manière dont ils se déplacent compte aussi. L’assouplissement contrôle l’accélération et la décélération d’une animation, ce qui lui donne un aspect plus naturel ou plus spectaculaire.

jQuery propose deux options d’assouplissement intégrées : 'linear' (vitesse constante) et 'swing' (début lent, milieu rapide, fin lente). Mais que faire si vous avez besoin de davantage de possibilités ?

Découvrir l’assouplissement par défaut

Voyons la différence entre les options d’assouplissement par défaut de jQuery :

  • 'linear' : l’animation se déplace à vitesse constante du début à la fin.
  • 'swing' : il s’agit de l’option par défaut. L’animation commence lentement, accélère au milieu, puis ralentit à nouveau à la fin.

Les deux options sont simples, mais vous voudrez souvent mieux contrôler le comportement de l’animation.

Assouplissement personnalisé avec jQuery UI

Pour obtenir des effets d’assouplissement plus sophistiqués, nous utilisons souvent des extensions. Le composant jQuery UI Easing est un choix populaire.

Il étend l’objet $.easing de jQuery avec de nombreuses nouvelles fonctions comme 'easeOutBounce', 'easeInOutQuad', et bien d’autres. Vous disposez ainsi d’une riche bibliothèque de courbes de mouvement prédéfinies.

Pour les utiliser, vous devez généralement inclure la bibliothèque jQuery UI dans votre projet.

Démonstration de code : rebond avec EaseOutBounce

Essayons une animation utilisant une fonction d’assouplissement personnalisée de jQuery UI. Remarquez comment la boîte rebondit à la fin au lieu de s’arrêter brusquement. Cet effet est obtenu avec 'easeOutBounce'.

(Remarque : cet exemple suppose que le noyau et les effets de jQuery UI sont inclus.)

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

Comprendre les fonctions de rappel des animations

Les animations sont asynchrones : votre code continue donc de s’exécuter pendant qu’elles se déroulent. Que faire si vous devez effectuer une action après la fin d’une animation ?

La méthode .animate() de jQuery accepte une fonction de rappel. La plus courante est la fonction de rappel complete.

  • La fonction de rappel complete est exécutée une fois l’animation entièrement terminée sur le ou les éléments sélectionnés.
  • Elle est idéale pour enchaîner des actions ou afficher un message indiquant que l’opération est terminée.

Démonstration de code : la fonction de rappel `complete`

Ici, nous allons animer une boîte, puis modifier sa couleur d’arrière-plan et afficher un message uniquement une fois l’animation terminée à 100 %.

Cela garantit une cohérence visuelle et un minutage correct pour les actions suivantes.

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

La fonction de rappel `step`

Parfois, vous devez effectuer une action pendant une animation, et pas seulement à la fin. C’est là qu’intervient la fonction de rappel step.

La fonction de rappel step est exécutée pour chaque propriété animée à chaque étape de l’animation. Elle est appelée en continu pendant l’exécution de l’animation.

Elle reçoit des arguments tels que now (valeur actuelle de la propriété), fx (un objet contenant les détails de l’animation) et tween (pour un contrôle plus avancé).

Démonstration de code : la fonction de rappel `step`

Utilisons la fonction de rappel step pour afficher la position actuelle de notre boîte animée à mesure qu’elle se déplace.

Cela montre comment obtenir des mises à jour en temps réel et réagir à la progression de l’animation. Nous utiliserons précisément l’argument 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>

Utiliser plusieurs fonctions de rappel

Vous pouvez utiliser les fonctions de rappel step et complete dans la même animation.

La méthode animate() accepte un objet d’options comme deuxième argument. Vous pouvez y définir la duration, l’easing et les fonctions de rappel.

Cela permet un contrôle précis : suivre la progression pendant l’animation et exécuter une action finale après sa conclusion.

Vérification des fonctions de rappel

Quelle fonction de rappel jQuery animate() convient le mieux pour mettre à jour continuellement une barre de progression pendant l’exécution d’une animation ?

Assouplissement et fonctions de rappel : résumé

Excellent travail ! Vous avez appris à améliorer vos animations jQuery :

  • Assouplissement personnalisé : utilisez des extensions comme jQuery UI pour appliquer des courbes de vitesse plus dynamiques que « linear » ou « swing ».
  • Fonction de rappel complete : exécutez du code précisément lorsqu’une animation est terminée.
  • Fonction de rappel step : obtenez des mises à jour en temps réel et effectuez des actions répétées tout au long de la progression d’une animation.

Ces outils vous donnent un contrôle beaucoup plus précis sur le déroulement visuel et le minutage interactif de vos éléments web.

Questions Fréquemment Posées

La leçon « Accélération personnalisée et rappels d’animation » est-elle gratuite ?

Oui — le texte complet de « Accélération personnalisée et rappels d’animation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Accélération personnalisée et rappels d’animation » ?

Mettez en œuvre des fonctions d’accélération personnalisées pour contrôler la vitesse et le déroulement des animations, et utilisez des rappels pour exécuter du code précisément à la fin ou à chaque… Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.

Combien de temps prend la leçon « Accélération personnalisée et rappels d’animation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Chaînage et mise en file des animations
  2. Accélération personnalisée et rappels d’animation
  3. Effets avancés d’affichage et de glissement
← Retour à jQuery Academy