Ce este animația Lottie? Tot ce trebuie să știi despre Lottie

Crearea de animații complexe pentru Android, iOS etc., este, desigur, un proces îndelungat. Este chiar și ca designer sau animator, uneori un proces de creier.

Trebuie fie să încărcați fișiere de imagine mari pentru fiecare dimensiune de ecran, fie să scrieți o mie de rânduri de cod fragil, greu de întreținut. Drept urmare, în ciuda faptului că este un instrument puternic pentru comunicarea ideilor și pentru a produce experiențe convingătoare pentru utilizator, majoritatea aplicațiilor nu folosesc animație video.

Nu trebuie să fie așa! Aceste probleme au dispărut de mult și există multe formate de fișiere, platforme etc. la îndemână, pe care le puteți utiliza pentru a simplifica fluxul de lucru. Un astfel de format este Lottie.

În acest blog, vă voi spune despre acest format interesant și la îndemână.

Ce este Lottie?

În anii dinaintea lui Lottie, designerii de mișcare își creau animațiile și apoi le trimiteau dezvoltatorilor de software pentru a fi puse în acțiune. Opțiunile de implementare au fost inadecvate și limitate în domeniul de aplicare.

Era o practică obișnuită pentru dezvoltatori să exporte animații în formate de calitate scăzută sau să încerce să recreeze designul animației în cod de la zero, la maximum posibilitățile lor. Deloc surprinzător, nu a fost cea mai eficientă tehnică și a dus frecvent la animații care erau ineficiente și arătau complet diferit de rezultatul intenționat al designerului de mișcare.

Hernan Torrisi a venit cu noțiunea de a exporta reprezentarea unei animații create în Adobe After Effects și de a genera animația în timpul execuției în 2015. Capacitățile de scriptare ale After Effects au fost folosite pentru a repeta un proiect de animație și un plugin pentru Adobe After Effects numit Bodymovin a fost dezvoltat care a produs o descriere a animației în format JSON.

Împreună cu playerul pentru browser, el a furnizat primul redator pentru format, care a fost construit folosind Javascript.

De la introducerea sa în 2017, LottieFiles a oferit animatorilor și dezvoltatorilor o platformă pentru a testa, partaja și afișa rapid animațiile lor pe web. Formatul de fișier bazat pe animație Lottie (JSON) permite designerilor să transfere animații pe platforme fără efort.

Lottie a fost numită după Charlotte „Lotte” Reiniger, un regizor de film german care este considerat pe scară largă ca fiind cel mai important pionier al animației de siluetă din lume. Nu există limitări pentru platformele pe care le acceptă. Poate fi accesat prin iOS, Android și web.

O combinație de componente vectoriale și raster este utilizată în Lottie pentru a crea animații de înaltă calitate, care sunt de natură multiplatformă. Vizând anumite elemente și parametri de animație, oferă posibilitatea de a adăuga interactivitate și de a modifica parametrii în timpul rulării.

Acestea sunt fișiere mici care pot fi utilizate pe orice dispozitiv și pot fi scalate fără pierderi de calitate. Fișierele Lottie pot fi reutilizate de dezvoltatori în programarea lor.

Ce poate face o Lottie?

Lottie vă permite animația să fie redată pe orice web sau dispozitiv mobil la calitate înaltă, iar cu setări inteligente, vă lăsați animația să fie mai atractivă.

Un lucru de reținut este că, în timp ce se construiește pentru Lottie, fișierele JSON trebuie să fie cât mai mici posibil pentru platforma mobilă. Folosiți tehnici parentale ori de câte ori este posibil.

Cod suplimentar este adăugat în timp ce se dublează aceleași cadre cheie pe un strat similar. Ar trebui să utilizați animații ale cadrelor cheie ale căii ori de câte ori este posibil.

Majoritatea spațiului este consumat prin adăugarea de date pentru fiecare vârf de pe fiecare cadru cheie.

Urmărirea automată sau tehnica wiggler vă oferă un cadru cheie pentru fiecare cadru, dar dacă dimensiunea fișierului dvs. JSON este foarte grea poate avea un impact negativ asupra performanței. Acestea ar trebui să fie echilibrate cu compoziția pentru a funcționa fără probleme și eficient.

Unde o poți folosi pe Lottie?

Lottie's poate fi accesat practic de pe orice platformă, inclusiv web și dispozitive mobile, potrivit dezvoltatorului. Cu alte cuvinte, ele pot fi integrate cu ușurință atât în ​​aplicațiile mobile, cât și în aplicațiile bazate pe web.

