Vue Amsterdam 2022 : Partie VII - Animer avec Vue

Accueillir! Heureux de vous voir dans la septième partie de ma série de résumés Vuejs Amsterdam Conference 2022, dans laquelle je partage avec vous un résumé de toutes les discussions.

Vous pouvez lire ma série de résumés de la JSWorld Conference 2022 (en quatre parties) ici , où j'ai résumé toutes les discussions de la première journée. Vous pouvez également retrouver les précédents Talks de la conférence Vue Amsterdam 2022 sur mon blog.

(Récurrent) Présentation

Après deux ans et demi, JSWorld et Vue Amsterdam Conference étaient de retour au Theater Amsterdam entre le 1er et le 3 juin, et j'ai eu la chance d'assister à cette conférence pour la première fois. J'ai appris beaucoup de choses, rencontré beaucoup de gens formidables, parlé avec de grands développeurs et passé un bon moment. Le premier jour, la Conférence JSWorld a eu lieu, et les deuxième et troisième jours, la Vue Amsterdam.

La conférence a été pleine d'informations avec d'excellents orateurs, chacun d'entre eux m'a appris quelque chose de précieux. Ils voulaient tous partager leurs connaissances et leurs informations avec d'autres développeurs. J'ai donc pensé que ce serait formidable si je pouvais continuer à le partager et aider les autres à l'utiliser.

Au début, j'ai essayé de partager quelques notes ou diapositives, mais je trouvais que ce n'était pas assez bon, du moins pas aussi bon que ce que l'orateur partageait avec moi. J'ai donc décidé de revoir chaque discours, de les approfondir, de rechercher, de prendre des notes et de les combiner avec leurs diapositives et même leurs mots exacts dans leur discours, puis de le partager avec vous afin que ce que je partage avec vous soit au moins à au même niveau que ce que j'ai appris d'eux.

Un point très important

Tout ce que vous lisez au cours de ces quelques articles est le résultat de l'effort et du temps de l'orateur lui-même, et j'ai seulement essayé de les apprendre pour pouvoir les transformer en ces articles. Même la plupart des phrases écrites dans ces articles sont exactement ce qu'elles ont dit ou ce qu'elles ont écrit dans Slides. Cela signifie que si vous apprenez quelque chose de nouveau, c'est grâce à leurs efforts.

Enfin et surtout, je ne peux pas creuser dans tous les détails techniques ou les codages en direct dans certains des discours. Mais si vous êtes intéressé et avez besoin de plus d'informations, faites-le moi savoir et j'essaierai d'écrire un article plus détaillé séparément. Aussi, n'oubliez pas de consulter leur Twitter/Linkedin.

Vous trouverez ici le programme de la conférence.

Animer avec Vue

Ramona Biscoveanu - Développeur Frontend chez SAP

Parfois, nos applications ont besoin d'un peu de "wow" et nous pouvons le faire avec un peu de "mouvement" juste la quantité parfaite pour les rendre plus vivantes.

Nous verrons comment utiliser la magie Vue pour créer des animations impressionnantes, des plus simples aux plus complexes, en combinant Vue avec des bibliothèques d'animation.

Sites Web des années 90

Sur les sites Web des années 90, il y avait parfois beaucoup de mouvements et de couleurs. Mais la seule façon dont nous pouvions avoir des animations à l'époque était avec des gifs. Imaginez la bande passante consommée par ces gifs à l'ère de l'Internet commuté ! Nous nous retrouvons donc avec quelques minuscules gifs low-frame pour limiter la consommation de bande passante, et voici le résultat :

Pourquoi animer ?

L'une des raisons pour lesquelles nous utilisons des animations de nos jours, même à l'époque, est de capter l'attention et la concentration des utilisateurs. Pensez au nombre de distractions que nous avons, aux notifications sur nos téléphones, aux fenêtres contextuelles sur les sites Web ou aux icônes de saut sur le dock de macOS.

