Efectuarea tranziției de la After Effects la tranziții CSS și cadre cheie

Site-urile web seamănă din ce în ce mai mult cu aplicațiile mobile. De asemenea, utilizatorii se așteaptă din ce în ce mai mult la o experiență mai asemănătoare aplicației. De la notificările push la modul offline, aplicațiile web native ajung acolo.

Odată ce aplicațiile web funcționează ca aplicațiile native, interacțiunile de proiectare s-ar schimba, de asemenea, pentru a aborda cazul de utilizare - și anume, ubicuitatea animațiilor. Animațiile generează interacțiuni în toate aplicațiile noastre preferate, de la Uber la Lyft și Snapchat la Instagram.

În calitate de dezvoltatori web, avem nevoie de o bază bună pentru a crea animații care sunt atât performante, cât și ușor de întreținut, ceea ce este esențial pentru peisajul aplicației web native. Trebuie să putem trece de la After Effects la tranziții CSS, animații și cadre cheie.

Ce este After Effects?

After Effects este un produs standard din industrie de la Adobe, folosit de designerii grafici și de mișcare pentru a introduce, compune și urmări animații. Este instrumentul de facto folosit de mulți designeri pentru a comunica ideile unei echipe prin exportul straturilor de animație într-un videoclip eșantion ușor de vizualizat, cu un tabel de referință cu orele de începere și de sfârșit a animației care îl însoțește.

Împreună, videoclipul demonstrativ și tabelul de referință oferă echipei de dezvoltare o bază bună pentru implementarea animației. Videoclipul este folosit pentru a vedea imaginea de ansamblu, în timp ce tabelul de referință oferă detalii minuscule care fac sau întrerup interacțiunea animației.

Lucruri pe care le putem face cu After Effects

Ceea ce putem crea cu After Effects este limitat doar de imaginația noastră. Poate oferi un număr infinit de efecte de post-producție pentru o imagine sau un videoclip. În domeniul web, acesta oferă o platformă pentru împărtășirea ideilor.

Luați în considerare bila roșie de mai sus. Mingea este animată folosind After Effects pentru a se rostogoli încet la mijloc, pentru a face o pauză pentru o secundă, apoi pentru a accelera încet pentru a ieși din fereastra de vizualizare. Animațiile web clasice de mișcare, scalare, rotație și chiar schimbare de culoare se realizează cu ușurință în After Effects și servesc ca document de cerințe generate instantaneu (sau video sau GIF) pentru animațiile care urmează să fie implementate.

Instrumente de care aveți nevoie pentru a începe

Odată cu JavaScript, HTML5, CSS3 și multe alte limbi care devin standard pentru majoritatea agenților de utilizatori majori de la care un site web primește trafic, utilizarea acestor instrumente devine din ce în ce mai fezabilă. Mai jos sunt câteva tehnologii cheie de care trebuie să țineți cont atunci când implementați animații.

Tranziții CSS

Tranzițiile CSS oferă o modalitate de a controla cât de rapid este aplicată unui element o modificare a proprietății CSS. În loc să aplice un stil imediat (fără tranziții), acesta ar putea fi aplicat treptat pe o curbă de accelerație definită folosind reguli de personalizare. Un exemplu ar fi schimbarea unei culori de fundal de la negru la alb pe o perioadă de timp.

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

Cu această regulă pe element, culoarea de fundal ar dura trei secunde pentru a se schimba, trecând treptat de la negru la alb, trecând prin nuanțe de gri. Acest lucru poate fi personalizat suplimentar prin adăugarea funcției de sincronizare a tranziției, pentru a calcula valorile intermediare și a întârzierii de tranziție, pentru a întârzia începutul animației.

Tranzițiile CSS sunt bune pentru interacțiuni simple , cum ar fi schimbarea culorii de fundal sau mutarea unui element într-o locație nouă.

Utilizarea animațiilor CSS

Animațiile CSS oferă un control și mai fin asupra pașilor intermediari dintre o animație, folosind puncte de referință. Punctele de referință (sau cadrele cheie) sunt puncte fixate în timp, în timpul animației, când aplicăm anumite stiluri unui element. Apoi folosim cadrele cheie definite pentru a arăta cum ar trebui să arate animația.

