Vue Amsterdam 2022: Parte VII - Animando com Vue

Bem-vindo! Fico feliz em vê-lo na sétima parte da minha série de resumos da Vuejs Amsterdam Conference 2022, na qual compartilho um resumo de todas as palestras com você.

Você pode ler minha série de Resumos da JSWorld Conference 2022 (em quatro partes) aqui , onde resumi todas as palestras do primeiro dia. Você também pode encontrar as palestras anteriores da conferência Vue Amsterdam 2022 em meu blog.

(Recorrente) Introdução

Depois de dois anos e meio, a JSWorld e a Vue Amsterdam Conference estiveram de volta ao Theatre Amsterdam entre 1 e 3 de junho, e tive a oportunidade de participar desta conferência pela primeira vez. Aprendi muitas coisas, conheci muitas pessoas maravilhosas, conversei com grandes desenvolvedores e me diverti muito. No primeiro dia foi realizado o JSWorld Conference, e no segundo e terceiro dias, o Vue Amsterdam.

A conferência estava cheia de informações com grandes oradores, cada um dos quais me ensinou algo valioso. Todos queriam compartilhar seus conhecimentos e informações com outros desenvolvedores. Então pensei que seria ótimo se eu pudesse continuar a compartilhá-lo e ajudar outras pessoas a usá-lo.

A princípio, tentei compartilhar algumas anotações ou slides, mas senti que não era bom o suficiente, pelo menos não tão bom quanto o que o palestrante compartilhou comigo. Então decidi rever cada palestra, me aprofundar nelas, pesquisar, fazer anotações e combiná-las com seus slides e até com suas palavras exatas em sua fala e depois compartilhar com vocês para que o que eu compartilho com vocês seja pelo menos no mesmo nível do que aprendi com eles.

Um ponto muito importante

Tudo o que você lê nesses poucos artigos é resultado do esforço e do tempo do próprio palestrante, e eu apenas tentei aprendê-los para poder transformá-los nesses artigos. Mesmo muitas das frases escritas nesses artigos são exatamente o que eles disseram ou o que escreveram no Slides. Isso significa que se você aprender algo novo, é por causa de seus esforços.

Por último, mas não menos importante, posso não me aprofundar em todos os detalhes técnicos ou codificações ao vivo em alguns dos discursos. Mas se você estiver interessado e precisar de mais informações, me avise e tentarei escrever um artigo mais detalhado separadamente. Além disso, não se esqueça de verificar o Twitter/Linkedin deles.

Aqui você pode encontrar o programa da conferência.

Animando com Vue

Ramona Biscoveanu - Desenvolvedora Frontend na SAP

Às vezes, nossos aplicativos precisam de um pouco de "uau" e podemos fazer isso com algum "movimento" na medida certa para torná-los mais vivos.

Veremos como usar a mágica do Vue para criar animações incríveis, desde as mais simples até as mais complexas, combinando o Vue com bibliotecas de animação.

sites dos anos 90

Nos sites dos anos 90, às vezes havia muitos movimentos e cores. Mas a única maneira de termos animações naquela época era com gifs. Imagine a largura de banda que esses gifs consumiam na era da Internet Dial-Up! Então acabamos com alguns gifs minúsculos de baixo quadro para limitar o consumo de largura de banda, e este foi o resultado:

Por que Animar?

Uma das razões pelas quais usamos animações hoje em dia, mesmo naquela época, é capturar a atenção e o foco dos usuários. Pense em quantas distrações temos, notificações em nossos telefones, pop-ups em sites ou ícones de salto no dock no macOS.

Também podemos induzir os usuários a pensar que nosso site é muito mais rápido. Damos a eles essa percepção de que nossas APIs são mais rápidas ao colocar carregadores e barras de progresso. Estudos estão dizendo que se você tiver um carregador personalizado, terá uma chance de manter as pessoas em nosso site por mais tempo.

Às vezes, tentamos informar nossos usuários com eficiência. Talvez tenhamos muitas coisas acontecendo em nosso site e queremos dizer ao usuário qual é a próxima etapa no fluxo do aplicativo com um botão animado.

Outras vezes, precisamos de conteúdo interativo para materiais de marketing para manter os usuários lá.

As animações também são poderosas quando você tenta contar uma história.

Vue <Transition />

No Vanilla JavaScript ou jQuery, você precisa calcular manualmente os tempos e atrasos e decidir quando adicionar ou remover classes. Mas no Vue, envolvemos o elemento de destino no componente <Transition /> e ele faz muitas dessas coisas difíceis automaticamente. Aqui está uma animação de fade simples:

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

É assim que o Vue lida com isso:

Vue <TransitionGroup />

<TransitionGroup> é um componente integrado projetado para animar a inserção, remoção e alteração de ordem de elementos ou componentes renderizados em uma lista.

Este é um exemplo simples de alguns blocos deslizando na tela:

 <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 é incrível e podemos fazer muito com ele, mas às vezes não é suficiente.

O Vue fornece alguns ganchos no 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>

GreenSock GSAP

A GreenSock Animation Platform ( GSAP para abreviar) é uma poderosa biblioteca JavaScript que permite que desenvolvedores e designers front-end criem animações robustas baseadas em linha do tempo.

Uma das coisas mais importantes que você vai ouvir muito no GSAP é Tween.

Um Tween é o que faz toda a animação funcionar — pense nisso como um configurador de propriedades de alto desempenho. Você alimenta alvos (os objetos que deseja animar), uma duração e quaisquer propriedades que deseja animar e, quando o indicador de reprodução se move para uma nova posição, ele descobre quais devem ser os valores da propriedade naquele ponto e os aplica de acordo.

Métodos comuns para criar uma Tween (todos esses métodos retornam uma instância de Tween):

• gsap.to()

• gsap.from()

• gsap.fromTo()

  
  

Para animações simples (sem sequência sofisticada), os métodos acima são tudo o que você precisa!

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

Agora vamos adicionar GSAP ao nosso exemplo de blocos:

 <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 animação Vue

Outro exemplo simples de uso do GSAP para criar boas animações pode ser uma animação de contador de comemoração. Aqui você pode ver como vai ficar:

Tudo o que temos no template é apenas um elemento h1 onde passamos o valor formatado e um botão de reset.

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

Precisamos usar a função de timeline do tempo do GSAP. Pense nisso como uma ferramenta para sequenciar suas animações.

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

Transição de página

No Vue Router 4, a sintaxe para a transição de páginas mudou um pouco. Não envolvemos mais o roteador no componente de transição. em vez disso, usamos o v-slot :

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

Aqui está um exemplo de uma transição de página:

Para construir esta transição de página, precisamos do gancho enter:

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

Então precisamos registrar o plugin SplitText do GSAP:

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

E então, usando o plugin, dividimos o texto para poder animá-lo:

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

Vamos dar uma olhada no gancho 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 },

E aqui você pode ver como pode aninhar linhas de tempo GSAP e o que as funções enterContentTextAnimation e imgScaleOut fazem:

 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

Gráficos animados podem ser um bom exemplo de animação SVG:

Aqui está a parte do código que torna possível esta animação 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, } ); }); }, },

É importante não abusar das animações em seu site. Às vezes eles são úteis, mas às vezes podem matar seu público.

Fim da sétima palestra

Espero que tenham gostado desta parte e que possa ser tão valiosa para vocês quanto foi para mim.

Nos próximos dias, compartilharei o restante das palestras com você. Fique ligado…