Comment créer des animations et des transitions avec Motion UI

Les animations et les transitions permettent aux concepteurs de visualiser le changement et de différencier le contenu. Les animations et les transitions sont des effets mouvants qui aider les utilisateurs à reconnaître quand quelque chose change Sur le site, par exemple, ils cliquent sur un bouton et une nouvelle information apparaît à l'écran. L'ajout de mouvement aux applications et aux sites Web améliore l'expérience des utilisateurs, car il leur permet de: donner un sens au contenu de manière plus intuitive.

Nous pouvons créer des animations et des transitions à partir de zéro ou en utilisant des bibliothèques ou des frameworks. La bonne nouvelle pour nous, les gens d’avant-garde, est que Zurb, le créateur de Foundation UI, a ouvert en octobre dernier Motion UI en source ouverte, sa bibliothèque d’animation et de transition basée sur Sass..

Il était à l’origine livré avec Foundation for Apps, et maintenant, pour la version autonome, il a été réorganisé, y compris un système de file d'attente d'animation et modèles CSS flexibles. Motion UI alimente également certains composants du framework Foundation, tels que le curseur Orbit, le commutateur Toggler et le modal Reveal. Il s'agit donc d'un outil très robuste..

Commencer

Bien que Motion UI soit une bibliothèque Sass, vous n’avez pas nécessairement besoin de l’utiliser avec Sass, car Zurb fournit aux développeurs un kit de démarrage pratique contenant uniquement le CSS compilé. Vous pouvez le télécharger à partir de la page d'accueil de Motion UI et commencer rapidement à créer un prototype en utilisant l'animation CSS et les classes de transition prédéfinies..

Le kit de démarrage contient non seulement l'interface utilisateur de Motion, mais également le framework Foundation, ce qui signifie que vous pouvez utiliser la grille Foundation et toutes les autres fonctionnalités de Foundation for Sites si vous le souhaitez..

Le kit de démarrage est également livré avec un index.html fichier qui vous permet de tester rapidement le framework.

Si vous avez besoin d'ajustements plus sophistiqués et souhaitez tirer parti des puissants mixins Sass de Motion UI, vous pouvez installer la version complète contenant le code source. .scss fichiers avec npm ou Bower.

La documentation de Motion UI est encore à moitié cuite. Vous pouvez le trouver ici sur Github, ou y contribuer si vous voulez.

Prototypage rapide

Pour démarrer le prototypage, vous pouvez modifier le index.html fichier du kit de démarrage ou créez votre propre fichier HTML. Vous pouvez créer la mise en page à l'aide de la grille Foundation, mais vous pouvez également utiliser Motion UI en tant que bibliothèque autonome sans le framework Foundation..

Il existe 3 principaux types de classes CSS prédéfinies dans Motion UI:

Classes de transition - permettent d'ajouter des transitions, telles que des effets de glissement, de fondu et de pivotement à un élément HTML.
Cours d'animation - vous permettent d'utiliser différents effets de secousses, de tortillements et de rotations
Classes de modificateurs - fonctionnent avec les classes de transition et d'animation et vous permettent de régler la vitesse, le minutage et le retard d'un mouvement.

Construire le HTML

L'avantage des classes CSS prédéfinies est qu'elles ne peuvent pas uniquement être utilisées en tant que classes, mais également en tant qu'autres attributs HTML. Par exemple, vous pouvez ajoutez-les à la valeur attribut du étiquette, ou tu peux utilisez-les dans votre propre coutume Les données-* attribut ainsi que.

Dans l'extrait de code ci-dessous, j'ai choisi cette dernière option pour comportement séparé et classes de modificateur. J'ai utilisé le lent et facilité attributs de modificateur en tant que classes, et créé un personnalisé animation de données attribut pour le scale-in-up transition. le Cliquez moi bouton est destiné à déclencher l'effet.

Lecture d'animations et de transitions avec jQuery

Motion UI comprend également une petite bibliothèque JavaScript pouvant lire des transitions et des animations lorsqu'un événement donné se produit..

La bibliothèque elle-même se trouve dans le kit de démarrage dans la motion-ui-starter> js> fournisseur> motion-ui.js chemin.

Cela crée un MotionUI objet qui a deux méthodes: animateIn () et animateOut (). La transition ou l’animation liée à l’élément HTML particulier (le tag dans notre exemple) peut être déclenché avec jQuery de la manière suivante:

 $ (function () $ (". bouton"). click (function () var $ animation = $ ("# boom"). data ("animation"); MotionUI.animateIn ($ ("# boom") , $ animation);););

Dans l'extrait de code ci-dessus, nous avons accédé à la animation de données attribuer en utilisant la fonction intégrée de jQuery Les données() méthode, appelée alors animateIn () méthode du MotionUI objet.

Voici le code complet et le résultat. J'ai utilisé les classes de boutons intégrées aux frameworks Foundation pour la Cliquez moi bouton, et ajouté quelques CSS de base aussi.

Découvrez le stylet Transition d'échelle simple avec l'interface utilisateur de Zurb Motion par Anna Monus (@amonus) sur CodePen.

Motion UI étant très flexible, vous pouvez également ajouter et déclencher des transitions et des animations de nombreuses autres manières..

Par exemple, dans l'exemple ci-dessus, nous n'avons pas nécessairement besoin d'utiliser le animation de données attribut personnalisé, mais peut simplement ajouter la classe de comportement avec le addClass () méthode jQuery à la élément de la manière suivante:

 $ ('# boom'). addClass ('scale-in-up');

Personnalisation avec Sass

Les classes CSS préconfigurées de Motion UI utilisent des valeurs par défaut qui peuvent être facilement personnalisées à l'aide de Sass. Il existe un mélange Sass derrière chaque transition et animation, qui permet de modifier les paramètres de l’effet. De cette façon, vous pouvez facilement créer une animation ou une transition entièrement personnalisée..

La personnalisation ne fonctionnera pas avec le kit de démarrage, vous devez installer la version Sass si vous souhaitez configurer les effets en fonction de vos propres besoins..

Pour personnaliser une transition ou une animation, vous devez d’abord trouver le mixin correspondant. le _classes.scss fichier contient les noms des classes CSS compilées avec les mixins respectifs.

Dans notre exemple, nous avons utilisé le .scale-in-up attribuer, et en jetant un oeil à _classes.scss, nous pouvons rapidement découvrir qu'il utilise le mui-zoom mixin:

 // Transitions @mixin motion-ui-transitions … // Échelle. Échelle-en-haut @include mui-zoom (in, 0.5, 1); …

Motion UI utilise le mui- préfixe de mixins, et chaque mixin a son propre fichier. Motion UI a des conventions de nommage assez explicites, nous permettant donc de trouver rapidement le mui-zoom mixin dans le _zoom.scss fichier:

 @mixin mui-zoom ($ state: in, $ from: 1.5, $ to: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ duration: null, $ timing: null, $ delay: null) …

En utilisant la même technique, vous pouvez facilement contrôler chaque caractéristique d’une animation ou d’une transition en modifiant les valeurs des variables Sass respectives..

Configuration des classes de modificateurs

Les classes de modificateurs qui contrôlent le comportement (vitesse, cadencement et délai) des animations et des transitions peuvent également être configurées avec Sass en modifiant les valeurs des variables respectives dans le menu déroulant. _settings.scss fichier.

Une fois vos modifications effectuées, Motion UI utiliser les nouvelles valeurs par défaut dans chaque animation et chaque transition, vous n'aurez ainsi pas à configurer les mixins correspondants un par un.