Un guide de la méthode jQuery Animate ()

Points de base

La méthode
• jQuery's animate() est un outil polyvalent qui permet aux développeurs de créer des animations personnalisées en modifiant progressivement les propriétés CSS des éléments sur une durée spécifiée.
La méthode
• animate() convient uniquement aux propriétés CSS numériques et ne convient pas aux animations extrêmement complexes car des problèmes de performances peuvent se produire.
• La méthode se présente principalement sous deux formes: animate(properties[, duration][, easing][, callback]) et animate(properties[, options]), et la plupart des paramètres sont facultatifs. Ces paramètres contrôlent les aspects de l'animation, tels que la durée, la fonction d'assouplissement et ce qui se passe une fois l'animation terminée.
Les développeurs
• peuvent créer des animations plus complexes en reliant plusieurs méthodes animate() ensemble, permettant à des séquences d'animation d'être exécutées dans l'ordre des appels. Cette fonctionnalité est appelée "file d'attente", qui améliore la fonctionnalité et la flexibilité des animations jQuery.

jQuery est une excellente bibliothèque qui a changé la façon dont des milliers de développeurs gèrent des projets au fil des ans. Lors de la création de jQuery, CSS ne peut pas créer des animations complexes et ne peut utiliser JavaScript. JQuery est d'une grande aide dans les animations car plusieurs méthodes ont été créées à cet effet. Bien qu'il soit livré avec des animations simples (fadeIn(), hide(), slideDown(), etc.), pour le garder léger, la bibliothèque offre un moyen très flexible de créer tout ce que nous voulons l'animation. Ceci fait l'objet de cet article. Le animate() de jQuery est une méthode de wrapper animate() , ce qui signifie qu'il fonctionne sur un ensemble d'éléments DOM précédemment sélectionnés enveloppés par jQuery. Cette méthode vous permet d'appliquer vos propres effets d'animation personnalisés aux éléments de votre collection. Pour ce faire, nous devons fournir un ensemble de propriétés et de valeurs de style CSS qui seront atteintes à la fin de l'animation. La valeur intermédiaire du style pendant l'effet d'animation (qui est automatiquement traité par le moteur d'animation) est déterminée par la durée de l'effet et la fonction d'assouplissement, dont nous discuterons bientôt. La liste d'attribut de style CSS qui peut être animé est limitée aux propriétés qui acceptent les valeurs numériques. Cette valeur peut être une valeur absolue (par exemple, 200) ou une valeur relative du point de départ. Pour les valeurs absolues, jQuery suppose que les pixels sont des unités par défaut. Nous pouvons également spécifier d'autres unités telles que l'EM, le REM ou le pourcentage. Pour spécifier une valeur relative, nous devons préface ou = pour indiquer la valeur cible relative dans les directions positives ou négatives, respectivement. Maintenant que nous avons une certaine compréhension de -=, il est temps de regarder sa signature et ses paramètres. animate()

Signature et paramètres

Cette méthode a deux formes principales, la plupart de ses paramètres sont facultatifs (indiqués dans les crochets carrés habituels):

• animate(properties[, duration][, easing][, callback])
• animate(properties[, options])

sur les paramètres, il y a beaucoup à dire:

• properties (objet): une table de hachage contenant la valeur qui doit être atteinte à la fin de l'animation.
• duration (nombre | chaîne): durée de l'effet (en millisecondes) ou l'une des chaînes prédéfinies: "lent" (600 millisecondes), "normal" (400 millisecondes), ou "rapide" (200 ms). La valeur par défaut est "normale".
• easing (String): le nom de la fonction de soulagement à utiliser lors de l'exécution de la conversion. La valeur par défaut est "swing".
• callback (fonction): une fonction qui est exécutée lors de l'animation pour chaque élément d'animation.
• options (Objet): une table de hachage contenant un ensemble d'options pour passer à la méthode. Les options disponibles sont les suivantes:
  • always (fonction): une fonction appelée lorsque l'animation est terminée ou arrêtée mais non terminée.
  • complete (fonction): fonction exécutée une fois l'animation terminée.
  • done (fonction): La fonction appelée une fois l'animation terminée.
  • duration (chaîne | numéro): Identique à celle décrite ci-dessus.
  • easing (String): Identique à celle décrite ci-dessus.
  • fail (fonction): fonction exécutée lorsque l'animation échoue.
  • progress (fonction): fonctions qui s'exécutent après chaque étape de l'animation. Cette fonction est appelée une seule fois par élément d'animation.
  • queue (Bolean): Si l'animation doit être placée dans la file d'attente d'effet (plus à ce sujet plus tard). La valeur par défaut est vraie.
  • specialEasing (objet): une table de hachage d'une ou plusieurs propriétés CSS dont la valeur est une fonction d'assouplissement.
  • start (fonction): fonction exécutée au début de l'animation.
  • step (fonction): une fonction qui appelle chaque attribut d'animation de chaque élément d'animation.

Le terme facile est utilisé pour décrire la façon dont les vitesses de trame sont traitées et animées. Lorsque l'option queue est définie sur true, nous permettons à l'animation d'être exécutée séquentiellement, et lorsqu'elle est définie sur False, l'animation peut être exécutée en parallèle. Cela nous donne beaucoup de pouvoir que nous pouvons utiliser comme nous le voulons. Dans le reste de cet article, nous démontrerons certaines applications pratiques de ces paramètres pour vous permettre de vivre la possibilité de animate().

Exemple d'utilisation

Dans cette section, nous construirons quelques démonstrations pour faire la puissance de animate(). N'oubliez pas que cette approche ne convient pas aux animations très, très complexes en raison de problèmes liés aux performances et à la maîtrise de l'animation.

Exécutez une seule animation

Exécuter une seule animation est très facile, il suffit d'appeler la méthode une fois. Par exemple, nous pourrions vouloir déplacer des éléments d'un côté de la boîte à l'autre. Pour illustrer cette animation, nous définirons deux éléments div, l'un à l'intérieur de l'autre. Nous les styliserons pour que la div intérieure ait un fond rouge. Le code pour ce faire est le suivant. Html:

<code class="language-html"><div class="rectangle">
  <div class="square-small"></div>
</div></code>

CSS:

<code class="language-css">.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}</code>

En utilisant la puissance de animate(), nous déplaçons les petits carrés d'un côté à l'autre:

<code class="language-javascript">$('.rectangle')
  .find('.square-small')
  .animate({
    left: 280
  }, 'slow');</code>

Dans ce code, nous spécifions que l'attribut left est le seul attribut à être animé. Nous définissons la durée de l'animation sur la valeur prédéfinie lent (600 millisecondes). Nous utilisons des valeurs absolues pour déplacer l'interne <div> (avec la classe <code>.square-small). Cette valeur est basée sur la largeur du conteneur que nous définissons avec le code CSS répertorié précédemment. Cette solution n'est pas très flexible car si nous modifions la largeur du conteneur, l'interne <div> n'atteindra pas l'autre côté (si nous définissons une largeur plus large sur le conteneur), ou le dépassera (si nous définissons une largeur plus étroite ). Une solution consiste à définir la valeur de l'attribut <code><div> basé sur le calcul de la largeur actuelle de l'externe et interne <code>left comme indiqué ci-dessous:

<code class="language-javascript">left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()</code>

Exécutez plusieurs animations en boucle

