Introduction à Popmotion pointeurs et physique

Bienvenue dans la série de didacticiels Introduction à Popmotion. Dans la première partie, nous avons découvert comment utiliser les interpolations et les images clés pour créer des animations précises et planifiées dans le temps..

Dans la partie 2, nous allons examiner le suivi des pointeurs et les animations basées sur la vitesse.

Le suivi du pointeur nous permet de créer des étagères de produits, des curseurs de valeur personnalisés ou des interfaces à glisser.

Les animations basées sur la vélocité sont différentes des animations basées sur le temps comme les interpolations en ce sens que la propriété principale qui affecte le comportement de l'animation est rapidité. L'animation elle-même peut prendre n'importe quelle quantité de temps.

Nous allons regarder les trois animations basées sur la vélocité dans Popmotion, printemps, pourriture, et la physique. Nous allons utiliser le rapidité de l'animation de suivi du pointeur pour démarrer ces animations, et cela va montrer comment des animations basées sur la vélocité peuvent créer des interfaces utilisateur attrayantes et ludiques d'une manière que les animations basées sur le temps ne peuvent tout simplement pas.

Tout d’abord, ouvrez ce CodePen pour jouer.

Suivi du pointeur

Popmotion fournit le aiguille fonction pour suivre et afficher les coordonnées d'une souris ou d'un pointeur tactile unique.

Importons cela avec styler, ce qui nous permettra de définir la position de la balle.

const pointeur, styler = popmotion; const ball = document.querySelector ('. ball'); const ballStyler = styler (balle);

Pour cet exemple, nous voulons faire glisser la balle. Ajoutons un événement qui affichera la position du pointeur sur la balle:

laisser pointerTracker; const startTracking = () => pointerTracker = pointer (). start (ballStyler.set); ; ball.addEventListener ('mousedown', startTracking); ball.addEventListener ('touchstart', startTracking);

Nous voudrons aussi que le code arrête de suivre lorsque nous lâchons le ballon:

const stopTracking = () => pointerTracker && pointerTracker.stop (); document.addEventListener ('mouseup', stopTracking); document.addEventListener ('touchend', stopTracking);

Si vous essayez de faire glisser la balle maintenant, il y a un problème évident. La balle saute quand on la touche! Pas une bonne expérience utilisateur.

C'est parce que, par défaut, aiguille affiche la position du pointeur par rapport à la page.

Pour sortir la position du pointeur par rapport à un autre point, dans ce cas, la transformation x / y de la balle, nous pouvons simplement passer cette position à aiguille comme ça:

const startTracking = () => pointerTracker = pointeur (x: ballStyler.get ('x'), y: ballStyler.get ('y')). start (ballStyler.set); ;

Maintenant, vous avez fait glisser la balle, en très peu de lignes de code! Cependant, lorsque l'utilisateur relâche le ballon, il s'arrête net.

Cela n’est pas satisfaisant: imaginez un carrousel de produits que l’utilisateur peut faire glisser pour les faire défiler. S'il s'arrêtait juste au lieu de défiler, ce serait moins agréable d'utiliser.

Ce serait plus difficile aussi, car l'effort physique nécessaire pour faire défiler le carrousel serait plus important.

Pour activer de telles animations, nous devons d’abord connaître la rapidité de l'objet jeté.

Suivre la vélocité

Popmotion fournit une fonction qui peut nous aider à suivre la vélocité. C'est appelé valeur. Importons cela:

const pointeur, styler, valeur = popmotion;

Pour parler techniquement un instant, toutes les animations de Popmotion sont appelées actes. Les actions sont des flux réactifs de valeurs qui peuvent être démarrés et arrêtés.

UNE valeur est, à l'inverse, un réaction. Il ne peut pas être arrêté ou commencé. Il répond juste passivement quand son mettre à jour méthode est appelée. Il peut garder une trace des valeurs et peut être utilisé pour interroger leur vitesse.

Donc, après avoir défini BallStyler, définissons un nouveau valeur pour ballXY:

const ballXY = valeur (x: 0, y: 0);

N'importe quand ballXY mises à jour, nous voulons mettre à jour BallStyler. Nous pouvons passer un deuxième argument à valeur, une fonction qui s'exécutera à chaque fois ballXY mises à jour:

const ballXY = valeur (x: 0, y: 0, ballStyler.set);

Maintenant, nous pouvons réécrire notre aiguille mettre à jour ballXY au lieu de ballStyler.set:

const startTracking = () => pointeur (ballXY.get ()) .start (ballXY); ;

Maintenant, à tout pointeur, nous pouvons appeler ballXY.getVelocity () et nous recevrons les vitesses des deux X et y, prêt à être branché à nos animations basées sur la vélocité.

Animations basées sur la vélocité

printemps

La première animation basée sur la vélocité à présenter est printemps. Il est basé sur les mêmes équations que celles qui régissent CASpringAnimation d'Apple, l'animation printanière qui se cache derrière tout ce qui se passe sur iOS..

Importation:

const pointeur, ressort, styler, valeur = popmotion;

Maintenant, modifiez arrêter le suivi de sorte qu'au lieu d'arrêter le pointeurTracker animation, il commence une printemps animation comme celle-ci:

