Share
Popmotion est une bibliothèque d'animation JavaScript fonctionnelle. Par rapport à d’autres bibliothèques telles que GreenSock ou Anime.js, Popmotion est de bas niveau et sans opinion..
Il intègre une tonne de fonctionnalités, telles que la physique du printemps et le suivi du pointeur, dans une très petite taille de fichier (11.5kb).
Il permet aux développeurs d'écrire leurs propres fonctionnalités à l'aide de fonctions simples, plutôt que d'attendre que l'auteur de la bibliothèque les ajoute..
Cela signifie également qu'il est tout aussi facile d'animer des objets 3D, des graphiques ou des composants React que d'animer des éléments DOM ou SVG..
Cette flexibilité peut rendre la courbe d'apprentissage initiale plus abrupte que pour les autres bibliothèques. Dans cette série de tutoriels, nous allons donc apprendre les bases des puissantes animations de Popmotion. Nous allons commencer par le cheval de bataille du monde de l'animation, le interpolation.
Popmotion prend en charge diverses méthodes d’installation. En production, je recommande l'installation via npm, car cela vous permet d'importer uniquement les bits dont vous avez besoin, ce qui vous permet d'économiser de l'espace..
Cependant, pour ce tutoriel, vous pouvez suivre ce CodePen, qui a été configuré avec la dernière version de Popmotion..
Pour ceux qui ne sont pas familiers, une interpolation entre un nombre et un autre sur une durée prédéterminée. Si vous avez utilisé une transition CSS, Popmotion interpolation la fonction fonctionne exactement de la même manière.
Nous pouvons importer interpolation ainsi:
const tween = popmotion;
Par défaut, interpolation s'anime entre 0 et 1 sur une durée de 300 millisecondes. Si vous ouvrez votre console, vous pouvez le tester vous-même:
Accentsconagua
tween (). start (update: v => console.log (v), complete: () => console.log ('complete!'));Mais nous ne voulons pas animer la console, nous voulons animer la balle. Pour cela, Popmotion inclut une autre fonction, styler.
Remarque: Dans ce premier exemple, nous avons défini à la fois le mettre à jouret Achevée les fonctions. Mais si vous fournissez début avec une seule fonction, il sera automatiquement assigné à mettre à jour.
styler est utilisé pour créer des interfaces get / set pour les styles HTML et SVG optimisées pour une utilisation avec des animations (à partir de n'importe quelle bibliothèque!).
Dans l'exemple ci-dessus, interpolation est en train de sortir un nombre, donc nous pourrions bien sûr régler l'opacité de la balle comme ceci (essayez-le):
const ball = document.querySelector ('. ball'); tween (). start (v => ball.style.opacity = v);toutefois, styler a les avantages suivants:
transformer les accessoires à définir individuellement, ce qui permet l'animation indépendante d'accessoires comme échelle et translateX.translateX (par exemple) sans ajouter 'px'.Vous n'êtes pas non plus limité à l'utiliser dans une animation. Vous pouvez définir manuellement le style d'un élément pendant que d'autres sont en cours d'animation. Le changement sera automatiquement planifié et mis en lot avec les autres..
Alors importons-le:
const tween, styler = popmotion;
Créez le styleur de balle:
const ballStyler = styler (balle);
Maintenant nous pouvons utiliser BallStyler définir et animer les propriétés de la balle. ballStyler.set est flexible. Il peut définir une seule propriété:
ballStyler.set ('arrière-plan', '# f00');Ou plusieurs propriétés:
ballStyler.set (x: 100, y: 100);
Nous voulons animer opacité pour l'instant, changeons donc notre animation:
tween (). start (v => ballStyler.set ('opacity', v));ensemble peut aussi être au curry. En lui fournissant simplement un nom de propriété, il retournera une fonction de définition pour cet accessoire. Nous pouvons donc régler ce qui précède en écrivant:
tween (). start (ballStyler.set ('opacité'));Jusqu'ici, nous avons seulement animé la balle en utilisant la valeur par défaut interpolation Propriétés. Voyons à quel point un interpolation peut être.
interpolation accepte un argument optionnel, un objet de propriétés d'interpolation. Jetons un coup d'oeil à certains des accessoires les plus couramment utilisés:
de/à UNE interpolation peut être entre deux états quelconques. Nous définissons ces avec de et à.
Animons translateX en réécrivant 'opacité' à 'X'. Puis passe de et à les accessoires:
tween (de: 0 à: 300)
Votre balle se déplace maintenant de gauche à droite par 300px.
Cependant, j'ai dit qu'un interpolation peut être entre deux États, pas seulement des chiffres. Si nous fournissons de et à objets de nombres et / ou couleurs, nous pouvons animer plusieurs propriétés à la fois.
Essaye ça:
tween (from: x: 0, background: '# 198FE3', à: x: 300, background: '# FF1C68'). start (ballStyler.set);
C'est un moyen facile d'animer plusieurs accessoires simultanément.
durée est défini en millisecondes. Par défaut, une interpolation prendra 300 ms, mais si nous définissons durée à 1000, ça va prendre une seconde:
tween (durée: 1000, de: 0 à: 300). start (ballStyler.set ('x'));Les fonctions d'accélération sont utilisées dans l'interpolation pour modifier le taux de mouvement tout au long de l'animation.
Dans la vie réelle, les objets ne démarrent ni ne s'arrêtent à la vitesse cible. En fonction de l’objet, ils accélèrent ou ralentissent progressivement, ou les deux.
Une fonction d'accélération fonctionne simplement en prenant la progression de l'interpolation, définie comme un nombre entre 0 et 1, et retourner un nouveau.
Vous n'avez pas besoin de savoir comment utiliser ces fonctions, car Popmotion vous en fournit de nombreuses.
Importez-les:
const easing, tween, styler = popmotion;
Par défaut, facilité est réglé sur easing.easeOut. Quand une fonction disparaît, cela signifie commence vite et finit lentement.
Cela a été choisi par défaut, car j’estime que la plupart des animations dans les interfaces utilisateur doivent être initialisées. à la suite d'une action de l'utilisateur. En commençant rapidement et en finissant lentement, l’utilisateur aura l’impression de transmettre son énergie, via son robinet ou son clic, directement dans l’interface. Il se sent vif, vivant et réactif.
Pour de nombreuses animations éloignées de l'entrée de l'utilisateur, ou de leur propre chef, il peut sembler un peu moins choquant d'utiliser une animation qui facilite, comme easing.easeInOut ou assouplir.anticiper, qui fait un coup sec avant d’animer.
Enfin, il y a la assouplir.cubiqueBézier function, qui crée une nouvelle fonction d'accélération basée sur une courbe d'accélération, à l'instar des transitions CSS. Ceci fournit un degré énorme de contrôle et de flexibilité sur votre mouvement.
Essayez d’appliquer certaines de celles-ci à votre animation tout en jouant avec durée pour voir comment cela affecte la sensation et le caractère de celui-ci.
Les animations peuvent être répétées de trois manières différentes: boucle, yo-yo, et retourner.
Boucle commence l'animation depuis le début. Yo-yo reflète l'interpolation en l'exécutant à l'envers. Et retourner l'exécute à l'envers etretourne la fonction d'accélération.
L'un de ceux-ci peut être défini par interpolation, et chacun est défini comme un nombre indiquant le nombre de répétitions de l'animation. Pour répéter pour toujours, il suffit de passer Infini:
tween (yoyo: Infinity, de: 0 à: 300). start (ballStyler.set ('x'));Quand une interpolation est démarrée, elle renvoie les contrôles de lecture que nous pouvons utiliser pour contrôler cette animation..
const controls = tween (). start (console.log);
Dans l'exemple ci-dessus, les contrôles aura accès à toutes ces méthodes de lecture, comme Arrêtez, pause, et CV:
const controls = tween (durée: 1000, de: 0 à: 300). start (ballStyler.set ('x')); setTimeout (() => controls.stop (), 500);Nous pouvons utiliser ces contrôles de lecture pour pause et alors chercher à travers l'interpolation:
const controls = tween (durée: 1000, de: 0 à: 300). start (ballStyler.set ('x')); controls.pause (); controls.seek (0,5);Avec cela, nous pouvons créer une animation scrubbable! Dans un prochain tutoriel, nous verrons comment utiliser Popmotion aiguille fonction pour créer une barre de défilement, mais pour le moment, vous pouvez en nettoyer un interpolation avec une seconde interpolation, pour voir cela en action:
const controls = tween (de: 0 à: 300). start (ballStyler.set ('x')); controls.pause (); tween (duration: 1000) .start (controls.seek);Pour des transitions simples, de A à B, interpolation est excellente. Popmotion fournit une autre fonction appelée images clés.
Importons-le maintenant:
const images clés, assouplissement, interpolation, styler = popmotion;
images clés tweens à travers unsérie linéaire d'états. Nous fournissons ces états à ses valeurs propriété:
images clés (valeurs: [0, -150, 150, 0], durée: 2000). start (ballStyler.set ('x'));Comme interpolation, nous pouvons aussi définir ces états comme des objets. Donc, pour déplacer la balle dans un carré, nous pouvons écrire:
images clés (valeurs: [x: 0, y: 0, x: -150, y: -150, x: -150, y: 150, x: 150, y: 150, x: 150, y: -150, x: 0, y: 0], durée: 2000). start (ballStyler.set);
Par défaut, images clés allouera à chacun de ces tweens une part égale de l'ensemble durée.
En fournissant un fois tableau, nous pouvons marquer chacun de ces états avec un nombre entre 0 et 1. 0 représente le début de l'animation, et 1 représente la fin:
images clés (valeurs: [0, -150, 150, 0], fois: [0, 0,1, 0,9, 1], durée: 2000). start (ballStyler.set ('x'));De cette façon, nous pouvons ajuster la durée de l'animation sans avoir à remarquer chaque segment.
Il permet également à chaque animation d’être assouplie individuellement avec le assouplissements propriété:
images clés (valeurs: [0, -150, 150, 0], fois: [0, 0.1, 0.9, 1], accélérations: [easing.easeIn, easing.linear, easing.easeOut], durée: 2000). commencer (ballStyler.set ('x'));Parce que images clés est juste un interpolation, nous pouvons ajuster sa lecture globale avec toutes les mêmes propriétés comme facilité et boucle, et le contrôler avec les mêmes méthodes que nous avons appris plus tôt.
le interpolation et images clés les fonctions vous permettent de créer des animations simples et complexes.
styler apporte ses propres avantages, comme une utilisation en dehors des animations, la standardisation des modèles de transformation CSS et SVG et le rendu par lots pour des performances d'animation élevées.
Dans ce tutoriel, nous n'avons couvert que quelques-unes des animations proposées par Popmotion. Dans le prochain épisode, nous allons explorer le suivi des pointeurs et les animations basées sur la vélocité comme la physique et printemps.
Les animations basées sur Velocity peuvent être utilisées pour créer des interfaces utilisateur naturelles qui réagissent de manière réaliste aux entrées de l'utilisateur. On se voit là-bas!
