Vue Amsterdam 2022: Parte VII - Animación con Vue

¡Bienvenidos! Feliz de verlos en la séptima parte de mi serie de resúmenes de Vuejs Amsterdam Conference 2022, en la que comparto un resumen de todas las charlas con ustedes.

Puede leer mi serie de resúmenes de la JSWorld Conference 2022 (en cuatro partes) aquí , donde resumí todas las charlas del primer día. También puede encontrar las charlas anteriores de la conferencia Vue Amsterdam 2022 en mi blog.

(Recurrente) Introducción

Después de dos años y medio, JSWorld y Vue Amsterdam Conference volvieron al Theatre Amsterdam entre el 1 y el 3 de junio, y tuve la oportunidad de asistir a esta conferencia por primera vez. Aprendí muchas cosas, conocí a mucha gente maravillosa, hablé con grandes desarrolladores y la pasé muy bien. El primer día se llevó a cabo la JSWorld Conference, y el segundo y tercer día, la Vue Amsterdam.

La conferencia estuvo llena de información con grandes oradores, cada uno de los cuales me enseñó algo valioso. Todos querían compartir sus conocimientos e información con otros desarrolladores. Entonces pensé que sería genial si pudiera continuar compartiéndolo y ayudar a otros a usarlo.

Al principio, traté de compartir algunas notas o diapositivas, pero sentí que no era lo suficientemente bueno, al menos no tan bueno como lo que el orador compartió conmigo. Así que decidí volver a ver cada discurso, profundizar en ellos, buscar, tomar notas y combinarlos con sus diapositivas e incluso con sus palabras exactas en su discurso y luego compartirlo con ustedes para que lo que les comparto sea al menos al mismo nivel que lo que aprendí de ellos.

Un punto muy importante

Todo lo que lee durante estos pocos artículos es el resultado del esfuerzo y el tiempo del propio hablante, y solo he tratado de aprenderlos para poder convertirlos en estos artículos. Incluso muchas de las oraciones escritas en estos artículos son exactamente lo que dijeron o lo que escribieron en Diapositivas. Esto significa que si aprendes algo nuevo, es gracias a sus esfuerzos.

Por último, pero no menos importante, es posible que no profundice en todos los detalles técnicos o codificaciones en vivo en algunos de los discursos. Pero si está interesado y necesita más información, hágamelo saber e intentaré escribir un artículo más detallado por separado. Además, no olvide consultar su Twitter/Linkedin.

Aquí puede encontrar el programa de la conferencia.

Animando con Vue

Ramona Biscoveanu - Desarrolladora frontend en SAP

A veces, nuestras aplicaciones necesitan un poco de "wow" y podemos hacer esto con un poco de "movimiento" en la cantidad perfecta para hacerlas más vivas.

Veremos cómo usar la magia de Vue para crear animaciones asombrosas, desde las más simples hasta las más complejas, combinando Vue con bibliotecas de animación.

Sitios web de los 90

En los sitios web de los 90, a veces había muchos movimientos y colores. Pero la única forma en que podíamos tener animaciones en ese entonces era con gifs. ¡Imagínese el ancho de banda que consumían esos gifs en la era del acceso telefónico a Internet! Así que terminamos con algunos gifs diminutos de marco bajo para limitar el consumo de ancho de banda, y este fue el resultado:

¿Por qué animar?

Una de las razones por las que usamos animaciones en estos días, incluso en ese entonces, es captar la atención y el enfoque de los usuarios. Piense en cuántas distracciones tenemos, notificaciones en nuestros teléfonos, ventanas emergentes en los sitios web o los íconos que saltan en el muelle en macOS.

También podemos engañar a los usuarios haciéndoles creer que nuestro sitio web es mucho más rápido. Les damos esta percepción de que nuestras API son más rápidas al poner cargadores y barras de progreso. Los estudios dicen que si tiene un cargador personalizado, tiene la posibilidad de mantener a las personas en nuestro sitio web por más tiempo.

