Améliorer facilement les animations de jQuery

Points de base

La fonction
• jQuery's animate() est pratique, mais pas un moteur d'animation haute performance, ce qui peut entraîner des problèmes de consommation de mémoire et de faible fréquence d'images. Cependant, il reste une option viable pour les développeurs qui ne connaissent pas les animations CSS ou la recherche de compatibilité entre les navigateurs.
• Les animations CSS sont généralement plus rapides et plus efficaces que les animations de JQuery, grâce principalement à l'accélération du GPU. Cependant, ils ont également certaines limites, y compris les problèmes de compatibilité avec les anciennes versions d'Internet Explorer et les pourcentages de dépendance plutôt que le temps pour déterminer les durées d'animation, ce qui peut compliquer le réglage.
• Velocity.js est un plugin jQuery qui améliore considérablement les performances des animations jQuery sans modifications majeures de votre code. En remplaçant $.animate() par $.velocity(), les développeurs peuvent obtenir des fréquences d'images plus élevées et maintenir les caractéristiques des appels de chaîne de JQuery.

Nous avons tous utilisé la fonction animate() de jQuery pour créer d'excellents effets sur les pages Web. Puis, avec l'introduction et la montée de CSS3, on nous a dit que notre code était terrible. Ils suggèrent d'abandonner toutes les animations basées sur JQuery (et généralement des animations basées sur JavaScript) et d'utiliser à la place des animations basées sur CSS. Ce changement nous oblige à faire face à de nombreux problèmes de compatibilité du navigateur et au manque de fonctionnalités; Cette douleur est raisonnable car les animations CSS sont plus rapides que les animations JavaScript. C'est du moins ce qu'ils nous ont dit. Est-ce vrai? La fonction animate() de JQuery est-elle vraiment aussi lente? Existe-t-il un moyen de l'améliorer facilement sans changer notre code? La réponse est oui. Dans cet article, nous comprendrons certaines des limites des deux façons de créer des animations, puis nous comprendrons comment obtenir de meilleures performances avec le code jQuery.

Quel est le problème avec jQuery?

