Bounce.js: Créez rapidement des animations CSS complexes

Bounce.js: Un outil puissant pour créer facilement des animations CSS lisses

Bounce.js, créé par Joel Besada, est un outil simple et facile à utiliser qui aide les développeurs à générer rapidement des animations CSS lisses et élégantes. Il fait partie de la bibliothèque JavaScript émergente et de l'onde du générateur, simplifiant efficacement le processus de création d'animations complexes.

Image d'Ipythat

javascript - un simple langage de script à l'origine conçu pour améliorer les effets dynamiques des pages Web - a fait de grands progrès depuis sa création en 1995. Inventé par Brendan Eich, co-fondateur de Mozilla, Javascript a progressivement remplacé Adobe Flash au cours des cinq dernières années et est devenu la technologie de choix pour l'animation Web, les jeux et les applications.

La montée en puissance de JavaScript a engendré un nouveau lot de bibliothèques et de générateurs, permettant aux développeurs d'accéder plus facilement aux fonctionnalités d'animation complexes. Bounce.js est l'un d'eux.

Bounce.js vous permet de générer des animations CSS lisses et élégantes via une interface simple, prévisualiser, partager et exporter. Son opération est très intuitive! Si vous aimez les effets d'animation exquis, essayez Bounce.js.

Ensuite, nous explorerons les fonctionnalités et le flux de travail d'animation de Bounce.js et créerons une animation personnalisée. Je crois que vous le trouverez très intéressant!

Interface

L'interface de Bounce.js est concise et claire, ce qui rend le processus de création d'animation très simple.

à gauche se trouve la liste des composants où vous pouvez ajouter divers effets à la chaîne d'animation et effectuer des ajustements. Il fournit également une gamme de préréglages d'animation que vous pouvez afficher et modifier, en gagnant du temps sur l'ajout de composants. Le préréglage d'animation «Road Runner» est très intéressant, et le traitement des détails par l'auteur est incroyable. De nombreux préréglages sont disponibles en tant que modèles pour faciliter le mélange d'animations personnalisées et gagner du temps.

Le centre de l'écran est la zone d'aperçu de l'animation, et un carré agit comme un espace réservé pour afficher toutes les actions de l'animation.

Il y a trois boutons sous l'écran d'aperçu: jouer à l'animation, à l'animation en boucle et au ralenti.

La fonction de mouvement au ralenti est particulièrement utile pour une analyse détaillée de la trajectoire de mouvement d'animation.

Chaque animation que vous créez a une URL unique, cliquez sur "Obtenir une URL courte" pour obtenir un lien court.

Avertissement: comme la plupart des générateurs de code, le code bien écrit est souvent bien supérieur au code généré automatiquement. Cependant, l'écriture manuelle peut être plus longue et à forte intensité de main-d'œuvre. Si vous ne prévoyez pas d'ajuster manuellement le code par la suite, il est recommandé de ne pas compter trop relevé sur Bounce.js. Bounce.js utilise fortement les transformations de matrice, ce qui n'est pas le meilleur moyen de toutes les scènes d'animation.

J'ai vécu cela personnellement tout en faisant cette animation. Cependant, votre animation peut ne pas être aussi compliquée que celle-ci, ce qui est une bonne chose. N'oubliez pas: plus la chronologie de l'animation est longue, plus vous générez de code, alors ne la dépassez pas.

Ce sont les bases. L'ensemble du processus n'est pas techniquement compliqué - le reste dépend de votre imagination.

Production originale de la main

Créons une animation personnalisée. Dans l'exemple ci-dessous, je vais montrer comment créer une animation de parachute - le type d'animation exagérée qui est généralement observée dans les dessins animés - de haut en bas.

Dans Bounce.js, l'animation est divisée en "composants". Vous pouvez considérer les composants comme différentes parties d'un mouvement de danse. N'oubliez pas que nous concevons uniquement le comportement de l'animation, pas l'objet qu'il anime, ni l'arrière-plan / étape. Bien sûr, une fois notre action terminée, il est trivial de l'appliquer à n'importe quel objet dans n'importe quel paramètre.

Composant d'animation 1

Q: Que fera le parachutisme après son parachutisme?

A: Bien sûr, ils ouvriront le parachute. Alors, convertissons-le en animation.

La meilleure façon de simuler l'ouverture d'un parachute est d'utiliser le composant Scale . Se référant à la taille d'origine du carré dans l'aperçu, j'ai utilisé la taille d'origine de 0,2 ici, et la taille finale est de 4. Fondamentalement, il devient 20 fois plus grand à la fin de l'animation.

