Toolbar Animace v React Native

V prvním článku jsme vyzkoušeli, jak vytvořit Ripple Effect pomocí Animated API v React Native. Šlo o animaci jednoho View. V tomto článku se podíváme na animaci toolbaru, kde budeme potřebovat hned několik animací najednou, abychom dosáhli podobného efektu, jaký vidíme na uvodním obrázku.

Abychom zachovali nějakou rozumnou délku pro tento tutoriál, rozdělíme jej na dvě části. V této se budeme bavit o ikonkách a textu na toolbaru. A příště si řekneme, jak docílit animace pozadí.

Ukázka je převzata z open source knihovny react-native-material-ui, kterou vyvíjím spolu s rezervačním systémem Reservio.

Myšlenka

Pro přehlednost rozdělíme Toolbar do čtyř komponent. LeftElement, CenterElement, RightElement. A pak budeme potřebovat samotnou Toolbar komponentu, která se bude starat o animaci pozadí a o které se budeme podrobněji bavit příště.

Když to zjednodušíme, Toolbar může nabývat dvou stavů. Jeden kdy je vyhledávání aktivní a druhý, kdy není. My budeme animovat to, co je mezi nimi.

U levé ikony animujeme rotaci a změnu mezi menu a šipkou. U nadpisu půjde o jednoduchou opacity animaci a překreslení z Text komponenty na TextInput komponentu.

Pojďme na to

Nejdříve si vytvořme jednoduché View. Můžeme si všimnou, že jde pouze o statické View. Žadný stav, žádná animace.

Pro levou a pravou ikonku je kód téměř totožný, proto sem umístím zatím jen levou ikonku. IconToggle komponenta je propůjčena z react-native-material-ui. Navíc jsme se o ní podbrobně bavili v předchozím článku.

Nakonec komponenta pro střední element, tedy text na toolbaru. A teď už to můžeme rozhýbat.

Pojďme přidat stav

Nejdříve musíme přidat do Toolbaru stav, který bude víceméně řídit animaci.

Na následujícím Gistu vidíme úpravu Toolbar komponenty tak, abychom získali chování, které vidíme na předchozím obrázku.

Pravou ikonkou zapínáme vyhledávání, tedy nastavujeme isSearchActive na true. Poté nasloucháme ve střední komponentě, zda se mění hodnota TextInput komponenty. Tuto hodnotu pak předáváme znovu do právé komponenty, která zobrazí navíc křížek pro smazání hodnoty. Levá komponenta se změní na šipku pro uzavření vyhledávání, která po stisku opět nastaví isSearchActive na false. Jednoduché. Pro ilustraci přidám pouze změnu kódu pro pravou ikonku, levá je analogická.

Pojďme animovat

Začneme levou ikonkou. Rotace a změna z menu ikony na šipku. Pak budeme pokračovat opacity animací nadpisu a pravou ikonku necháme beze změny.

Left element

Myšlenka je jednoduchá. Začneme rotovat menu do 90 stupňů. Jakmile dosáhneme půlky, změníme přes stav ikonku na šipku a spustíme doanimování z 90 stupňů do 180 stupňů. Animated API nabízí možnost definovat callback v metodě start, který se volá po ukončení animace. A ten využijeme právě pro změnu ikonky. (Je pravda, že by se mi zde líbila nějaká mikro animace, ale o tom dnešní článek není. Třeba příště?)

Celý proces spouštíme v componentWillReceiveProps, kde se hlídáme změnu isSearchActive. Je třeba pouze dávat pozor zda vyhledávání otevíráme (animujeme z 0 do 180 stupňů) anebo zavíráme (animujeme ze 180 do 0 stupňů).

Novinkou je zde interpolate funkce (řádek 40). Ta zařidí převod z int čísla na stupně, které je třeba poslat do rotate property.

Center element

U CenterElement komponenty budeme postupovat obdobně. Do stavu si uložíme, zda máme zobrazit TextInput komponentu a opacity hodnotu, kterou budeme animovat. Poté, opět v componentWillReceiveProps, spouštíme animaci.

Nejdříve spouštíme opacity animaci z 1 na 0. Text tedy začíná mizet. Jakmile zmizí, změníme this.state.textInput na true. Tím si zajistíme vykreslení TextInput komponenty a spouštímě druhou opacity animaci z 0 na 1. TextInput se začíná zobrazovat.

Touto jednoduchou opacity animací to dnes ukončíme. Vše máme připravené na příště, kdy si ukážeme, jak animovat pozadí toolbaru.

Závěrem

Pokud se Vám článek líbí, budu rád, když ho podpoříte sdílením dál. Další článek ze série se objeví v publikaci React Native v pohybu. Zároveň už přemýšlím o další animaci pro react-native-material-ui knihovnu. Pokud máte nějaký nápad, napište do komentářů.


Podotýkám, že tento kód není připravený pro produkci a slouží pouze jako ukázka práce s Animated API. Do produkce můžete využít react-native-material-ui knihovnu, kterou vyvíjím jako open source společně s rezervačním systémem vznikajícím u nás v reservio.com. A máte-li chuť se podílet na vývoji rezervačního systému, který se využívá v 55 zemích po celém světě, tak se ozvěte.