Animace mají v iOS aplikacích místo odedávna. Dříve nebo později se s nimi setká každý programátor a pokud netouží po ničem extra složitém, naprostou většinu svých nápadů zvládne zrealizovat pomocí systémových knihoven a API.
Například animace změny průhlednosti UI prvků, jejich přesunu nebo transformace jsou velmi jednoduché a tvůrce si vystačí se základním UIView.animate(), popř. novějším přístupem v podobě UIViewPropertyAnimator API. Co když ale zatoužíme po něčem složitějším? Animované firemní logo při spuštění aplikace vypadá moc hezky, ale chudák programátor aby si při jeho implementaci vlasy vytrhal. V takovém případě je čas se poohlédnout po něčem, co by nám usnadnilo práci a zákazníkovi ušetřilo peníze. Jednou z voleb může být například Lottie.
Animuj jednou, použij kdekoliv
Lottie je multiplatformní open-source knihovna, původně od společnosti Airbnb, určená pro snadnou integraci již existujících animací na celou řadu platforem. Vstupem je speciálně formátovaný JSON soubor a výstupem krásná animace s minimem nutných zásahů ze strany programátora.
Konfigurační soubor lze snadno vyexportovat z programu Adobe After Effects, Sketch nebo Haiku pomocí pluginu Bodymovin a pak rovnou použít například v mobilních aplikacích na platformě iOS, Android nebo i multiplatformním React Native či na webových stránkách.
Prostým převzetím animace a jejím přehráním to ale nemusí skončit, dá se s ní totiž dál pracovat. A to je další silná stránka Lottie.
Designér to neudělal špatně, ale já bych tam ještě...
Znáte to – dostane se k vám hotová animace od designéra, vy ji nasadíte do aplikace a pak to přijde: "Nemohla se by se přehrávat trochu rychleji? A co takhle změnit tenhle obrázek? Nezměníme lehce odstín téhle zelené čáry?" Začne nekonečné ladění do nejmenších detailů, dokud nejsou všichni na 100% spokojení (tedy kromě designéra 🙂). I v tomto je Lottie silné.
Pojďme se podívat na některé z mnoha možných modifikací, které jsou k dispozici.
AnimationImageProvider
AnimationImageProvider je protokol, s jehož pomocí můžeme nahrávat obrázky do animací. Lottie samotné nabízí několik předdefinovaných providerů, které nám usnadní načítání obrázku např. z bundle aplikace (BundleImageProvider), z nastavené cesty k souborům (FilePathImageProvider) nebo například z URL.
Díky tomu můžeme měnit obrázky v animaci i za běhu programu a nejsme odkázání pouze na ty uložené přímo v aplikaci.
Přehrávání animace
Animace nemusí běžet pouze od začátku do konce nebo ve smyčce. Lze například postupovat v krocích podle procentuální hodnoty, nebo podle speciálních značek, které designér přidá přímo do animace. Tím nejsme odkázáni na složité výpočty času nebo počtu snímků, ale pouze pomocí speciální metody určíme, kde se má animace zastavit. Toto je velmi vhodné pro synchronizaci krokování animace mezi platformami a různými zařízeními. Odpad á tak závislost na hardwaru a jeho vlastnostech (framerate apod.)
Dynamické zadávání hodnot parametrů pro animaci
Titulek zní honosně, ale v podstatě jde o to, že téměř jakýkoliv parametr animace jde konfigurovat dynamicky. Lottie nám to umožňuje pomoci keyPaths a Value providerů. Pomocí metody AnimationView.setValueProvider(_ valueProvider: AnyValueProvider, keypath: AnimationKeypath) tak můžeme změnit barvu nebo jinou hodnotu požadovaného parametru. Samotné hodnoty poskytuje objekt, který implementuje protokol AnyValueProvider a stejně jako u image providerů popsaných výše, i zde Lottie nabízí několik předdefinovaých providerů pro okamžité použití. Jedním z nich je ColorValueProvider. Z názvu je patrné, že pomocí něj můžeme měnit barvu animovaných prvků.
Vypínání a zapínání částí animace
Lottie animace se vyznačují tím, že se mohou skládat z více částí, tzv. nodů. Můžete mít třeba animované pozadí a na něm několik nezávislých objektů. Vaším úmyslem je pak tyto objekty postupně zapínat a vypínat podle nějakého vstupu od uživatele, a abyste nemuseli mít několik animací poskládaných na sobě, stačí využít animaci jednu a pouze modifikovat co má a nemá být vidět.
Přidávání subviews do animace
Další silná věc Lottie. Do jednotlivých vrstev animace se dají přidat další subviews, které se poté animují a pohybují spolu s danou vrstvou. Mají i stejný systém souřadnic, takže vzájemné pozicování je o to jednodušší.
Lottie animace: Nebojte se toho
Jak je vidět ze stručného přehledu výše, Lottie vám může ušetřit spoustu času při implementaci složitých animací do vaší aplikace. Nemusíte dokonce ovládat žádný z požadovaných grafických programů. Na internetu je ke stažení hromada již hotových řešení. Stačí pouze stáhnout JSON soubor, přidat ho do aplikace a v případě potřeby jej upravit podle svých představ. Tak do toho. 🙂
