Tutoriel d'animation camel par trame avec CSS et JavaScript

Ce tutoriel explore diverses méthodes pour fabriquer des animations lisses, performantes et maintenables par trame à l'aide de HTML, CSS et JavaScript. Nous allons construire une animation oculaire clignotante, affiner progressivement notre approche pour obtenir des résultats optimaux entre les navigateurs et les appareils.

Concepts clés:

• Les techniques d'animation cadre par trame utilisant CSS et JavaScript offrent diverses approches, chacune avec des compromis.
• L'évolutivité et la réactivité de SVG le rendent supérieur aux GIF, en particulier pour les animations complexes ou interactives.
• Les animations basées sur Sprite et les images clés CSS minimisent les demandes HTTP et améliorent le rendu.
• CSS Transforme les propriétés, en particulier avec l'accélération matérielle (translate3d), Optimiser les performances en réduisant les repeintes et les reflux.
• Choisir la bonne technique dépend de l'évolutivité, de la réactivité, des performances et des besoins de maintenabilité.

Qu'est-ce que l'animation cadre par trame?

L'animation cadre par trame, telle que définie par Adobe, implique de changer le contenu de la scène dans chaque cadre. Il est idéal pour les animations complexes où chaque cadre est unique. Essentiellement, une séquence d'images crée l'illusion de mouvement.

Ce tutoriel utilise des images SVG pour leur évolutivité. Des alternatives comme PNG, JPEG et GIF sont discutées plus tard. Nous utiliserons jQuery et supposons que l'autoprefixer est configuré.

Méthodes:

1. Modification de la source d'image: Cette méthode simple implique de modifier dynamiquement l'attribut src d'un élément <img alt="Tutoriel d'animation camel par trame avec CSS et JavaScript" >. requestAnimationFrame est utilisé pour l'animation plus lisse, mais le préchargement de l'image est crucial pour empêcher le jank initial. Le préchargement est réalisé en ajoutant des divs cachés avec les images comme images d'arrière-plan.

   • PROS: déclaratif, l'image reste en place.
   • CONS: Plusieurs demandes HTTP peuvent ralentir la charge de page initiale, le potentiel d'animation janky sur mobile en raison des repeintes.

2. Changer l'opacité de l'image: Cette approche évite les repeints en modifiant l'opacité de l'image au lieu de la source. Toutes les images sont préchargées, améliorant les performances mais nécessitant toujours plusieurs charges d'image.

   • PROS: Amélioration des performances de rendu par rapport à la méthode 1.
   • CONS: nécessite toujours plusieurs charges d'image, ce qui a un impact potentiellement sur la charge de page initiale.

3. Changer de position de sprite: Ceci utilise une feuille de sprite CSS - une image unique contenant toutes les trames d'animation. Les animations CSS changent le background-position pour créer l'animation.

   • PROS: demande http unique, pas de javascript nécessaire.
   • CONS: Les repeints peuvent provoquer Jank sur le mobile, potentiel de oscillation d'image en raison du rendu des sous-pixels.

4. Sprite en mouvement avec transformée: Cela optimise la méthode 3 en utilisant transform: translateX au lieu de background-position. Cela minimise les repeints et les reflétés. Un repli est nécessaire pour les versions IE plus anciennes qui ne prennent pas en charge les valeurs de pourcentage dans les animations translateX. transform: translate3d(0, 0, 0) est utilisé pour l'accélération matérielle.

   • PROS: demande HTTP unique, animation lisse sur mobile en raison de repeintes minimisées.
   • CONS: c'est-à-dire la chute requise.

en ligne SVG: INLINGING SVG au lieu d'utiliser des fichiers externes peut améliorer les temps de chargement des pages initiaux, en particulier pour les pages avec de faibles probabilités de révision.

Comparaison des performances: Les tests de performances (par exemple, en utilisant JSPERF) montrent que la méthode de transformation de sprite (méthode 4) offre généralement les meilleures performances de rendu.

Alternatives:

• gif: approprié si l'évolutivité n'est pas critique, mais manque de contrôle sur le flux d'animation et peut être grand.
• Canvas: Excellent pour les performances avec plusieurs objets animés sur de petits écrans, mais nécessite des connaissances de l'API Canvas et manque de support d'événements DOM.

Conclusion:

La meilleure méthode dépend des exigences du projet. Prioriser le SVG pour l'évolutivité, utiliser les propriétés de transformation pour les performances et considérer les sprites pour les temps de chargement initiaux optimaux. Choisissez l'approche qui équilibre les performances, la maintenabilité et la familiarité du développeur.

(Les URL de l'image n'ont pas été incluses dans la sortie car elles n'ont pas été fournies dans un format facilement utilisable. Remplacez les espaces réservés par vos URL d'image réelles.)

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!