Exécuter plusieurs animations sur un élément ou un groupe d'éléments est aussi simple que de lier les appels à animate(). Dans cet exemple, nous déplacerons un petit carré alors qu'il se déplace le long du périmètre du sablier intérieur du grand carré (plutôt qu'un rectangle). Pour construire cette démo, nous utiliserons la balise suivante:

<code class="language-html"><div class="square-big">
  <div class="square-small"></div>
</div></code>

Pour les styles, nous devons utiliser le même CSS que nous avons utilisé pour .square-small ainsi que les styles suivants pour définir le style du carré le plus extérieur:

<code class="language-css">.square-big {
  width: 300px;
  height: 300px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}</code>

La dernière étape consiste à écrire du code JavaScript pour dessiner les quatre lignes qui constituent le périmètre de sablier idéal. À partir du coin supérieur gauche du carré le plus extérieur, nous devons animer le petit carré jusqu'à ce qu'il atteigne le coin inférieur droit du grand carré. Les petits carrés doivent se déplacer en diagonale pour produire des effets. Une fois qu'il atteint le coin inférieur droit, nous devons le déplacer dans le coin inférieur gauche. Il doit ensuite atteindre le coin supérieur droit et finalement revenir à sa position d'origine. En introduisant cette démo, nous avons dit que nous voulions effectuer des animations infinies. Nous devons donc trouver un moyen d'exécuter à nouveau toute l'animation, une fois la dernière étape terminée. Pour ce faire, nous pouvons envelopper l'appel aux quatre appels animate() liés dans une fonction, nous avons donc une fonction à référencer. Nous pouvons ensuite utiliser le rappel complete susmentionné et iife pour exécuter à nouveau l'animation lorsque la dernière étape sera terminée. Le résultat de la conversion de cette description en code est le suivant:

<code class="language-javascript">(function animation() {
  var options = {
    duration: 800,
    easing: 'linear'
  };

  $('.square-big')
    .find('.square-small')
    .animate({
      left: 280,
      top: 280
    }, options)
    .animate({
      left: 0
    }, options)
    .animate({
      left: 280,
      top: 0
    }, options)
    .animate({
      left: 0
    }, $.extend(true, {}, options, {
      complete: function() {
        animation();
      }
    }));
})();</code>

Dans le code ci-dessus, veuillez noter comment nous utilisons la variable options afin que nous n'ayons pas à écrire les mêmes paramètres encore et encore lors de l'appel animate(). De plus, comme nous avons dû ajouter le rappel options la dernière fois que nous avons utilisé complete, nous avons utilisé la méthode extend() de jQuery.

Plus d'opérations de rappel

Comme dernier exemple, nous définirons les propriétés options, start et complete du paramètre progress (le deuxième paramètre de la deuxième forme). Le but est de désactiver le bouton qui exécute l'animation lorsqu'il est cliqué pendant que l'animation est en cours d'exécution. Après cela, nous voulons montrer le pourcentage de l'achèvement de l'animation. Pour cet exemple, nous modifierons la première démo que nous avons construite. Selon la description, nous devons ajouter un bouton et un élément (nous utiliserons une portée) pour afficher le pourcentage. Ce changement entraîne la balise suivante:

<code class="language-html"><div class="rectangle">
  <div class="square-small"></div>
</div></code>

Nous n'avons pas à ajouter plus de styles, nous pouvons donc passer à la discussion du code JavaScript. Afin d'exécuter l'animation uniquement lorsque le bouton est cliqué, nous devons ajouter un gestionnaire à l'événement de clic du bouton. À l'intérieur du gestionnaire, nous utilisons la méthode prop() de jQuery pour désactiver et activer les boutons en fonction de la fonction ou de la fin de l'animation. Enfin, nous utilisons le deuxième paramètre transmis au gestionnaire attaché à l'option progress pour afficher le pourcentage d'achèvement de l'animation. Le code généré ressemble à ceci:

<code class="language-css">.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}</code>

Conclusion

Cet article traite de ce que vous pouvez faire avec la méthode animate() de jQuery. Nous introduisons sa signature et ses paramètres acceptés. Dans cet article, nous explorons trois exemples d'animations. Cet article ne présente que brièvement la possibilité de animate(). En fait, avec un peu de patience et de créativité, nous pouvons créer des animations vraiment complexes et belles.

Questions fréquemment posées (FAQ)

Quelle est la méthode animée jQuery et comment fonctionne-t-elle?

La méthode