A veces tratamos de informar a nuestros usuarios de manera eficiente. Tal vez tenemos muchas cosas sucediendo en nuestro sitio web y queremos decirle al usuario cuál es el siguiente paso en el flujo de la aplicación con un botón animado.

Otras veces necesitamos contenido interactivo para materiales de marketing para mantener a los usuarios allí.

Las animaciones también son poderosas cuando intentas contar una historia.

Vue <Transition />

En Vanilla JavaScript o jQuery, debe calcular manualmente los tiempos y los retrasos, y decidir cuándo agregar o eliminar clases. Pero en Vue, envolvemos el elemento de destino en el componente <Transition /> y hace muchas de esas cosas difíciles automáticamente. Aquí hay una animación de desvanecimiento 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; }

Así es como Vue maneja eso:

Vue <TransitionGroup />

<TransitionGroup> es un componente integrado diseñado para animar la inserción, eliminación y cambio de orden de elementos o componentes que se representan en una lista.

Este es un ejemplo simple de algunos mosaicos deslizándose en la pantalla:

 <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); } 

Ganchos de JavaScript

CSS es increíble y podemos hacer mucho con él, pero a veces no es suficiente.

Vue proporciona algunos ganchos en el componente <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>

Calcetín verde GSAP

GreenSock Animation Platform ( GSAP para abreviar) es una poderosa biblioteca de JavaScript que permite a los desarrolladores y diseñadores front-end crear animaciones sólidas basadas en la línea de tiempo.

Una de las cosas más importantes que escuchará mucho en GSAP es Tween.

Un Tween es lo que hace todo el trabajo de la animación; considérelo como un setter de propiedades de alto rendimiento. Introduces objetivos (los objetos que deseas animar), una duración y cualquier propiedad que desees animar y cuando su cabezal de reproducción se mueve a una nueva posición, determina cuáles deben ser los valores de propiedad en ese punto y los aplica en consecuencia.

Métodos comunes para crear una interpolación (todos estos métodos devuelven una instancia de interpolación):

• gsap.to()

• gsap.desde()

• gsap.fromTo()

  
  

Para animaciones simples (sin secuencias sofisticadas), ¡los métodos anteriores son todo lo que necesita!

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

Ahora agreguemos GSAP a nuestro ejemplo de mosaicos:

 <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, }); }, 

Contador de animación Vue

Otro ejemplo simple del uso de GSAP para hacer buenas animaciones puede ser una animación de contador de celebración. Aquí puedes ver cómo se verá:

Todo lo que tenemos en la plantilla es solo un elemento h1 donde pasamos el valor formateado y un botón de reinicio.

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

Necesitamos usar la función de timeline de tiempo de GSAP. Piense en ello como una herramienta para secuenciar sus animaciones.

 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; }, }, };

Transición de página

En Vue Router 4, la sintaxis para la transición de páginas ha cambiado un poco. Ya no envolvemos el enrutador en el componente de transición. en su lugar, usamos la v-slot :

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

Aquí hay un ejemplo de una transición de página:

Para construir esta transición de página, necesitamos el enlace enter:

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

Luego, debemos registrar el complemento SplitText de GSAP:

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

Y luego, usando el complemento, dividimos el texto para poder animarlo:

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

Echemos un vistazo a onEnter hook:

 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 },

Y aquí puede ver cómo puede anidar líneas de tiempo GSAP y qué hacen las funciones enterContentTextAnimation e 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

Los gráficos animados pueden ser un buen ejemplo de animación SVG:

Aquí está la parte del código que hace posible esta animación de gráfico:

 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, } ); }); }, },

Es importante no abusar de las animaciones en tu sitio web. A veces son útiles, pero a veces pueden matar a tu audiencia.

Fin de la séptima charla

Espero que hayas disfrutado esta parte y que pueda ser tan valiosa para ti como lo fue para mí.

Durante los próximos días, compartiré con ustedes el resto de las charlas. Manténganse al tanto…