Budoucnost animací na webu a v aplikacích je tady. Představujeme Lottie

V Česku téměř neznámé, ve světě na vzestupu, tak bychom mohli charakterizovat Lottie. Jeho pomalu se rodící popularitě se nemůžeme divit. Jednoduchá a rychlá implementace, líbivé efekty a datová nenáročnost dělá z Lottie animací nástroj, který stojí za to využít. Za všechny příklady můžeme jmenovat Belgium beer company, která testovala Lottie animace po dobu 12 měsíců a podle dat od té doby vzrostl konverzní poměr o neuvěřitelných 25%. Co tedy jsou ty Lottie animace?

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

 

Animace budoucnosti

Lottie animace vytvořilo designové oddělení společnosti Airbnb, která parsuje animace z Adobe After Effects jako JSON soubor za využití jejich dalšího produktu Bodymovin. Výsledkem jsou vektorové animace použitelné na weby, mobilní zařízení, pro marketingové účely i mobilní aplikace.

Tuto technologii naplno využívá i společnost Revolut, která nabízí inovativní bankovní služby. Zajímavé animace doprovázejí uživatele skrz aplikaci. Revolut pomocí Lottie animaci dokázal uživatelům hravým způsobem vysvětlit, jak funguje jejich aplikace. A to vše bez použití dlouhých vysvětlujících textů nebo datově velkých videí.

 

Zdroj: dribbble.com/revolut (Ukázky jsou ve formátu .mp4)

 

Datově minimalistické

Tyto animace byste mohli vytvořit například jako PNG sekvenci, oproti ní je ale Lottie mnohem rychlejší protože pracuje s vektorovými daty a využitelné na mnoha platformách. Jiné vektorové animace se dosud využívaly především v GIF formátu či jako video. Formát GIF má tu nevýhodu, že zobrazuje pouze 256 barev, oproti němu jsou Lottie animace barevně neomezené, a tedy výrazně krásnější a kvalitnější. Navíc je GIF, stejně jako video, několikanásobně datově náročné.

Například stejná animace v GIFU může mít 3 MB a v Lottie pouhých 100 kb, to je 30x méně. Implementace Lottie navíc probíhá velice rychle. Můžete tak vytvořit líbivý design napříč vaší stránkou či webem. Tyto malé drobnosti dělají z uživatelského hlediska zázraky. Z obyčejného, přestože kvalitního webu, udělají špičkoví web, na kterém je radost brouzdat. A ať se nám to líbí nebo ne, web je vizitkou firem, je prezentací kvality a spolehlivosti. Nepatrný detail pak může rozhodnout o tom, koho si potenciální zákazník zvolí.

Prasátko – Lottie animace (JSON soubor: 60 kb)

 

Lottie jsou ideální pro marketingové účely

V konkurenčním prostředí webů je rychlost načítání velice důležitou složkou nejen po stránce uživatelské, ale i pro samotné hodnocení vašeho webu v rámci SEO. Google bere v potaz rychlé weby a i nepatrný detail může rozhodnout o tom, na jakém místě se ve vyhledávání umístíte. Velké grafické soubory web výrazně zpomalují, a právě kvůli nim se může váš web objevovat na mnohem nižších pozicích než při využití méně datově náročné grafiky. Co si ale vybrat? Nehezké uživatelské prostředí, nebo pomalý web? Lottie animace ulehčují těmto problémům a kompromis tak není nutný. Animace jsou datově nenáročné a jako takové nijak výrazně nezpomalují web. Můžete tedy udělat líbivý web i bez toho, aniž by utrpěla vaše SEO optimalizace. Rychlost načítání se v dnešní době projeví i v zobrazení na mobilech, které je pořád často velmi pomalé. Grafické prvky se s využitím Lottie načtou rychle a uživatel nemusí čekat.

Burger – Lottie animace (JSON soubor: 40 kb)

 

Kvalitní responsivita a užitečnost v aplikacích

Ať jde o jakoukoliv platformu či velikost zařízení, kde se grafika zobrazuje, můžete si být jisti, že Lottie animace vypadá na jedničku. Díky vektorové grafice je plně responzivní, nemusíte tak mít obavy ze špatného zobrazení, animace se nejen zobrazuje správně, je zároveň vysoce kvalitní jak na malém mobilním displeji, tak třeba na sedmadvaceti palcovém monitoru. Nemůžeme také opomenout zmínit Lottie ve spojitosti s aplikacemi.

Pro svoji užitečnost a integrovatelnost s uživatelskými interakcemi je Lottie pro mobilní aplikace ideálním nástrojem. Navíc lze nastavit Lottie animaci tak, aby se spouštěla po akci uživatele např. animace se spustí až po kliknutí, nebo se přehrává pouze během skrolování apod. Je to skvělá možnost jak vytvářet interaktivní animované prvky na webu nebo v aplikaci a vytvořit tak „wow“ efekt.

 

Nevýhody používání Lottie

Tak jako všechno má své výhody a nevýhody, tak i Lottie má své temnější stránky.
Ty jsme pocítili jen při tvorbě samotných animaci.

• Lottie podporuje pouze vektorové tvary v After effects, (avšak možnost importovat .ai soubor a konvertovat do vektorových tvarů je možné)
• nepodporuje žádné efekty z nabídky programu
• nemůžete využít žádné pluginy na usnadnění práce jako např. dynamické easing,
• nepodporuje použití javascript příkazů (Expressions)

 

Tím pádem je vytvoření Lottie animace časově náročnější, než kdyby bylo vytvářené pro video nebo GIF sekvenci. Někdy tedy musíte složitější animace vytvořit frame-by-frame.

Nás to ale neodradilo, právě naopak. Nenechali isme si tuto příležitost ujít a sami isme Lottie na webu využili. Animace najdete například na hlavní stránce Motionspace. Možná, kdo ví jste na našem webu právě kvůli tomu.

 

Mimo Mascot – Lottie animace (JSON soubor: 126 kb)