Commencer avec anime.js

anime.js: Explication détaillée de la bibliothèque d'animation JavaScript légère

anime.js est une excellente bibliothèque d'animation JavaScript connue pour sa facilité d'utilisation, ses API concises et ses fonctionnalités puissantes. Il est compact et compatible avec tous les navigateurs modernes, y compris IE / Edge 11. Bien que la documentation soit concise, sa structure est claire et facile à démarrer. Cet article expliquera en détail comment l'utiliser.

Points de base:

• anime.js est une bibliothèque d'animation JavaScript légère et facile à utiliser qui prend en charge les propriétés CSS, les propriétés SVG, DOM et les objets JavaScript, ce qui le rend compétent pour une variété de projets d'animation Web.
• Utilisez anime.js, importez simplement à partir du CDN via des balises de script ou téléchargez directement le fichier de bibliothèque, puis définissez les cibles et les propriétés dans la fonction anime() pour créer l'animation.
• La fonctionnalité de chronologie puissante de l'anime.js permet de synchroniser plusieurs animations, ce qui est particulièrement important pour les séquences d'animation complexes.
• Cette bibliothèque utilise des images clés et des effets entrelacés pour améliorer les détails de l'animation et le contrôle, fournissant aux développeurs des outils pour créer des animations Web dynamiques et visuellement attrayantes.
• Pour créer des animations plus interactives et réactives, Anime.js peut être intégré aux écouteurs d'événements pour déclencher des animations en fonction des actions des utilisateurs (telles que des clics ou des mouvements de souris), améliorant ainsi l'engagement des utilisateurs sur la page Web.

débutant de l'anime.js:

Tout d'abord, téléchargez et incluez le fichier anime.js dans votre page HTML:

<!-- 下载后引入 -->
<🎜>

ou, utilisez la dernière version sur CDN:

<!-- 使用CDN -->
<🎜>

Créez une animation, utilisez la fonction anime(), qui accepte un objet comme paramètre et décrit tous les détails de l'animation dans cet objet:

let myAnimation = anime({
  /* 动画细节 */
});

Les attributs d'animation sont divisés en quatre catégories:

• cibles: Référence de l'élément à l'animation. Il peut s'agir d'un sélecteur CSS (div, #square, .rectangle), d'un nœud Dom ou d'une liste de nœuds, ou d'un objet JavaScript pur. Il peut également s'agir d'une combinaison de tableaux des types ci-dessus.
• Propriétés: Propriétés qui peuvent être animées, y compris les attributs CSS, les attributs d'objet JavaScript, les attributs DOM et les attributs SVG.
• Paramètres de propriété: Paramètres liés aux propriétés, telles que la durée, le retard, les fonctions d'assouplissement, etc.
• Paramètres d'animation: Paramètres liés à l'animation, tels que la direction, la boucle, etc.

Exemple pratique:

let animation = anime({
  targets: 'div', // 目标
  translateX: 100, // 属性
  borderRadius: 50, // 属性
  duration: 2000, // 属性参数：持续时间 2 秒
  easing: 'linear', // 属性参数：线性缓动
  direction: 'alternate' // 动画参数：交替方向
});

(Le lien d'échantillon de codepen sera ici)

Dans cet exemple:

1. Nous choisissons un carré vert (Div stylisé).
2. Nous le déplaçons à 100 pixels vers la gauche tout en le convertissant en cercle.
3. Nous avons réglé cela pour se produire en douceur en deux secondes (signifie linéaire qu'aucun soulagement n'est appliqué à l'animation).
4. En définissant la propriété de direction pour alterner, nous demandons à l'élément div de retourner sa position et sa forme initiales une fois l'animation terminée. Anime.js le fait en jouant des animations à l'envers.

Veuillez noter que lors de la spécification des valeurs de propriété, nous n'avons pas besoin d'utiliser des unités. Si la valeur d'origine a des unités, elle est automatiquement ajoutée à la valeur d'animation. Cependant, si vous souhaitez utiliser une unité spécifique, vous devez l'ajouter explicitement.

Animation plus complexe:

Voici quelques exemples d'animation plus complexes, y compris l'animation swing, l'animation à batterie et les animations à l'aide de images clés et de chronologies. (Les exemples de liens de codePen et les extraits de code correspondants seront inclus ici, et le code sera expliqué en détail, similaire à la structure du document d'origine)

Conclusion:

anime.js est un moteur d'animation simple et puissant qui peut être utilisé pour créer une grande variété d'animations. J'espère que cet article peut vous aider à mieux comprendre et utiliser Anime.js. (Vous pouvez ajouter des informations supplémentaires sur le développement futur de l'anime.js ou des ressources connexes ici)

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!