Nous pouvons également faire croire aux utilisateurs que notre site Web est beaucoup plus rapide. Nous leur donnons cette perception que nos API sont plus rapides en mettant des chargeurs et des barres de progression. Des études indiquent que si vous avez un chargeur personnalisé, vous avez une chance de garder les gens sur notre site Web plus longtemps.

Parfois, nous essayons d'informer efficacement nos utilisateurs. Peut-être que nous avons beaucoup de choses qui se passent sur notre site Web et nous voulons dire à l'utilisateur quelle est la prochaine étape dans le flux de l'application avec un bouton animé.

D'autres fois, nous avons besoin de contenu interactif pour les supports marketing afin de garder les utilisateurs là-bas.

Les animations sont également puissantes lorsque vous essayez de raconter une histoire.

Vue <Transition />

Dans Vanilla JavaScript ou jQuery, vous devez calculer manuellement les délais et les délais, et décider quand ajouter ou supprimer des classes. Mais dans Vue, nous encapsulons l'élément cible dans le composant <Transition /> et il fait automatiquement beaucoup de ces choses difficiles. Voici une animation de fondu simple :

 <transition name="fade"> <p v-if="show">hello</p> </transition>

 .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter-from, .fade-leave-to opacity: 0; }

Voici comment Vue gère cela :

Vue <TransitionGroup />

<TransitionGroup> est un composant intégré conçu pour animer l'insertion, la suppression et le changement d'ordre d'éléments ou de composants rendus dans une liste.

Voici un exemple simple de tuiles glissant sur l'écran :

 <transition-group tag="div" class="tile-section" name="list" appear> <TileComp v-for="(tile, i) in tiles" :key="i + 'tile'" :header="tile.title" :content="tile.content" :footer="tile.footer" ></TileComp> </transition-group>

 .list-enter-active, .list-leave-active { transition: all 1s ease; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(70px); } 

Crochets JavaScript

CSS est génial et nous pouvons faire beaucoup avec, mais parfois ce n'est pas suffisant.

Vue fournit quelques crochets sur le composant <Transition /> .

 <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @enter-cancelled="onEnterCancelled" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @leave-cancelled="onLeaveCancelled" > <!-- ... --> </Transition>

GreenSock GSAP

La plate-forme d'animation GreenSock ( GSAP en abrégé) est une puissante bibliothèque JavaScript qui permet aux développeurs et concepteurs frontaux de créer des animations robustes basées sur la chronologie.

L'une des choses les plus importantes que vous entendrez souvent dans GSAP est Tween.

Un Tween est ce qui fait tout le travail d'animation - pensez-y comme un setter de propriétés hautes performances. Vous introduisez des cibles (les objets que vous souhaitez animer), une durée et toutes les propriétés que vous souhaitez animer et lorsque sa tête de lecture se déplace vers une nouvelle position, elle détermine quelles doivent être les valeurs de propriété à ce stade et les applique en conséquence.

Méthodes courantes de création d'un Tween (toutes ces méthodes renvoient une instance de Tween) :

• gsap.to()

• gsap.from()

• gsap.fromTo()

  
  

Pour des animations simples (pas de séquencement fantaisiste), les méthodes ci-dessus sont tout ce dont vous avez besoin !

 gsap.to(".selector", {toVars}); gsap.from(".selector", {fromVars}); gsap.fromTo(".selector", {fromVars}, {toVars}); // special properties (duration, ease, etc.) go in toVar

Ajoutons maintenant GSAP à notre exemple de tuiles :

 <div class="tile-section"> <TileComp v-for="(tile, i) in tiles" :key="i + 'tile'" :header="tile.title" :content="tile.content" :footer="tile.footer" ></TileComp> </div>

 import gsap from "gsap"; ... mounted() { gsap.from(".tile", { duration: 0.5, opacity: 0, scale: 0, y: 200, ease: "power2", stagger: 0.1, }); }, 

Compteur d'animation Vue

Un autre exemple simple d'utilisation de GSAP pour créer de belles animations peut être une animation de compteur de célébration. Ici vous pouvez voir à quoi cela ressemblera :