const stopTracking = () => spring (from: ballXY.get (), vélocité: ballXY.getVelocity (), jusqu'à: 0, rigidité: 100, amortissement: 20). start (ballXY);

Nous lui fournissons la position actuelle de la balle, sa vitesse et une cible, et la simulation est exécutée. Cela change en fonction de la manière dont l'utilisateur a lancé la balle.

La bonne chose à propos des ressorts, c'est qu'ils sont expressifs. En ajustant le Masse, rigidité et amortissement propriétés, vous pouvez vous retrouver avec des sensations de printemps radicalement différentes.

Par exemple, si vous ne changez que le rigidité dessus de 1000, vous pouvez créer un mouvement qui ressemble à une capture d'énergie. Puis, en changeant Masse à 20, vous créez un mouvement qui ressemble presque à la gravité.

Il existe une combinaison qui vous semblera appropriée et satisfaisante pour vos utilisateurs, et adaptée à votre marque, dans presque toutes les circonstances. En jouant avec des ressorts différents, vous pouvez communiquer des sentiments différents, comme un claquement de fond strict ou un rebond affirmatif plus doux..

pourriture

le pourriture animation, comme son nom l'indique, désintégration la vitesse fournie de sorte que l'animation ralentit progressivement jusqu'à un arrêt complet.

Cela peut être utilisé pour créer l’effet de défilement d’élan trouvé sur les smartphones, comme ceci:

Importer le pourriture une fonction:

const decay, pointeur, ressort, styler, valeur = popmotion;

Et remplace le arrêter le suivi fonctionner avec ce qui suit:

const stopTracking = () => decay (from: ballXY.get (), vélocité: ballXY.getVelocity ()). start (ballXY);

pourriture calcule automatiquement une nouvelle cible en fonction de la de et rapidité les accessoires.

Il est possible d'ajuster la sensation de décélération en jouant avec les accessoires décrits dans les documents liés ci-dessus, mais, contrairement à printemps et la physique, pourriture est conçu pour fonctionner hors de la boîte. 

la physique

Enfin, nous avons le la physique animation. C'est le couteau suisse de Popmotion, qui propose des animations basées sur la vélocité. Avec cela, vous pouvez simuler:

• vitesse constante
• accélération
• les ressorts
• friction

printemps et pourriture offre un mouvement ultra précis et une plus grande variété de "sensations". Bientôt, ils seront tous les deux aussi scrubbable.

Mais les deux sont immuable. Une fois que vous avez commencé soit, leurs propriétés sont définies dans la pierre. Parfait pour quand on veut commencer une animation basée sur l'initiale de/rapidité état, mais pas si bon si nous voulons une interaction continue.

la physique, est plutôt un simulation intégrée plus proche de celui d'un jeu vidéo. Cela fonctionne, une fois par image, en prenant l’état actuel, puis en le modifiant en fonction des propriétés actuelles à ce moment-là..

Cela lui permet d'être mutable, ce qui signifie que nous pouvons modifier ces propriétés, ce qui modifie ensuite le résultat de la simulation.

Pour illustrer cela, modifions le lissage classique du pointeur, avec un lissage élastique.

Importation la physique:

const pointeur, ressort, physique, styler, valeur = popmotion;

Cette fois, nous allons changer le commencer le suivi une fonction. Au lieu de changer ballXY avec aiguille, nous allons utiliser la physique:

const startTracking = () => const physicsAnimation = physics (from: ballXY.get (), à: ballXY.get (), vitesse: ballXY.getVelocity (), resteVitesse: faux, frottement: 0.6, springStrength: 400 ) .start (ballXY); ;

Ici, nous mettons de et rapidité comme d'habitude. friction et printempsForce les deux ajustent les propriétés du ressort.

restSpeed: false annule le comportement par défaut de l'animation, qui s'arrête quand le mouvement s'arrête. Nous voulons l'arrêter manuellement dans arrêter le suivi.

En soi, cette animation ne fera rien parce que nous avons défini à, la cible du printemps, au même de. Alors réimplémentons le aiguille suivi cette fois pour changer la cible de printemps la physique. Sur la dernière ligne de commencer le suivi, ajouter:

pointerTracker = pointeur (ballXY.get ()). start ((v) => physicsAnimation.setSpringTarget (v););

Ici, nous utilisons un similaire aiguille animation comme avant. Sauf que cette fois, nous l'utilisons pour changer la cible d'une autre animation. Ce faisant, nous créons ce suivi de pointeur élastique:

Conclusion

Des animations basées sur Velocity associées au suivi de pointeur peuvent créer des interfaces attrayantes et ludiques.

printemps peut être utilisé pour créer une grande variété de sensations de printemps, tout en pourriture est spécialement conçu pour les animations de défilement de momentum. la physique est plus limité que ce soit en termes de configurabilité, mais offre également la possibilité de modifier la simulation en cours, ouvrant de nouvelles possibilités d'interaction.

Dans la dernière et dernière partie de cette série d'introduction à Popmotion, nous allons reprendre tout ce que nous avons appris dans les deux premières parties et les utiliser avec une composition légère et fonctionnelle pour créer une animation scrubbable, ainsi qu'un scrubber à faire. le lavage avec!