Budúcnosť animácie na webe a v aplikáciach je tu. Predstavujeme Lottie

Na Slovensku takmer neznáme, vo svete na vzostupe. Tak by sme mohli charakterizovať Lottie. Jeho pomaly sa rodiacej popularite sa nemôžeme čudovať. Jednoduchá a rýchla implementácia, pekné efekty a dátová nenáročnosť robí z Lottie animácie nástroj, ktorý stojí za to využiť. Za všetky príklady môžeme menovať Belgium beer company, ktorá testovala Lottie animácie po dobu 12 mesiacov a podľa ich dát od tej doby vzrástol konverzný pomer o neuveriteľných 25 %. Čo teda sú tie Lottie animácie?

Coronavirus – Lottie animácia (Json súbor: 126 kb)

 

Animácie budúcnosti

Lottie animácie vytvorilo dizajnové oddelenie spoločnosti Airbnb, ktorá dekóduje animácie z Adobe After Effects ako JSON súbor za využitie ich ďalšieho produktu Bodymovin. Výsledkom sú vektorové animácie použiteľné na weby, mobilné zariadenia, na marketingové účely aj mobilné aplikácie.

Túto technológiu naplno využíva aj spoločnosť Revolut, ktorá ponúka inovatívne bankové služby. Zaujímavé animácie sprevádzajú používateľa skrz aplikáciu. Revolut pomocou Lottie animácie dokázal užívateľom hravým spôsobom vysvetliť, ako funguje ich aplikácia. A to všetko bez použitia dlhých vysvetľujúcich textov alebo dátovo veľkých videí.

 

Zdroj: dribbble.com/revolut (Ukážky sú vo formáte .mp4)

 

Dátovo minimalistické

Tieto animácie by ste mohli vytvoriť napríklad ako PNG sekvenciu, oproti nej je ale Lottie oveľa rýchlejšia pretože pracuje s vektorovými dátami a sú využiteľné na mnohých platformách. Iné vektorové animácie sa doteraz využívali predovšetkým v GIF formáte či ako video. Formát GIF má tú nevýhodu, že zobrazuje iba 256 farieb, oproti nemu sú Lottie animácie farebne neobmedzené, a teda výrazne krajšie a kvalitnejšie. Navyše je GIF, rovnako ako video, niekoľkonásobne dátovo náročný.

Napríklad rovnaká animácia v Gife môže mať 3 MB a v Lottie iba 100 kb, to je 30x menej. Implementácia Lottie navyše prebieha veľmi rýchlo. Môžete tak vytvoriť pekný dizajn naprieč vašou stránkou či webom. Tieto malé drobnosti robia z užívateľského hľadiska zázraky. Z obyčajného, hoci kvalitného webu, urobia špičkoví web, na ktorom je radosť surfovať. A či sa nám to páči alebo nie, web je vizitkou firiem, je prezentáciou kvality a spoľahlivosti. Nepatrný detail potom môže rozhodnúť o tom, koho si potenciálny zákazník zvolí.

Prasiatko – Lottie animácia (Json súbor: 60 kb)

 

Ideálne pre marketingové účely

V konkurenčnom prostredí webov je rýchlosť načítania veľmi dôležitou zložkou nielen po stránke užívateľskej, ale aj pre samotné hodnotenie vášho webu v rámci SEO Google berie do úvahy rýchle weby a aj nepatrný detail môže rozhodnúť o tom, na akom mieste sa vo vyhľadávaní umiestníte. Veľké grafické súbory web výrazne spomaľujú, a práve kvôli nim sa môže váš web objavovať na oveľa nižších pozíciách než pri využití menej dátovo náročnej grafiky. Čo si ale vybrať? Nepekné užívateľské prostredie, alebo pomalý web? Lottie animácie uľahčujú týmto problémom a kompromis tak nie je nutný. Animácie sú dátovo nenáročné a nijako výrazne nespomaľujú web. Môžete teda urobiť pekný web aj bez toho, aby utrpela vaša SEO optimalizácia. Rýchlosť načítania sa v dnešnej dobe prejaví aj v zobrazení na mobiloch, ktoré je stále často veľmi pomalé. Grafické prvky sa s využitím Lottie načítajú rýchlo a používateľ nemusí čakať.

Burger – Lottie animácia (Json súbor: 40 kb)

 

Kvalitná responzivita a užitočnosť v aplikáciách

Nech ide o akúkoľvek platformu či veľkosť zariadenia, kde sa grafika zobrazuje, môžete si byť istí, že Lottie animácia vyzerá na jednotku. Vďaka vektorovej grafike je plne responsívna, nemusíte tak mať obavy zo zlého zobrazenia, animácia sa nielen, že zobrazuje správne, je zároveň vysoko kvalitná ako na malom mobilnom displeji, tak napríklad na dvadsať – sedem palcovom monitore. Nemôžeme tiež zabudnúť, spomenúť Lottie v spojitosti s aplikáciami. Pre svoju užitočnosť a integrovateľnosť s užívateľskými interakciami je Lottie pre mobilné aplikácie ideálnym nástrojom. Navyše je možné nastaviť Lottie animáciu tak, aby sa spúšťala po akcii užívateľa napr. animácia sa spustí až po kliknutí, alebo sa prehráva len počas skrolovania a pod. Je to skvelá možnosť ako vytvárať interaktívne animované prvky na webe alebo v aplikácii a vytvoriť tak “wow” efekt.

 

Nevýhody používania lottie

Tak ako všetko má svoje výhody a nevýhody, tak aj lottie má svoje temnejšie stránky.
Tie sme pocítili len pri tvorbe samotných animácii.

• Lottie podporuje len vektorové tvary v After effects, (avšak možnosť importovať .ai súbor a konvertovať do vektorových tvarov je možné)
• nepodporuje žiadne efekty z ponuky programu
• nemôžte využiť žiadne pluginy na uľahčenie práce ako napr. dynamické easingy
• nepodporuje použitie javascript príkazov (Expressions)

 

Tým pádom je vytvorenie lottie animácie časovo náročnejšie, ako keby bolo vytvárane pre video alebo GIF sekvenciu. Niekedy teda musíte zložitejšie animácie vytvoriť frame-by-frame.

Nás to ale neodradilo, práve naopak. Nenechali sme si túto príležitosť ujsť a sami sme Lottie na webe využili. Animáciu nájdete napríklad na hlavnej stránke Motionspace. Možno, kto vie, že ste na našom webe práve kvôli tomu.

 

Mimo Mascot – Lottie animácia (Json súbor: 126 kb)