Share
L’animation appliquée judicieusement peut améliorer les interfaces des sites Web et, en définitive, l’expérience utilisateur d’un site Web. Dans ce tutoriel, nous allons nous intéresser à VelocityJS, un moteur d’animation JavaScript destiné aux animations rapides. VelocityJS est devenu l’une de mes préférences en matière d’animation sur le Web, pour les raisons suivantes:
Accentsconagua
RunSequence est une méthode dans VelocityJS que nous pouvons utiliser pour exécuter des piles d’animation de manière consécutive. C'est une approche plus élégante que l'enchaînement de fonctions d'animation, comme dans jQuery. Faire cela uniquement avec CSS n'est pas pratique.Dans ce tutoriel, nous allons passer en revue l'essentiel pour réaliser des animations avec VelocityJS. Nous soulignerons également quelques fonctionnalités qui pourraient améliorer la conception de notre interface utilisateur. Alors commençons!
Avec jQuery, en supposant que nous aimerions glisser un div à droite, nous écririons quelque chose comme:
$ ("div"). animate (left: "500px",, duration: 3000, easing: "linear"); À peu près de la même manière, nous l’écririons comme ceci avec VelocityJS:
$ ("div"). vélocité (left: "500px",, durée: 3000, accélération: "linéaire"); Les deux exemples vont déplacer le div par 500px à droite pendant trois secondes en observant l'élément la gauche propriété. La différence visible dans la syntaxe est la méthode utilisée pour animer l'élément, VelocityJS utilise .rapidité() au lieu de jQuery .animer().
Vous pouvez également remarquer l'écart de performance. jQuery animation est parfois quelque peu fragile, alors que VelocityJS fonctionne comme du beurre, du début à la fin. Essayez:
VelocityJS accepte un certain nombre de propriétés CSS ainsi que leur version longue pour manipuler l'élément. Nous pouvons utiliser ces propriétés ensemble dans une seule instance de VelocityJS pour effectuer une animation sophistiquée. Par exemple:
$ ("div"). velocity (borderRadius: "25px", width: "45px", paddingLeft: "0", paddingRight: "0", backgroundColor: "# 8CC152", color: "#fff", borderColor: "# 8CC152", boxShadowX: "0", boxShadowY: "0", duration: 350, easing: "easInQuad"); Dans ce deuxième exemple, nous avons traité le div avec plusieurs propriétés CSS, y compris largeur pour le rendre plus petit, Couleur de fond, rembourrage, boîte ombre, et rayon de la frontière le transformer en cercle.
Notez que les propriétés comprenant deux mots ou plus sont formatées en affaire de chameau format, suivant la convention de nommage JavaScript, donc rayon de la frontière devient borderRadius et ainsi de suite. Nous accélérons également la durée à seulement 350 millisecondes et, cette fois, nous optons pour facilitéInQuad comme VelocityJS a allégement intégré de jQuery UI.
jQuery fournit quelques méthodes pour exécuter des animations courantes, telles que .glisser vers le haut() et .disparaître(), qui font disparaître les éléments progressivement. Il n’est donc pas surprenant que VelocityJS en fasse autant. VelocityJS fournit quelques raccourcis pour passer à un .VelocityJS () exemple.
Nous écririons ce qui suit pour faire glisser un élément afin de dissimuler le contenu:
$ ("div"). velocity ("slideUp", durée: 350); Pour le faire disparaître, nous écririons:
$ ("div"). velocity ("fadeOut", durée: 350); VelocityJS fournit également un raccourci appelé faire défiler qui peut être utile pour créer des liens menant à une section particulière de la page. Le code suivant suppose que nous voulons le lien, #monter, pour revenir au début de la page lorsque vous cliquez dessus.
var $ up = $ ("# go-up"); $ up.on ("click", function () $ ("body"). vélocité ("scroll", durée: 2000, easing: "aisanceBack");); Voici à quoi cela pourrait ressembler:
Un autre raccourci pratique inclus se présente sous la forme de sens inverse. Ce raccourci nous permet de ramener l'élément à son état initial une fois l'animation terminée. Prenant l'exemple de défilement précédent, nous pouvons appliquer sens inverse pour améliorer les icônes fléchées. Pour ce faire, nous chaînons une nouvelle instance VelocityJS avec sens inverse ajouté, fixant le boucle option de vrai.
$ (". icon"). vélocité (translateY: "10px", boucle: true). vélocité ("reverse"); Cela déplacera l'icône vers le bas 10px puis immédiatement de retour à sa position initiale. Comme nous avons également défini le boucle option de vrai l'animation se produira indéfiniment.
Plus d'effets d'animation sont disponibles dans UI Pack. Le pack d'interface utilisateur est disponible sous forme de plug-in, séparément du noyau VelocityJS. Une fois que vous l'avez inclus, vous aurez accès à une gamme d'effets allant au-delà de glisser vers le haut, disparaître, et faire défiler ouvrir un potentiel encore plus grand pour construire des interfaces vivantes.
UI Pack apporte également deux nouvelles options: échelonner et traîne. le échelonner nous permet d'effectuer un seul effet, appliqué à un tableau d'éléments séquentiellement au lieu de simultanément. le traîne option, lorsqu'elle est définie sur true, donne une idée de traînant pour le dernier élément du tableau.
A titre d'exemple, j'ai créé une barre de navigation avec quelques menus, dont un avec un sous-menu. Pour rendre le sous-menu plus attrayant, j'ai appliqué deux effets du pack d'interface utilisateur avec le échelonner ensemble d'options.
À un moment donné, il se peut que nous devions exécuter des animations sur différents éléments en séquence. Pour ce faire, nous devons imbriquer chaque instance de VelocityJS dans l'ordre, par exemple:
$ ("# offcanvas"). vélocité (translateX: 0, durée: 300,, fonction () $ (". widgets"). VelocityJS (translateX: 0, opacité: 0, durée: 300,, function () $ ("# close"). VelocityJS (translationY: 0, rotationZ: 0, durée: 150); La fonction ci-dessus effectuera d’abord l’animation du $ body, puis $ nav une fois terminé, et enfin le $ menu. Malheureusement, ce n'est pas une approche élégante, ni idéale. Si vous avez des dizaines d'animations, le code ne serait pas pratique à gérer.
Cependant, outre les effets d’animation, le pack d’interface utilisateur est fourni avec une méthode appelée RunSequence. Ceci est conçu précisément pour résoudre nos problèmes de séquençage; empiler les animations proprement et les exécuter dans leur ordre approprié. En prenant le code ci-dessus, nous pourrions le réécrire sous forme d'objet JavaScript avec l'élément sélectionné défini dans un e property, les propriétés CSS listées dans un p propriété, tandis que les options d’animation sont définies dans o propriété.
var animationSequence = [e: $ ("# offcanvas"), p: translateX: 0, o: duration: 300, e: $ (". widget"), p: translateX: 0, opacité: 0, o: duration: 300, e: $ ("# close"), p: translationY: 0, rotationZ: 0, o: duration: 150]; $ .Velocity.RunSequence (animationSequence); J'ai étendu le code ci-dessus dans une mise en page hors-réseau fonctionnelle. Donnez-le il y a, et consultez l'onglet JavaScript pour voir le code source complet.fffffff
Je trouve que VelocityJS est une alternative préférable à l’animation jQuery et CSS, en particulier lorsqu’il s’agit de créer des interfaces interactives impliquant plusieurs animations. VelocityJS est facile à utiliser, regorge d’animations prédéfinies, et surtout, il est vite. Utilisez-le de manière responsable. Comme on le dit souvent: avec de grands traits viennent de grandes responsabilités.