Să presupunem că vrem ca un element să se anime ca o săritură. Elementul trebuie să se miște în sus, să se întoarcă la poziția inițială, să se miște înapoi puțin în sus și apoi să se mute înapoi la poziția inițială. Folosind cadre cheie, putem descompune acel efect elastic în procente de timp pe care îl va dura animația.

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

Ca și în cazul tranzițiilor CSS, există o mulțime de opțiuni pe care dezvoltatorii le pot configura. Putem face ca animațiile să se repete la nesfârșit folosind animation-iteration-count , cu valoarea infinite , sau chiar să controlăm direcția în care curge animația, folosind proprietatea animation-direction . O mulțime de proprietăți de animație CSS ne oferă un control fin pentru a potrivi o animație cu designul.

Animațiile CSS sunt utile pentru animațiile scurte care se repetă , cum ar fi extinderea, rotația și săriturile.

Folosind JavaScript

JavaScript are o multitudine de utilizări, de la serverele Raspberry Pi până la codul clientului, dar una dintre utilizările sale principale rămâne schimbarea numelor de clasă pe elemente. Schimbarea numelui unei clase este o modalitate trivială, dar eficientă de a gestiona starea unui element.

Un exemplu este simpla adăugare a unei clase active care semnalează o componentă ascunsă inițial să înceapă animarea. Luați în considerare mingea de mai jos. Folosim JavaScript pentru a adăuga o clasă care declanșează animația folosind proprietăți de tranziție CSS.

Prima parte a acestei animații poate fi replicată folosind o combinație simplă de HTML, CSS și 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);

Când expiră timpul de expirare (de 500ms ), o clasă de active este adăugată la div -ul bilei, care schimbă proprietatea de transform , care apoi declanșează proprietatea de transition , care urmărește proprietatea de transform a elementului bile. Schimbarea claselor CSS folosind JavaScript nu numai că ne ajută să gestionăm starea unei componente, dar ne oferă și un control suplimentar asupra animațiilor dincolo de animațiile și tranzițiile CSS.

Controlul animațiilor folosind JavaScript este benefic pentru gestionarea stării , pentru a declanșa evenimente bazate pe factori dinamici, cum ar fi intrarea utilizatorului sau starea aplicației.

De la idee la After Effects la CSS și JavaScript

Imaginați-vă că avem o sarcină în care trebuia să animam un element de pe pagină. Să facem din acest element o minge roșie. Mingea ar trebui să se rotească în jurul paginii, precum și să se scaleze în sus și în jos.

After Effects ne permite să creăm machete cu cum ar arăta interacțiunea atunci când animația este declanșată. Bila în mișcare de mai jos este un exemplu în acest sens. Observați cum bila roșie crește mai întâi ușor, apoi începe să accelereze în jurul unei bucle circulare și decelerează înapoi în poziția inițială. Abia atunci mingea scade la dimensiunea inițială.

Luați în considerare schimbarea scării deasupra locului în care mingea crește sau se micșorează înainte de a se deplasa sau de a se opri. Aceasta este o caracteristică minusculă pe care designerul a creat-o în After Effects și trebuie comunicată în mod clar dezvoltatorului, astfel încât detaliile minime să nu fie ratate.

De aceea, ar trebui făcută o pregătire înainte de a trece de la After Effects la dezvoltator. Nu am putea pur și simplu să creăm un fișier video al animației în acțiune, să-l împărtășim dezvoltatorului și să-l numim o zi.

O modalitate de a ne transmite ideile în mod clar este să creați o foaie de calcul care să detalieze pașii necesari pentru animație. În funcție de complexitatea animației, ar putea fi simple mâzgăliri pe un bilet, un fișier text care conține o listă sau o foaie de calcul completă.

O altă modalitate de a transmite informații despre animație este să o încorporați în videoclipul în sine. Puteți face acest lucru chiar în After Effects, adăugând informații cruciale, cum ar fi cât de mult să scalați, numărul de pași și alte informații pe măsură ce se întâmplă, pentru a oferi context implementatorului. Acest lucru ne permite să folosim videoclipul demonstrativ ca sursă universală de adevăr .