Étant donné que la largeur et la longueur du parachute (hauteur vue d'en haut) sont les mêmes, nous gardons les rapports d'aspect des deux dimensions identiques. Nous sélectionnons l'attribut Bounce pour SEMING car il convient le mieux à nos besoins. En durée, nous spécifions la plage de temps que l'animation doit couvrir. Depuis que le parachute est ouvert très rapidement, je l'ai mis ici pour 2000 millisecondes.

Peu importe l'ordre des composants animés, tous les composants sont activés immédiatement au début de l'animation, donc si vous souhaitez que le composant commence plus tard, vous devez spécifier le retard dans le champ de retard.

CONSEIL: Si vous créez des animations complexes, il est préférable de garder les composants dans le même ordre qu'ils sont activés afin qu'il ne soit pas facilement confus.

Le champ

rebondit > Spécifie le nombre de fois qu'un élément rebondit pendant l'animation. Dans ce cas, j'ai tapé 16, ce qui est un nombre relativement élevé, mais cela a du sens pour l'animation parachute.

Il en va de même pour la valeur

Ridication . Définissons une valeur minimale pour cela.

Composant d'animation 2

Ensuite, nous simulerons le mouvement du parachute, tout comme le vent change son chemin de manière subtile et aléatoire. Pour ce faire, nous utiliserons le composant traduire . J'ai ajouté un mouvement subtil ici (25 unités à droite et 15 unités en bas), ce qui devrait être suffisant. Je recommande d'utiliser à nouveau le rebond comme assouplissement en raison de la douceur de l'animation.

Étant donné que ce composant jouera tout au long de l'animation, je l'ai laissé jouer pendant 20000 ms, ce qui devrait couvrir toute sa longueur. Le parachute se déplacera du début de la chronologie, nous n'avons donc pas besoin de retard ici. Étant donné que les sports de parachute seront plus affectés par le vent, mais plus dur que le premier composant, je lui ai donné 22 rebonces et 3 raideur .

Composant d'animation 3

Enfin, nous ajouterons le dernier composant de l'animation.

Si vous observez le parachutisme par le haut, il apparaîtra évidemment de plus en plus petit en raison du passage du temps et de l'augmentation de la distance.

donc sa taille initiale sera de 1, et la taille à la fin de l'animation est en fait de 0. Insérons ces valeurs pour la largeur et la hauteur.

La durée de l'animation devrait être assez longue ici, évidemment. 25 000 millisecondes suffisent.

Étant donné que ce composant d'animation jouera en même temps que les autres composants (c'est-à-dire pas de retard), nous n'avons pas besoin d'ajouter des effets de rebond ou de rigidité car il hérite du composant précédent. Donc, comme les captures d'écran ici, laissez-les à 0.

Bien sûr, vous pouvez ajuster et mélanger vos résultats à volonté, ce qui n'est qu'un guide approximatif, mais les résultats sont évidemment entre vos mains.

Cependant, vous devriez avoir des résultats similaires par la suite.

Une fois que vous êtes satisfait des résultats, vous pouvez exporter l'animation en tant que CSS et l'utiliser dans votre projet.

Vous pouvez également trouver le référentiel de Bounce.js sur github.

Que pensez-vous?

Avec l'avènement de nombreuses nouvelles approches innovantes des sites Web de conception et d'animation, des générateurs comme Bounce.js sont très pratiques, en particulier pour vous éviter de vous précieux pour écrire manuellement un tel code d'animation.

Essayez-le et publiez votre expérience dans la section des commentaires. Nous serions ravis de connaître vos résultats!

Des questions fréquemment posées sur Bounce.js

Comment installer Bounce.js dans mon projet?

Pour installer Bounce.js, vous pouvez utiliser NPM ou Bower. Si vous utilisez NPM, vous pouvez utiliser la commande npm install bounce.js pour l'installer. Pour Bower, utilisez la commande bower install bounce.js. Une fois installé, vous pouvez l'inclure dans un fichier HTML à l'aide de balises de script.

Puis-je utiliser Bounce.js avec d'autres bibliothèques JavaScript?

Oui, Bounce.js est compatible avec d'autres bibliothèques JavaScript. Il n'interfère pas avec les fonctionnalités d'autres bibliothèques. Vous pouvez l'utiliser avec des bibliothèques comme jQuery, React, Angular et Vue.js.

Comment créer des animations à l'aide de Bounce.js?

Création d'une animation avec Bounce.js implique la création d'un nouvel objet de rebond et l'ajout de composants. Vous pouvez ajouter des composants tels que le zoom, le rotation, la casserole et l'inclinaison. Après avoir ajouté des composants, vous pouvez utiliser la méthode applyTo pour appliquer l'animation aux éléments.

Puis-je contrôler la durée et le retard de l'animation dans Bounce.js?

Oui, Bounce.js vous permet de contrôler la durée et le retard de votre animation. Vous pouvez définir la durée et retarder en utilisant respectivement les méthodes duration et delay. Les valeurs sont en millisecondes.

Comment lier l'animation dans Bounce.js?

Vous pouvez utiliser la méthode chain pour lier l'animation dans Bounce.js. Cette méthode vous permet d'exécuter séquentiellement les animations. Vous pouvez transmettre un tableau d'objets rebondis à la méthode chain pour les relier ensemble.

Puis-je utiliser Bounce.js pour une conception réactive?

Oui, Bounce.js peut être utilisé pour une conception réactive. Les animations créées avec Bounce.js sont évolutives et s'adaptent à différentes tailles d'écran. Vous pouvez également utiliser les requêtes multimédias pour contrôler le comportement des animations sur différents appareils.

Comment arrêter l'animation dans Bounce.js?

Vous pouvez utiliser la méthode stop pour arrêter l'animation dans Bounce.js. Cette méthode arrête l'animation et réinitialise l'élément à son état initial.

Puis-je utiliser Bounce.js pour des animations complexes?

Oui, Bounce.js est capable de créer des animations complexes. Vous pouvez combiner plusieurs composants et lier des animations pour créer des effets complexes. Cependant, cela nécessite une bonne compréhension des bibliothèques et des animations CSS.

Bounce.js est-il compatible avec tous les navigateurs?

Bounce.js est compatible avec la plupart des navigateurs modernes. Cependant, certaines fonctionnalités peuvent ne pas fonctionner dans des navigateurs plus âgés. Il est préférable de tester vos animations dans différents navigateurs pour assurer la compatibilité.

Puis-je utiliser Bounce.js pour des projets commerciaux?

Oui, Bounce.js est open source et est disponible gratuitement pour des projets personnels et commerciaux. Vous pouvez l'utiliser pour créer des animations pour votre site Web, applications, jeux et autres projets.

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!