Ajoutez GRATUITEMENT des animations attrayantes à votre application Web

Les animations Lottie sont devenues un choix populaire pour ajouter des animations riches et attrayantes aux sites Web et aux applications. Ils sont légers, évolutifs et faciles à mettre en œuvre, ce qui en fait une solution incontournable pour les concepteurs et les développeurs. Dans ce didacticiel, nous explorerons ce que sont les animations Lottie, comment les utiliser et où les obtenir.

Qu'est-ce que Lottie ?

Lottie est une bibliothèque développée par Airbnb qui restitue des animations en temps réel sur le Web et les applications mobiles. Il lit les fichiers JSON exportés depuis Adobe After Effects à l'aide du plugin Bodymovin, permettant d'intégrer facilement des animations complexes sans compromettre les performances.

Pourquoi utiliser Lottie ?

• Léger : par rapport aux fichiers vidéo ou GIF traditionnels, les animations Lottie sont extrêmement petites.
• Évolutive : parce qu'elles sont vectorielles, les animations Lottie restent nettes et claires quelle que soit la taille.
• Multiplateforme : Lottie fonctionne de manière transparente sur différentes plates-formes, notamment le Web, iOS et Android.
• Facile à intégrer : Avec la bibliothèque Lottie, la mise en œuvre d'animations est simple, ne nécessitant que quelques lignes de code.
• Ressources communautaires : Lottie a une communauté active, partageant de nombreuses animations GRATUITEMENT.

Commencer

LottieFiles est une ressource incontournable pour les animations Lottie. Il fournit une vaste bibliothèque d'animations GRATUITES et premium, des outils de création et d'édition d'animations, et même des plugins pour une intégration facile avec de nombreuses plateformes comme vanilaJS, React, VueJS, IOS, Android, etc.

Visitez LottieFiles.com et recherchez dans les catégories pour trouver des animations qui répondent à vos besoins. Téléchargez l'animation qui vous plaît au format JSON.

Ajouter des animations Lottie à votre projet

1. Ajoutez un élément où votre animation apparaîtra :

<canvas id="canvas" width="300" height="300"></canvas>

1. Incluez la bibliothèque Web Lottie et lisez l'animation avec JavaScript :

<script type="module">
  import {DotLottie} from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";

  new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.getElementById("canvas"),
    src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
  });
</script>

Voulez-vous intégrer du HTML ou du Wordpress ?

C'est aussi possible. Voici un exemple d'intégration d'une animation lottie :

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<lottie-player src="https://lottie.host/4c2a69ec-47c3-49ae-b296-8a4770ce5cf5/sl7OhHvAbk.json" background="#FFFFFF" speed="1" style="width: 300px; height: 300px" loop controls autoplay direction="1" mode="normal">
</lottie-player>

Où est l'intégration IOS, Android, React ou Vue.. ?

Pour les autres plateformes, trouvez le joueur de loterie approprié ici.

Conclusion

Les animations Lottie offrent un moyen d'améliorer l'expérience utilisateur avec des animations riches et de haute qualité. Avec des ressources comme LottieFiles.com, intégrer et personnaliser ces animations n'a jamais été aussi simple. Que vous soyez concepteur ou développeur, l'ajout d'animations Lottie à votre boîte à outils peut rehausser vos projets et les faire ressortir.?

Merci d'avoir lu. Pour plus d'articles, vous pouvez vous inscrire à notre newsletter.?

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!