Acest fișier video exportat de la After Effects acționează ca o formă de contract între designer și dezvoltator. Cu o înțelegere comună, putem folosi instrumentele discutate pentru a-l implementa - și anume, clase CSS, evenimente JavaScript, tranziții CSS, animații CSS și animații JavaScript.

1. Defalcă animația

Căutați modele și notați timpii.

Primul lucru de făcut este să desenați cronologia animațiilor pentru fiecare dintre elemente (sau grup de elemente). Trebuie să înțelegem unde se intersectează animațiile pentru a sincroniza sincronizarea și ciclul de viață al animației din jurul lor. Planificarea este cheia unei animații complexe, astfel încât să ne putem construi treptat soluția într-un mod care poate fi întreținut pentru cerințele viitoare.

Din informațiile de mai sus, le descompunem în următorii pași:

1. Inițializați componenta și așteptați un declanșator.
2. Odată declanșat, măriți dimensiunea și extindeți umbra.
3. După aceea, mișcă-te într-un cerc cu ease-in-out .
4. Apoi, reduceți dimensiunea și micșorați umbra.

Avantajul conturării este că înțelegem ce componente trebuie să trăiască în afara elementelor de animare - de exemplu, umbra ar trebui să fie independentă de minge. Similar cu schițarea unui eseu, defalcarea animației ne organizează gândurile asupra muncii pe care trebuie să o facem. Contururile demonstrează procesul de gândire din spatele unei animații și servește de două ori drept documentare pentru munca noastră.

2. Negociați cu părțile interesate

Putem simplifica unele zone? Ce părți ale animației sunt obligatorii? Putem sincroniza cronometrajele?

Odată ce am investigat munca necesară pentru îndeplinirea sarcinii, ne negociem. Negocierea cu designerul și proprietarul produsului este responsabilitatea fiecărui dezvoltator. Implementatorul are o înțelegere completă a fructelor cheie, ce se poate face și ce nu este practic de făcut.

Animația este dificilă, deoarece eliminarea detaliilor aparent minuscule dintr-o animație ar putea schimba experiența utilizatorului. Pentru a da un exemplu bazat pe dezvoltare, schimbarea modului în care se comportă o animație este asemănătoare cu modificarea sarcinii utile de răspuns pe care o putem primi de la un apel API: anumite lucruri ar putea fi schimbate, dar unele părți trebuie să fie acolo.

Aceasta este o situație de la caz la caz, bazată pe relația noastră cu designerul, precum și cu proprietarul produsului dat fiind calendarul lansării. Nu este recomandat să cereți eliminarea anumitor animații, deoarece acest lucru ar depăși aria noastră de expertiză.

O abordare bună a negocierii ar fi sincronizarea timpurilor sau simplificarea animațiilor pe care browserul ar putea să nu fie capabil să le facă în mod nativ și evitarea animațiilor care utilizează JavaScript, deoarece ar fi greu de întreținut și ar putea duce la performanțe neplăcute. În schimb, putem și trebuie să cerem aceste concesii.

3. Planificați atacul

Aflați care ar trebui să fie starea de început și de sfârșit a fiecărui element. Priviți unde ar trebui să se întâmple fiecare moment de tranziție. Utilizați BEM în clasele CSS pentru a aplica animațiile în mod clar. Înțelegeți motivele pentru care JavaScript ar trebui limitat în favoarea CSS.

Să examinăm animația descrisă mai devreme. Cinci state ne ies la iveală:

1. starea inițială, cu bila roșie și ceva umbră;
2. versiunea mărită a mingii cu o umbră mai lungă;
3. mișcarea mingii în jurul unui cerc;
4. micșorarea mingii, împreună cu umbra ei;
5. revenirea la starea inițială, așteptând să fie declanșată.

Pentru toate cele cinci stări, ar trebui să ne uităm la ce stil este înainte și ce ar trebui să fie după. Acest lucru ne va oferi informații despre ce fel de instrumente de animație am avea nevoie pentru a le implementa.