Pe unele servicii de mesagerie, animațiile Lottie pot fi chiar folosite ca autocolante. Nu se limitează la web sau dispozitive mobile în ceea ce privește limitările tehnice. Pe aplicațiile desktop, precum și pe unele ceasuri inteligente, s-ar putea să profitați de el.

Sunt disponibile diverse pluginuri și biblioteci multiplatforme pentru Web, iOS, Android, Flutter, React, Vue, Angular și Sketch. Figma, After Effects și multe altele sunt acceptate în fișierele de animație Lottie.

De ce să folosești animația Lottie?

Este firesc să te gândești de ce ar trebui să folosești animația Lottie când există atât de multe alte opțiuni disponibile.

Iata de ce:

Se poate juca oriunde

Playerul web Lottie este compatibil cu orice browser care acceptă Javascript contemporan, ceea ce înseamnă că Lottie poate fi jucat pe orice browser modern care acceptă Javascript. În plus, deoarece cele mai recente kituri de dezvoltare software oferă conținut web dinamic, integrarea lui Lottie în orice program desktop sau laptop devine mai simplă.

Există, de asemenea, biblioteci disponibile pentru implementarea redării Lottie în platformele IOS, Android și Tizen, făcând posibilă utilizarea Lottie în aplicațiile mobile de pe marea majoritate a smartphone-urilor și tabletelor. Animațiile Lottie sunt adoptate rapid de marile companii pentru a-și îmbunătăți front-end-urile mobile, în timp ce startup-urile îl folosesc pe Lottie în designul lor de produse pentru a se separa de concurență.

Usor de intretinut

Animațiile Lottie sunt salvate ca text simplu, ceea ce înseamnă că pot fi vizualizate de ființe umane. Ca rezultat, angajarea Lottie în dezvoltarea interfețelor aplicațiilor scade timpul de depanare, precum și timpul total până la implementare. În plus, fișierele Lottie text simplu sunt mai puțin complicate de întreținut și de reglat, deoarece nu necesită utilizarea unor instrumente software specializate.

Datele text din animațiile Lottie sunt structurate ca JSON, ceea ce înseamnă că sunt gata pentru asimilarea în Javascript sau în orice alt mediu de dezvoltare a aplicațiilor care acceptă JSON fără a fi nevoie de analiză sau procesare suplimentară. Drept urmare, Lottie a devenit cel mai utilizat și mai portabil format de grafică animată din lume.

Este dinamic

Structura JSON a datelor Lottie permite manipularea și înlocuirea ușoară a conținutului acestuia la mai multe grade de granularitate, variind de la valori fracționale la porțiuni mari de obiecte. Materialul de înlocuire, în plus, poate fi încărcat dinamic de pe orice site. Drept urmare, Lottie este în prezent cel mai dinamic și utilizat format de grafică animată.

Scalabilitate

Deoarece imaginile convenționale sunt voluminoase, multe companii le folosesc cu moderație în interfețele cu utilizatorul aplicațiilor. Prea multe elemente grafice pot crește costurile de stocare și recuperare, în special atunci când se caută și se sortează datele în context.

Atunci când sunt utilizate în soluții mari, fișierele Lottie pot minimiza cheltuielile de stocare și sortare/căutare contextuală. Întrucât Lotties sunt dinamice, aplicațiile trebuie doar să încarce componentele care au nevoie de actualizare la un moment dat.

Cea mai mare calitate

Folosește vectori pentru a reprezenta dimensiunile formelor geometrice, precum și calificatori pentru a le defini caracteristicile și modul în care acestea continuă să se miște în timpul animației. Jucătorul Lottie redă la rezoluția nativă a ecranului. Acest lucru asigură că animațiile Lottie sunt afișate întotdeauna la cea mai bună calitate posibilă.

Un utilizator zoomează într-o animație Lottie, iar jucătorul o redesenează la rezoluția nativă. Aceasta înseamnă că animațiile Lottie nu se pixelează niciodată, indiferent cât de mărite ar fi.

Într-un Crux

Interfețele de utilizator care sunt rapide, dinamice și elegante pot fi realizate prin utilizarea Lotties. Consumul de lățime de bandă al clientului dvs. ar fi mult mai scăzut ca urmare a nevoilor mai mici de stocare pentru componenta găzduită a aplicației dvs.

Dacă aștepți cu nerăbdare să faci videoclipuri de animație pentru Lottie, cel mai bun loc în care ai dori să fii este webdew.

La webdew, videoclipurile explicative, animațiile personajelor, animațiile 2D și animațiile cu tablă albă sunt realizate pe scară largă de animatori calificați și designeri grafici în mișcare. Contactați-ne pentru a afla mai multe.

Editor: Amrutha