jQuery Animate est un outil puissant qui vous permet de créer des animations personnalisées. Il fonctionne en modifiant progressivement les propriétés CSS d'un élément, avec la durée spécifiée par vous. Vous pouvez animer tous les attributs CSS, mais vous devez spécifier les attributs à l'aide de Camel Case, comme marginLeft au lieu de margin-left. La méthode Animate vous permet également de spécifier des fonctions d'assistance qui contrôlent la vitesse de l'animation, ainsi que les fonctions de rappel qui sont exécutées une fois l'animation terminée.

Comment arrêter ou suspendre l'animation jQuery?

jQuery fournit une méthode stop() pour arrêter l'animation. Cette méthode arrête l'animation en cours d'exécution sur l'élément sélectionné. Si vous voulez suspendre l'animation, ce sera un peu plus compliqué, car JQuery ne fournit pas de méthode intégrée pour cela. Cependant, vous pouvez le faire en utilisant des plugins ou en contrôlant manuellement les progrès de l'animation.

Puis-je utiliser JQuery Animate Animation pour gérer plusieurs propriétés à la fois?

Oui, vous pouvez utiliser la méthode JQuery Animate pour animer plusieurs propriétés CSS à la fois. Il vous suffit d'inclure toutes les propriétés à animer dans l'objet properties. Par exemple, vous pouvez animer la largeur et la hauteur d'un élément en même temps.

Comment utiliser la fonction étape dans jQuery Animate?

La fonction de pas dans jQuery Animate est une fonction de rappel qui est exécutée à chaque étape de l'animation. Cette fonction transmet deux paramètres: now, qui est la valeur actuelle de la propriété d'animation; fx, qui est un objet contenant des informations sur l'animation. Vous pouvez utiliser la fonction Step pour créer des animations complexes ou déboguer les animations.

Puis-je utiliser JQuery Animate pour les propriétés CSS non nucères?

Non, la méthode Animate JQuery ne s'applique qu'aux propriétés CSS numériques. Si vous essayez d'animer les propriétés non nucères telles que la couleur ou la couleur d'arrière-plan, cela ne fonctionnera pas. Cependant, vous pouvez animer ces propriétés à l'aide de plugins tels que JQuery UI ou JQuery Color.

Comment utiliser jQuery Animate pour lier l'animation?

Vous pouvez lier les animations jQuery en appelant simplement plusieurs méthodes d'animation une par une. JQuery exécutera l'animation dans l'ordre de l'appel. C'est ce qu'on appelle "la file d'attente", et c'est une fonctionnalité puissante de JQuery Animation.

Puis-je utiliser jQuery Animate pour créer un effet glissant?

Oui, vous pouvez créer un effet glissant à l'aide de la méthode animée jQuery. Vous pouvez le faire en animant la hauteur ou la largeur de l'élément. Cependant, jQuery fournit également des méthodes slideDown, slideUp et slideToggle, qui sont plus faciles à utiliser si vous souhaitez simplement créer des effets coulissants simples.

Comment rendre mon animation jQuery plus lisse?

Il existe plusieurs façons de rendre vos animations jQuery plus lisses. Une façon consiste à utiliser des fonctions d'assouplissement qui contrôlent la vitesse de l'animation. Une autre approche consiste à utiliser la méthode requestAnimationFrame, qui permet au navigateur d'optimiser les animations. Vous pouvez également améliorer les performances en minimisant le nombre d'opérations DOM et en utilisant les conversions CSS dans la mesure du possible.

Puis-je utiliser JQuery Animate sur un ensemble d'éléments?

Oui, vous pouvez utiliser la méthode Animate JQuery sur un ensemble d'éléments. Lorsque vous appelez la méthode Animate sur un objet jQuery avec plusieurs éléments, l'animation est appliquée à tous les éléments de la collection.

Comment créer un effet de fondu à l'aide de jQuery Animate?

Vous pouvez créer un effet de fondu à l'aide de la méthode jQuery Animate en animant l'attribut opacity. Cependant, jQuery fournit également des méthodes fadeIn, fadeOut et fadeToggle, qui sont plus faciles à utiliser si vous souhaitez simplement créer des effets de fondu simples.