Pentru a face acest lucru, începem cu stilul cazului de bază. Acesta ar putea fi nimic, dacă elementul apare din senin, sau ar putea fi stilul anterior, în cazul animațiilor înlănțuite.

Păstrați-l simplu , având foarte puține schimbări în stiluri între state. Odată ce am identificat stările de început și de sfârșit, trebuie să le etichetăm ca clase CSS, astfel încât să poată fi aplicate elementului cu ușurință. Acest lucru ne oferă flexibilitatea de a folosi JavaScript pentru a gestiona aplicarea claselor pe baza datelor primite de la apelurile AJAX de care ar putea depinde elementul.

BEM CSS este ideal pentru strategia noastră de denumire datorită modului în care am reprezenta stările animațiilor noastre în desfășurare cu modificatori. Dacă animația este suficient de generică, BEM este, de asemenea, o metodologie bună pentru a menține clasele CSS DRY („nu te repeta”) care funcționează pe baze de cod. Începem doar cu marcatorii de bloc și elemente și apoi stratificam modificatori pe măsură ce progresăm prin animație.

Iată un exemplu de călătorie cu șablonul de clasă:

 // 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>

Începem cu elementul container cu mingea de clasă, care ar reprezenta mingea roșie pe care o animam. Pe măsură ce animația se repetă de-a lungul experienței, la fel fac și numele claselor noastre BEM , de la creșterea la scară până la mutarea într-un cerc. Aceasta este o metodă de a urmări cum ar trebui să arate elementul atunci când sunt aplicate stilurile.

4. Implementare constantă

Cu o schiță la îndemână și instrumente gata de utilizare, ar trebui să eliminăm starea proiectului de stat.

Putem aborda în mod iterativ fiecare stare ca un element separat, bazându-ne pe starea anterioară, după cum este necesar. Cu fiecare stare clar definită, ne putem concentra mai mult pe a face codul nostru USCAT și ușor de citit, mai degrabă decât pe detaliile implementării. Și, desigur, ar fi bine să adăugăm teste pentru a ne acoperi logica.

Stare initiala

Începem cu o minge roșie simplă, cu o ușoară umbră.

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

Creștere

Exista doua parti pentru scalare: dimensiunea elementului si umbra sa. Folosim un cadru cheie, numit scale , care este partajat atât de scalare în sus, cât și în jos pentru DRY-ness pentru a gestiona această animație.

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

Încercuirea (după ce se aplică animația de extindere)

Folosim un cadru cheie, numit circular , precum și mutam proprietatea sa transform-origin pentru a muta elementul într-un cerc, începând de la început. Rețineți că încercuirea are loc numai atunci când animația de extindere a fost finalizată.

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

Reducere (după ce sunt aplicate animațiile de încercuire și de mărire)

Pentru a reduce dimensiunea, reutilizam scara cadrelor cheie, cu animation-direction: reverse pentru a face opusul a ceea ce face clasa de creștere. Acest lucru ne readuce la starea noastră inițială.

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

Demo de lucru

Dacă combinăm toate aceste clase într-o secvență, am avea o reprezentare CSS a randării făcute în After Effects.

Faceți clic pe minge pentru a începe.

Vedeți Ball Animating Ball de Chris Ng (@chrisrng) pe CodePen.

Concluzie

Instrumentele abordate în acest articol nu sunt de ultimă oră, dar sunt, în general, acceptate în majoritatea browserelor majore, ceea ce le face utilizabile astăzi.

Anterior, implementarea animațiilor era dificilă, deoarece însemna utilizarea unor instrumente externe, cum ar fi jQuery Animate, pentru a face lucruri simple, cum ar fi mutarea elementelor pe pagină. Astăzi, tranzițiile și animațiile CSS pot fi făcute nativ și eficient, utilizând GPU-ul.

Animațiile sunt întotdeauna o remorcheră între dezvoltator, designer și proprietar de produs. Trucul este să găsiți calea de mijloc, în care toate părțile interesate sunt mulțumite de calitatea produsului. Sperăm că acest ghid vă va ajuta să faceți această tranziție.