Nous connaissons et aimons tous JQuery (certaines personnes ne l'aiment pas vraiment). Cette bibliothèque conçue pour simplifier les scripts du client HTML a aidé des centaines de milliers de développeurs à travers le monde (pas des données réelles). Il fait de la traversée et de la manipulation des documents HTML, de la manipulation des événements, de l'Ajax et plus une brise, allégeant le fardeau de la gestion de l'incompatibilité et des erreurs dans tous les navigateurs. Parmi ses fonctionnalités, JQuery permet également la création d'animations et d'effets. Avec lui, nous pouvons animer les propriétés CSS, masquer des éléments, s'estomper des éléments et d'autres effets similaires. Cependant, l'objectif de conception de JQuery n'a jamais été d'être un moteur d'animation hautes performances, et il n'a jamais eu l'intention de prendre en charge des animations vraiment complexes et consommatrices de CPU. Comme preuve de ce fait, la consommation de mémoire de JQuery déclenche souvent la collecte des ordures, causant des problèmes lors de l'exécution d'animations. De plus, jQuery utilise setInterval() au lieu de requestAnimationFrame() (en savoir plus sur requestAnimationFrame()) dans les coulisses pour exécuter l'animation, ce qui n'aide pas à générer des fréquences d'images élevées. En raison de ces facteurs, «qui connaît le meilleur» préconise l'utilisation de CSS pour créer nos animations et nos effets.

CSS Animation et transitions

Soyons clairs: l'animation CSS est meilleure que JQuery Animation. En ce qui concerne l'animation, JQuery peut être plusieurs fois plus lent que CSS. Les animations et transitions CSS ont les avantages d'être accélérés par le matériel GPU, ce qui est excellent en ce qui concerne les pixels en mouvement. Ce facteur semble être une énorme amélioration, en particulier dans les situations où les performances sont essentielles, comme les appareils mobiles. C'est génial, n'est-ce pas? La vérité est que tout cela a des limites et des problèmes. La première limitation est que toutes les propriétés CSS ne peuvent pas être améliorées via le GPU. Par conséquent, il est faux de penser que l'utilisation d'animations CSS gagnera toujours. Un autre problème est que les animations CSS ne sont pas portables, du moins pas dans tous les navigateurs que vous pouvez cibler. Par exemple, la transition ne fonctionne pas dans Internet Explorer 9 et ci-dessous. Pire, les animations dans CSS sont actuellement basées sur des pourcentages plutôt que du temps (secondes ou millisecondes). Cela signifie que la modification de la durée de l'animation après avoir terminé l'animation peut être très douloureuse à moins que vous n'utilisiez un préprocesseur comme Sass ou moins. Enfin, l'animation CSS nécessite de taper un grand nombre de préfixes de fournisseurs. Oui, nous pouvons déléguer un outil pour les gérer, mais c'est juste une autre chose à craindre.

En plus des considérations précédentes, il y a d'autres bonnes raisons pour lesquelles l'animation jQuery ne doit pas être ignorée. Ils sont plus liés au manque de compétences que la faiblesse de la technologie elle-même, mais méritent toujours d'être mentionnés. Si un développeur est utilisé pour créer des animations avec jQuery, il y a une forte probabilité que le développeur ne puisse pas utiliser CSS pour effectuer la même tâche. Peut-être qu'il faut beaucoup de temps aux développeurs pour créer le même effet dans CSS, afin que l'effort n'en vaut pas la peine. Ou, les développeurs peuvent ne pas vouloir apprendre une autre technique pour créer des animations hautement personnalisables. Il n'y a rien à avoir honte. Chacun a ses propres limites dans un domaine spécifique. Le point ici est que nous voulons que les animations créées avec jQuery aient de meilleures performances, nous n'avons donc pas besoin de les convertir en animations CSS. Heureusement, il y a une solution.

Améliorez la fonction de jQuery animate()

La réponse à la résolution du problème d'animation jQuery est appelée Velocity.js. Velocity.js est

Contrairement à JQuery 1.x qui utilise des versions plus anciennes de IE, la vitesse est compatible avec IE8. Cela ne devrait pas être un problème majeur pour la plupart des projets. À ce stade, vous vous demandez peut-être comment l'utilisation de Velocity.js affectera la base de code. La réponse est «d'une manière très ridicule». Pour intégrer Velocity.js, tout ce que nous avons à faire est de le télécharger et de l'inclure dans la page Web que nous voulons utiliser. La dernière étape consiste à remplacer <q cite="https://github.com/julianshapiro/velocity">一个 jQuery 插件，它重新实现了 $.animate() 以产生更高的性能（使 Velocity 也比 CSS 动画库更快），同时包含了改进动画工作流程的新功能。</q> qui apparaît par $.animate(), $.velocity() sans modifier les paramètres! Ce changement est aussi simple que d'effectuer une recherche et un remplacement dans un éditeur de texte ou un IDE de notre choix. Une fois terminé, nos performances d'animation seront immédiatement améliorées. C'est génial car nous pouvons réutiliser nos connaissances sans avoir trop d'impact sur la base de code. De plus, comme il s'agit d'un plugin jQuery qui conserve les appels de chaîne, nous pouvons continuer à créer une «chaîne d'appels de méthode» typique de jQuery.

Conclusion

Dans cet article, je décris certains problèmes qui affectent les animations jQuery. Nous discutons pourquoi CSS Animation a été fortement promue au cours des dernières années pour remplacer JQuery. Ensuite, j'ai mis en évidence certaines limites de CSS et quelques lacunes dans les performances. Enfin, je vous présente brièvement Velocity.js, un plugin jQuery qui vous permet d'améliorer les performances des animations et des effets JavaScript sans modifier le code source. Cet article n'est qu'une introduction à la comparaison entre les animations JQuery, CSS et JavaScript. Si vous souhaitez creuser dans ce sujet, je vous recommande fortement de lire les articles suivants écrits par GSAP Auteurs et VELOCITY.JS Auteurs: - Debunking the Myth: CSS Animation vs JavaScript- CSS vs JS Animation: Quel est plus rapide?

FAQ sur l'amélioration des animations jQuery

Comment ralentir l'animation jQuery?

Vous pouvez ralentir l'animation jQuery en augmentant la durée de l'animation. La durée est spécifiée en millisecondes dans la méthode .animate(). Par exemple, si vous souhaitez ralentir l'animation pour durer 5 secondes, vous devriez écrire $(selector).animate({params}, 5000);. Plus le nombre est grand, plus l'animation est lente.

Quel est le rôle de l'assouplissement dans l'animation jQuery?

L'assouplissement de l'animation jQuery fait référence à la vitesse des progrès de l'animation à différents moments pendant sa durée. JQuery fournit deux méthodes d'assouplissement intégrées: "swing" et "linéaire". "Swing" est la méthode d'assouplissement par défaut, ce qui rend la progression de l'animation plus lente au début et à la fin et plus vite au milieu. "Linear", d'autre part, garantit que l'animation est constante tout au long du processus.

Comment améliorer les performances de JQuery Animation?

Il existe de nombreuses façons d'améliorer les performances de JQuery Animation. Une façon consiste à utiliser les transitions CSS dans la mesure du possible, car elles fonctionnent généralement mieux que les animations jQuery. Une autre façon consiste à limiter le nombre d'animations fonctionnant simultanément. Vous pouvez également utiliser la méthode requestAnimationFrame, qui permet au navigateur d'optimiser les animations pour les animations plus lisses.

Comment arrêter de faire fonctionner JQuery Animation?

Vous pouvez utiliser la méthode .stop() pour arrêter l'animation jQuery en cours d'exécution. Cette méthode arrête l'animation en cours d'exécution sur l'élément sélectionné. Par exemple, $(selector).stop(); arrêtera l'animation sur l'élément sélectionné.

Comment relier plusieurs animations dans jQuery?

Vous pouvez relier plusieurs animations jQuery en appelant simplement plusieurs méthodes d'animation sur le même élément. Par exemple, $(selector).fadeIn().slideUp(); se fanent d'abord dans les éléments sélectionnés, puis les glissent vers le haut. JQuery garantit que l'animation est exécutée dans l'ordre de l'appel.

Comment animer plusieurs attributs en même temps dans jQuery?

Vous pouvez animer plusieurs propriétés à la fois dans jQuery en passant un objet contenant les propriétés que vous souhaitez animer à la méthode .animate(). Par exemple, $(selector).animate({height: "300px", width: "200px"}); animera la hauteur et la largeur de l'élément sélectionné en même temps.

Comment utiliser les fonctions de rappel dans JQuery Animation?

La fonction de rappel dans l'animation jQuery est une fonction exécutée une fois l'animation terminée. Vous pouvez transmettre la fonction de rappel comme un deuxième paramètre à la méthode .animate(). Par exemple, $(selector).animate({params}, function(){ /* 动画完成后要执行的代码 */ });.

Comment créer des animations personnalisées dans jQuery?

Vous pouvez utiliser la méthode .animate() pour créer des animations personnalisées dans jQuery. Cette méthode vous permet d'animer toutes les propriétés CSS. Par exemple, $(selector).animate({left: " =50px"}); déplacera l'élément sélectionné vers la droite de 50 pixels.

Comment utiliser les méthodes de file d'attente et de désagréation dans l'animation jQuery?

Les méthodes de file d'attente et de désagréation de jQuery sont utilisées pour contrôler l'exécution de l'animation. La méthode de la file d'attente vous permet d'ajouter de nouvelles animations à la file d'attente d'animation à exécuter sur l'élément sélectionné. La méthode DeQueue vous permet de supprimer et d'exécuter la fonction suivante dans la file d'attente.

Comment utiliser la méthode .delay() dans l'animation jQuery?

La méthode

dans jQuery est utilisée pour retarder l'exécution des projets ultérieurs dans la file d'attente. Il est généralement utilisé pour les animations retardées. Par exemple, .delay() retardera l'animation de Fadein de 500 millisecondes. $(selector).delay(500).fadeIn();

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!