Tout ce que nous avons dans le modèle est juste un élément h1 où nous passons la valeur formatée et un bouton de réinitialisation.

 <div> <h1 ref="celebrate" class="counter" :class="{ celebrate: isCelebrate }"> {{ this.numberWithCommas(value) }} </h1> <button class="restart" @click="restart">Restart</button> </div>

Nous devons utiliser la fonction de timeline de GSAP. Considérez-le comme un outil pour séquencer vos animations.

 import gsap from "gsap"; import confetti from "canvas-confetti"; const tl = gsap.timeline(); const start = 100000; const end = 3240074; export default { props: { msg: String, }, data() { return { isCelebrate: false, value: start, }; }, mounted() { tl.fromTo( ".counter", { innerText: start, scale: 0.8, }, { innerText: end, snap: { innerText: 1 }, duration: 4, ease: "linear", onUpdate: () => { this.$refs.celebrate.innerText = this.numberWithCommas( this.$refs.celebrate.innerText ); }, onComplete: () => { this.celebrate(); }, } ); }, methods: { celebrate() { this.isCelebrate = true; confetti({ particleCount: 150, spread: 100, origin: { y: 0.6 }, colors: ["#647eff", "#42d392"], disableForReducedMotion: true, }); }, numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }, restart() { tl.restart(); this.isCelebrate = false; }, }, };

Transition de page

Dans Vue Router 4, la syntaxe des pages de transition a un peu changé. Nous n'enveloppons plus le routeur dans le composant de transition. à la place, nous utilisons le v-slot :

 <router-view v-slot="{ Component }"> <transition name="fade"> <component :is="Component" /> </transition> </router-view>

Voici un exemple de transition de page :

Pour construire cette transition de page, nous avons besoin du hook enter :

 <router-view v-slot="{ Component }"> <transition :key="$route.path" @enter="onEnter" :css="false" > <component :is="Component" /> </transition> </router-view>

Ensuite, nous devons enregistrer le plugin SplitText de GSAP :

 import gsap from "gsap"; import SplitText from "gsap/SplitText"; gsap.registerPlugin(SplitText); gsap.defaults({ duration: 1, ease: "power3.inOut", });

Et puis en utilisant le plugin nous divisons le texte pour pouvoir l'animer :

 mySplitText(el) { return new SplitText(el, { type: "words,chars,lines" }); },

Jetons un coup d'œil au hook onEnter :

 onEnter(el, done) { const masterTL = gsap.timeline({ onComplete: () => { done; }, }); masterTL.add( this.enterContentTextAnimation( mySplitText(".content-text-header").chars ) ); masterTL.add( this.enterContentTextAnimation(".content-text-body"), "-=0.9" //overlap with previous by 0.9s ); masterTL.add(this.imgScaleOut(".content img"), "<"); //The start of previous animation },

Et ici, vous pouvez voir comment imbriquer des chronologies GSAP et ce que font les fonctions enterContentTextAnimation et imgScaleOut :

 enterContentTextAnimation(id) { const tl = gsap.timeline(); tl.fromTo( id, { yPercent: "100", opacity: 0, }, { yPercent: "0", opacity: 1, stagger: 0.03, } ); }, imgScaleOut(id) { const tl = gsap.timeline(); tl.from(id, { scale: 1.5, }); return tl; },

SVG

Les graphiques animés peuvent être un bon exemple d'animation SVG :

Voici la partie du code qui rend cette animation graphique possible :

 watch: { data(newValue, oldValue) { newValue.map((data, index) => { var id = "#arc" + index; var d = this.calculateArc(data, index); var oldValueD = this.calculateArc(oldValue[index]); const tl = gsap.timeline(); tl.fromTo( id, { attr: { d: oldValueD }, }, { duration: 0.5, attr: { d: d }, yoyo: true, } ); }); }, },

Il est important de ne pas abuser des animations sur votre site Web. Parfois, ils sont utiles, mais parfois ils peuvent tuer votre public.

Fin du septième discours

J'espère que vous avez apprécié cette partie et qu'elle peut être aussi précieuse pour vous qu'elle l'était pour moi.

Au cours des prochains jours, je partagerai le reste des discussions avec vous. Restez à l'écoute…