Effettuare la transizione da After Effects a transizioni CSS e fotogrammi chiave

I siti web assomigliano sempre di più alle app mobili. Gli utenti si aspettano sempre più anche un'esperienza più simile a un'app. Dalle notifiche push alla modalità offline, le app Web native stanno arrivando.

Una volta che le app Web funzionano come app native, anche le interazioni di progettazione cambieranno per affrontare il caso d'uso, ovvero l'ubiquità delle animazioni. Le animazioni guidano le interazioni in tutte le nostre app preferite, da Uber a Lyft e Snapchat a Instagram.

In qualità di sviluppatori Web, abbiamo bisogno di una buona base per creare animazioni che siano sia performanti che gestibili, il che è fondamentale per il panorama delle app Web native. Dobbiamo essere in grado di passare da After Effects a transizioni, animazioni e fotogrammi chiave CSS.

Cos'è After Effects?

After Effects è un prodotto standard del settore di Adobe utilizzato dai designer grafici e di movimento per creare tasti, comporre e tenere traccia delle animazioni. È lo strumento de facto utilizzato da molti designer per comunicare idee a un team esportando i livelli di animazione in un video di esempio facile da visualizzare, con una tabella di riferimento degli orari di inizio e fine dell'animazione per accompagnarla.

Insieme, il video dimostrativo e la tabella di riferimento forniscono al team di sviluppo una buona base su come implementare l'animazione. Il video viene utilizzato per vedere il quadro generale, mentre la tabella di riferimento fornisce i minimi dettagli che creano o interrompono l'interazione dell'animazione.

Cose che possiamo fare con After Effects

Ciò che possiamo creare con After Effects è limitato solo dalla nostra immaginazione. Può fornire un numero infinito di effetti di post-produzione per un'immagine o un video. Nell'ambito del web, fornisce una piattaforma per la condivisione di idee.

Considera la palla rossa sopra. La palla viene animata utilizzando After Effects per rotolare lentamente al centro, fermarsi per un secondo e quindi accelerare lentamente per uscire dalla finestra. Le classiche animazioni Web di movimento, ridimensionamento, rotazione e persino cambio colore sono facilmente eseguibili in After Effects e fungono da documento dei requisiti (o video o GIF) generato istantaneamente per l'implementazione delle animazioni.

Strumenti necessari per iniziare

Con JavaScript, HTML5, CSS3 e molti altri linguaggi che stanno diventando standard nella maggior parte dei principali programmi utente da cui un sito Web riceve traffico, l'utilizzo di questi strumenti all'ingrosso sta diventando sempre più fattibile. Di seguito sono elencate alcune tecnologie chiave da tenere a mente quando si implementano le animazioni.

Transizioni CSS

Le transizioni CSS forniscono un modo per controllare la velocità con cui una modifica nella proprietà CSS viene applicata a un elemento. Invece di applicare uno stile immediatamente (senza transizioni), potrebbe essere applicato gradualmente su una curva di accelerazione definita utilizzando regole di personalizzazione. Un esempio potrebbe essere la modifica di un colore di sfondo da nero a bianco per un periodo di tempo.

 transition-property: background-color; transition-duration: 3s;

Con questa regola sull'elemento, il colore di sfondo impiegherebbe tre secondi per cambiare, passando gradualmente dal nero al bianco, passando per sfumature di grigio. Questo può essere ulteriormente personalizzato aggiungendo la funzione di temporizzazione di transizione, per calcolare i valori intermedi, e il ritardo di transizione, per ritardare l'inizio dell'animazione.

Le transizioni CSS sono utili per interazioni semplici , come cambiare il colore di sfondo o spostare un elemento in una nuova posizione.

Utilizzo di animazioni CSS

Le animazioni CSS forniscono un controllo ancora più preciso sui passaggi intermedi tra un'animazione, utilizzando i waypoint. I waypoint (o fotogrammi chiave) sono punti fissati nel tempo, durante l'animazione, quando applichiamo determinati stili a un elemento. Utilizziamo quindi i fotogrammi chiave definiti per definire l'aspetto dell'animazione.

Supponiamo di volere un elemento da animare come un rimbalzo. L'elemento deve spostarsi verso l'alto, tornare alla posizione originale, tornare leggermente in alto e quindi tornare alla posizione originale. Usando i fotogrammi chiave, possiamo scomporre quell'effetto elastico in percentuali di tempo che impiegherà l'animazione.

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

Come con le transizioni CSS, ci sono molte opzioni che gli sviluppatori possono configurare. Possiamo fare in modo che le animazioni si ripetano all'infinito usando animation-iteration-count , con il valore infinite , o anche controllare la direzione in cui scorre l'animazione, usando la proprietà animation-direction . Molte proprietà di animazione CSS ci danno un controllo granulare per abbinare un'animazione al design.

Le animazioni CSS sono utili per brevi animazioni ripetute , come espansione, rotazione e rimbalzi.

Utilizzo di JavaScript

JavaScript ha una moltitudine di usi, dai server Raspberry Pi al codice lato client, ma uno dei suoi usi principali rimane la modifica dei nomi delle classi sugli elementi. La modifica del nome di una classe è un modo banale ma efficace per gestire lo stato di un elemento.

Un esempio è la semplice aggiunta di una classe active che segnala a un componente inizialmente nascosto di iniziare l'animazione. Considera la palla qui sotto. Usiamo JavaScript per aggiungere una classe che attiva l'animazione utilizzando le proprietà di transizione CSS.

La prima parte di questa animazione può essere replicata utilizzando una semplice combinazione di HTML, CSS e JavaScript.

HTML:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

Quando il timeout (di 500ms ) scade, una classe di active viene aggiunta al ball div , che cambia la proprietà transform , che quindi attiva la proprietà di transition , che sta guardando la proprietà transform sull'elemento ball. La modifica delle classi CSS utilizzando JavaScript non solo ci aiuta a gestire lo stato di un componente, ma ci dà anche un ulteriore controllo sulle animazioni oltre alle animazioni e alle transizioni CSS.

Il controllo delle animazioni tramite JavaScript è utile per la gestione dello stato , per attivare eventi in base a fattori dinamici come l'input dell'utente o lo stato dell'applicazione.

Dall'idea agli After Effects ai CSS e JavaScript

Immagina di avere un compito in cui dovevamo animare un elemento sulla pagina. Facciamo di questo elemento una pallina rossa. La pallina dovrebbe ruotare attorno alla pagina, oltre a scalare su e giù.

After Effects ci consente di creare modelli di come sarebbe l'interazione quando viene attivata l'animazione. La palla in movimento qui sotto ne è un esempio. Nota come la palla rossa prima si ingrandisce leggermente, poi inizia ad accelerare attorno a un anello circolare e decelera tornando alla sua posizione originale. Solo allora la palla si ridimensiona alla sua dimensione originale.

Considera lo spostamento di scala sopra il punto in cui la palla cresce o si restringe prima di muoversi o fermarsi. Questa è una piccola funzionalità che il designer ha realizzato in After Effects e deve essere comunicata chiaramente allo sviluppatore in modo da non perdere i minimi dettagli.

Ecco perché sarebbe necessario fare un po' di preparazione prima di passare da After Effects allo sviluppatore. Non potevamo semplicemente creare un file video dell'animazione in azione, condividerlo con lo sviluppatore e chiamarlo un giorno.

Un modo per trasmettere chiaramente le nostre idee è creare un foglio di calcolo che descriva in dettaglio i passaggi necessari per l'animazione. A seconda della complessità dell'animazione, potrebbero essere semplici scarabocchi su un biglietto, un file di testo contenente un elenco o un foglio di calcolo completo.

Un altro modo per trasmettere informazioni sull'animazione è incorporarlo nel video stesso. Puoi farlo direttamente in After Effects, aggiungendo informazioni cruciali come quanto ridimensionare, il numero di passaggi e altre informazioni mentre sta accadendo, per dare un contesto all'implementatore. Questo ci consente di utilizzare il video dimostrativo come una fonte di verità universale .

Questo file video esportato da After Effects funge da forma di contratto tra designer e sviluppatore. Con una comprensione comune in atto, possiamo utilizzare gli strumenti discussi per implementarlo, vale a dire classi CSS, eventi JavaScript, transizioni CSS, animazioni CSS e animazioni JavaScript.

1. Analizza l'animazione

Cerca i modelli e prendi nota dei tempi.

La prima cosa da fare è disegnare la timeline delle animazioni per ciascuno degli elementi (o gruppo di elementi). Abbiamo bisogno di capire dove si intersecano le animazioni per sincronizzare i tempi e il ciclo di vita dell'animazione attorno ad esse. La pianificazione è la chiave di un'animazione complessa, in modo da poter costruire in modo incrementale la nostra soluzione in modo sostenibile per i requisiti futuri.

Dalle informazioni di cui sopra, le suddividiamo nei seguenti passaggi:

1. Inizializzare il componente e attendere un trigger.
2. Una volta attivato, aumenta le dimensioni ed espandi l'ombra esterna.
3. Dopodiché, muoviti in cerchio con ease-in-out .
4. Quindi, ridimensiona le dimensioni e diminuisci l'ombra discendente.

Il vantaggio di delineare è che capiamo quali componenti devono vivere al di fuori degli elementi di animazione, ad esempio l'ombra esterna deve essere indipendente dalla palla. Simile a delineare un saggio, scomporre l'animazione organizza i nostri pensieri sul lavoro che dobbiamo fare. I contorni dimostrano il processo di pensiero dietro un'animazione e servono doppiamente come documentazione per il nostro lavoro.

2. Negoziare con le parti interessate

Possiamo semplificare alcune aree? Quali parti dell'animazione sono obbligatorie? Possiamo sincronizzare i tempi?

Una volta che abbiamo studiato il lavoro necessario per portare a termine il compito, contrattare. La contrattazione con il designer e il proprietario del prodotto è responsabilità di ogni sviluppatore. L'implementatore ha una comprensione completa del frutto chiave a basso impatto, cosa può essere fatto e cosa non è pratico da fare.

L'animazione è complicata perché la rimozione di dettagli apparentemente minuti da un'animazione potrebbe cambiare l'esperienza dell'utente. Per fare un esempio basato sullo sviluppo, modificare il comportamento di un'animazione è come cambiare il payload di risposta che potremmo ricevere da una chiamata API: alcune cose potrebbero essere modificate, ma alcune parti devono essere presenti.

Questa è una situazione caso per caso, basata sul nostro rapporto con il designer, nonché con il product owner, data la tempistica per il lancio. Non è consigliabile richiedere la rimozione di determinate animazioni perché ciò esula dalla nostra area di competenza.

Un buon approccio alla contrattazione sarebbe sincronizzare i tempi o semplificare le animazioni che il browser potrebbe non essere in grado di eseguire in modo nativo ed evitare le animazioni che utilizzano JavaScript perché sarebbero difficili da mantenere e potrebbero comportare prestazioni scadenti. Possiamo e dobbiamo invece chiedere queste concessioni.

3. Pianifica l'attacco

Scopri quale dovrebbe essere lo stato iniziale e finale di ogni elemento. Guarda dove dovrebbe avvenire ogni momento di transizione. Sfrutta BEM nelle classi CSS per applicare le animazioni in modo chiaro. Comprendi i motivi per cui JavaScript dovrebbe essere limitato a favore dei CSS.

Esaminiamo l'animazione descritta in precedenza. Cinque stati ci saltano addosso:

1. lo stato iniziale, con la pallina rossa e qualche ombra esterna;
2. la versione ingrandita della palla con un'ombra esterna più lunga;
3. il movimento della palla attorno a un cerchio;
4. ridimensionamento della palla, insieme alla sua ombra esterna;
5. il ritorno allo stato iniziale, in attesa di essere attivato.

Per tutti e cinque gli stati, dovremmo considerare qual è lo stile prima e cosa dovrebbe essere dopo. Questo ci fornirà informazioni sul tipo di strumenti di animazione di cui avremmo bisogno per implementarlo.

Per fare ciò, iniziamo con lo stile del caso di base. Questo potrebbe non essere nulla, se l'elemento appare dal nulla, o potrebbe essere lo stile precedente, nel caso di animazioni concatenate.

Mantieni le cose semplici apportando pochissime modifiche agli stili tra gli stati. Una volta identificati gli stati di inizio e di fine, è necessario etichettarli come classi CSS, in modo che possano essere applicati facilmente all'elemento. Questo ci dà la flessibilità di usare JavaScript per gestire l'applicazione di classi basate sui dati ricevuti dalle chiamate AJAX da cui l'elemento potrebbe dipendere.

BEM CSS è l'ideale per la nostra strategia di denominazione per il modo in cui rappresenteremmo gli stati delle nostre animazioni in corso con i modificatori. Se l'animazione è abbastanza generica, BEM è anche una buona metodologia per mantenere classi CSS DRY ("non ripetere") che funzionano su basi di codice. Inizieremo solo con i marcatori di blocco ed elemento e quindi sovrapponiamo i modificatori mentre procediamo nell'animazione.

Ecco un esempio di viaggio in classe modello:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

Iniziamo con l'elemento contenitore con la palla di classe, che rappresenterebbe la palla rossa che stiamo animando. Man mano che l' animazione scorre attraverso l'esperienza, anche i nomi delle nostre classi BEM , dal ridimensionamento allo spostamento in cerchio. Questo è un metodo per tenere traccia di come dovrebbe apparire l'elemento quando vengono applicati gli stili.

4. Attuazione costante

Con uno schema a portata di mano e strumenti pronti per l'uso, dovremmo sgretolare il progetto stato per stato.

Possiamo affrontare in modo iterativo ogni stato come un elemento separato, basandoci sullo stato precedente secondo necessità. Con ogni stato chiaramente definito, possiamo concentrarci maggiormente sul rendere il nostro codice ASCIUTTO e di facile lettura, piuttosto che sui dettagli di implementazione. E, naturalmente, sarebbe bello aggiungere dei test per coprire la nostra logica.

Stato iniziale

Iniziamo con una semplice pallina rossa, con una leggera ombra.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

Aumentare

Ci sono due parti per aumentare la scala: la dimensione dell'elemento e la sua ombra discendente. Usiamo un fotogramma chiave, chiamato scale , che è condiviso sia dal ridimensionamento verso l'alto che verso il basso per DRY-ness per gestire questa animazione.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Cerchio (dopo aver applicato l'animazione in scala)

Usiamo un fotogramma chiave, chiamato circular , così come spostiamo la sua proprietà transform-origin per spostare l'elemento in un cerchio, partendo dall'inizio. Tieni presente che il cerchio si verifica solo quando l'animazione di ingrandimento è completata.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

Ridimensionamento (dopo l'applicazione delle animazioni di cerchiatura e ridimensionamento)

Per ridimensionare, riutilizziamo la scala dei fotogrammi chiave, con animation-direction: reverse per fare l'opposto di ciò che fa la classe scale-up. Questo ci riporta al nostro stato originale.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

Demo di lavoro

Se combiniamo tutte queste classi in una sequenza, avremmo una rappresentazione CSS del rendering eseguito in After Effects.

Fare clic sulla palla per iniziare.

Guarda la sfera animata della penna di Chris Ng (@chrisrng) su CodePen.

Conclusione

Gli strumenti trattati in questo articolo non sono certo all'avanguardia, ma sono generalmente supportati dalla maggior parte dei principali browser, il che li rende utilizzabili oggi.

In precedenza, l'implementazione delle animazioni era difficile perché significava utilizzare strumenti esterni come jQuery Animate per eseguire operazioni semplici come spostare gli elementi nella pagina. Oggi, le transizioni e le animazioni CSS possono essere eseguite in modo nativo ed efficiente, sfruttando la GPU.

Le animazioni sono sempre un tiro alla fune tra sviluppatore, designer e proprietario del prodotto. Il trucco è trovare una via di mezzo, in cui tutte le parti interessate sono soddisfatte della qualità del prodotto. Si spera che questa guida ti aiuti a fare questa transizione.