Jak vytvořit animované mikrointerakce v React

Mikrointerakce vedou uživatele aplikací. Posilují vaše uživatelské prostředí a poskytují radost.

Možná jste viděli některé z úhledných příkladů mikrointerakcí na Dribble nebo CodePen. Ale víte, jak vytvořit vlastní knihovnu podobných widgetů UI?

V tomto článku se zaměřím na animované mikrointerakce pomocí React, populárního uživatelského rozhraní UI na Facebooku. Vytvořím tři interakce pro vyhledávací pole:

  • otevřete a zavřete textové pole
  • přesunout do horní části obrazovky
  • chvění (označující chybu)

Budu používat několik různých implementací:

  • Přechody CSS
  • reagovat-pohyb
  • reagující animace

Tady je živé demo a kód, který jej pohání.

Toto je jeden z několika příspěvků o vyšších řádech (HOC) a funkčních komponentách bez státní příslušnosti. První příspěvek je o opakovaném použití kódu v React and React Native, pomocí těchto technik.

Co je to mikrointerakce?

Dan Saffer (který napsal knihu) nám dává tuto definici: „Mikrointerakce jsou obsažené momenty produktu, které se točí kolem jediného případu použití - mají jeden hlavní úkol.“

Příklady mohou být jasnější. Některé mikrointerakce jsou všude, například změna kurzoru při najetí kurzorem na odkaz nebo vibrace telefonu při přepnutí do tichého režimu. Ostatní, například položka přidaná do nákupního košíku, zatím nejsou tak běžná.

Proč bych se měl zajímat o mikrointerakce?

Mikrointerakce mohou poskytnout zpětnou vazbu a učinit vaši aplikaci nezapomenutelnou. Když uživatelé mají tolik možností aplikace, lepší mikrointerakce mohou být klišé lepší pastou na myši, kterou byste měli vytvořit.

Ale nejsem designér UX. Doporučuji tedy přečíst příspěvek Nicka Babicha o mikrointerakcích.

Začínáme

K zavázání aplikace React budu používat aplikaci create-React, ale bude fungovat jakákoli metoda nastavení React. Také se mi líbí Material-UI, takže to taky importuji. (Tato volba je libovolná - můžete použít jinou knihovnu widgetů nebo ručně upravit své prvky.)

animace vyhledávání-aplikace-aplikace pro vyhledávání v aplikaci
animace pro vyhledávání CD
npm install --save material-ui rea-tap-event-plugin

Komponenta: Jednoduché vyhledávací pole

Vytvořím jednoduché vyhledávací pole. Bude obsahovat dva prvky: tlačítko ikony vyhledávání a textové pole. Vytvořím funkční komponentu bez státní příslušnosti pro vyhledávací pole. (Funkční komponenty bez státní příslušnosti jsou funkce, které vykreslují komponenty React a neudržují stav, tj. Používají setState. Další informace naleznete v tomto tutoriálu nebo v mém předchozím příspěvku.)

SearchBox.js

(Používám zpětné volání onClick později.)

Podpora isOpen nastaví otevřené nebo uzavřené vykreslování SearchBoxu.

isOpen = true / isOpen = false

Použití komponent vyššího řádu k oddělení obav

Mohl bych změnit SearchBox na běžnou součást a přidat kód, který by například otevřel a zavřel textové pole, když na něj klikneme.

Ale raději oddělím animaci od hlavního účelu vyhledávacího pole. Vyhledávací pole zobrazuje / zachycuje hodnotu dotazu a odesílá tento dotaz jinému řadiči. Jedná se o subjektivní rozhodnutí o návrhu, ale má to praktické výhody: Mohu znovu použít logiku mikrointerakce s jinou vstupní komponentou uživatele.

Komponenty vyššího řádu (HOC) jsou funkce, které vracejí novou komponentu. Tato komponenta zalomí součást (y) a přidává funkce. Vytvořím HOC pro přidání chování otevřeno / zavřeno do SearchBoxu.

Vytvořit rozšiřující-animation.js

Aktualizujte App.js takto:

Pokud spustíte npm start, zobrazí se ikona vyhledávání, kterou můžete klepnutím otevřít a zavřít textové pole.

Funguje to, ale otevírání a zavírání je otřesné. Animace může efekt vyhladit.

Animace

K animacím existují tři obecné přístupy.

  1. Přechody CSS
  2. Animace CSS
  3. rychlé a opakované vykreslování prvku simulujícího pohyb (rámování ručním klíčem)

Přechody CSS mění hodnotu vlastnosti (jako je šířka) po určitou dobu. Tato změna nemusí být lineární; můžete určit funkce pro změnu hodnot.

Animace CSS mění styl prvku (jako je velikost, barva a poloha). Každý přírůstkový styl je klíčovým rámcem. Vytvořením řady klíčových snímků dosáhnete požadovaného účinku.

Obě taktiky CSS opakovaně vykreslují prvky pro simulaci pohybu. Výpočty můžete provádět sami, tj. Možnost (3). Tento přístup používá několik animačních rámců Javascript, které spravují výpočty. (Použiji reakční pohyb v dalším příkladu.)

Všechny tyto techniky budu používat v příkladech níže, ale začnu s přechody CSS.

Rozšíření vyhledávacího pole

Rozšiřující se animace textového pole vyžaduje jednu vlastnost CSS: přechod

Změňte expanding-animation.js následujícím způsobem,

Při pohledu na změnu v řádku 21, další typy, SearchBox spojí tento styl s existujícími styly v řádcích 29 a 31 níže. (Za chvíli se vrátím k vlastnosti CSS přechodu v řádku 2.)

Aktualizujte SearchBox.js

Po sloučení stylů se animace projeví.

Přechod CSS: šířka

Výsledkem je plynulé rozšíření šířky textového pole, což dává vzhled, který se otevírá. Vlastnost přechodu CSS to řídí (z řádku 2 v expanding-animation.js).

přechod: 'šířka 0,75 s krychlový bezier (0,000, 0,795, 0,000, 1 000)'

Doporučujeme, abyste si přečetli dokumentaci k vlastnosti přechodu CSS, protože existuje celá řada možností. V příkladu jsou tři parametry:

  1. vlastnost ke změně: šířka
  2. trvání přechodu: 0,75 s
  3. funkce pro řízení časování: krychlový bezier (0,000, 0,795, 0,000, 1 000)

I když jsem si vybral krychlový bezier jako funkci, lineární nebo snadnost jsou mezi jinými možnostmi. Existují interaktivní nástroje, které vám pomohou vybrat tyto hodnoty, například tento tvůrce krychlových bezierů.

Přesunutí vyhledávacího pole

Podívejte se na následující animaci konceptu, kterou jsem našel na Dribble:

https://dribbble.com/shots/2751256-Google-Search

V interakci je více prvků; ale rád bych se zaměřil na pohyb vyhledávacího pole do horní části obrazovky.

Dokážu přesunout své skromné ​​vyhledávací pole s přechodem CSS. Vytvořte nový HOC, move-up-animation.js

Je to jako funkce makeExpanding HOC, kromě překladu (posun nahoru). Styl animace platí také pro vnější rám (div).

Aktualizujte App.js,

a měli byste vidět

Přechod CSS. transformovat: překládatY

Možná chcete skákací efekt. Mohli byste použít reakci-pohyb. Je to populární knihovna React, která používá dynamiku pružin k ovládání animací. (Dobrý úvod, Nash Vail, je tady.)

npm install - save rea-motion

Vytvořit jaro-nahoru-animation.js

Protože se nejedná o kurz reakcí a pohybu, stručně shrnu, jak to funguje. React-motion zalomí animovanou komponentu Target s vlastní komponentou Motion. (Existují další komponenty reakčního pohybu, jako jsou TransitionMotion a Staggered Motion.)

React-motion interpoluje pomocí pružinové dynamiky řadu přechodných hodnot. Poskytuje hodnoty animované komponentě jako styl. Tento styl určuje vizuální přechod v animaci.

Obrázek níže ukazuje výsledek (s vlnitou pružinou pro zvýraznění efektu).

dynamika pružiny reakčního pohybu

Reakční pohyb můžete použít pro celou řadu efektů. Například můžete změnit textové pole tak, aby se rozbalovalo jako jaro.

(spring-up-animation.js a move-up-animation.js mají stejnou logiku onClick state, takže jsem společné části refakturoval. Podrobnosti jsou zde.)

Třepání vyhledávacím polem

Chci uživateli poskytnout zpětnou vazbu ohledně chybných dotazů. Mohli byste použít chybové zprávy, ale rád bych udělal něco víc rozmarného: zatřepejte vyhledávacím polem.

Mohl bych použít reakci-pohyb, ale rád bych se podíval na jinou techniku: animaci klíčových snímků.

React-animations je knihovna React pro animace klíčových snímků. Vloží klíčové snímky CSS do šablony stylů DOM. (Ostatní příklady používají pouze vložené styly.)

npm install - save save-animations

Také potřebuji knihovnu, jako Radium nebo Afrodita, aby zvládl vstřikování stylů CSS. Vybral jsem si Afroditu, jak jsem ji už použil.

npm install - save aphrodite

Vytvořte další HOC, shake-animation.js

Existuje několik klíčových sekcí. Řádek 4 používá Afroditu k vytvoření šablony stylů pro efekt reaktivních animací, otřesy hlavy. Řádek 29 nastavuje třídu CSS pro animaci v cíli. (To vyžaduje vylepšení na SearchBox pro použití třídy CSS. Podívejte se na použití frameClass ve zdroji SearchBox.js.) Obslužný program onClick na řádku 17 je složitější.

Restartování animace

Chtěl bych udělat „potřesení hlavy“ pro každou chybu ověření (nebo jakoukoli použitou spouště). Ale protože je animace třídou CSS, nemůžu jednoduše znovu nastavit stejnou třídu; nemělo by to žádný účinek. Tento příspěvek CSS Tricks nastiňuje několik možností. Nejjednodušší je časový limit, který odstraní třídu animace CSS. Když ji znovu přidáte (pro novou událost), zobrazí se vám „shake head“.

reaktivace (používá klíčové snímky, animaci CSS)

Spojení: složení složité komponenty

Vytvořil jsem několik HOC pro různé animace. Můžete však také zřetězit HOC a vytvořit složenou komponentu. Po klepnutí se otevře textové pole a třese se chybným zadáním.

Nejprve je třeba provést několik změn ve vyhledávacím poli

SearchBox je nyní řízenou součástí (fantastický termín pro použití React ke správě vstupní hodnoty textového pole). Poskytuje také zpětné volání onSubmit pro odeslání vyhledávacího dotazu (když uživatel stiskne klávesu Enter).

Musíte také změnit shake-animation.js. Chvění by nemělo způsobit klepnutí na ikonu vyhledávání. Místo toho chci, aby další komponenta určila, kdy se „třese“. Tím se oddělí logika ověření od kódu, který řídí animaci.

startShake je příznak pro resetování animace. Ale toto je implementační detail. Měl by být zapouzdřen jako vnitřní stav v HOC makeShakeAnimation.

startShake závisí na shouldShake. Dokážu reagovat na změny rekvizity pomocí komponentyWillReceiveProps. (Je to nadřízený, komponenta ověření, poskytuje tyto rekvizity.) Takže jsem přesunul předchozí logiku onClick do komponentyWillReceiveProps.

Změna v řádku 27 {... this.props} předá všechny rekvizity zabalené komponentě Target. (Musím podobně změnit metodu vykreslování v rozšiřující-animation.js. Podrobnosti jsou zde.)

Nyní mohu přidat komponentu, která bude řídit, kdy se má třást.

Vytvořte vyhledávací pole-řadič.js

Toto je další HOC. Nemá vizuální prvky, ale řídí logické chování zabalené komponenty. (Dan Abramov má dobrý příspěvek vysvětlující takové oddělení.) V tomto případě jsou všechny dotazy chybné, ale ve skutečné aplikaci ověřuji dotazy a připojuji se k API.

Nakonec chci zdůraznit, že makeAnimatedValidationSearchBox je HOC, který zřetězuje další dva HOC.

const WrappedComponent = makeShakingAnimation (makeExpanding (Target));

Další malá aktualizace naApp.js

(Řádek 12 používá nový HOC)

a provést spuštění npm start

složená složka, vyrobená z řetězení tří HOC

Vytvořil jsem složenou komponentu, která používá více mikrointerakcí. Jsou opakovaně použitelné a diskrétní.

Zabalení

Vzorkoval jsem každý z těchto přístupů: přechody CSS, reaktivní pohyb a animace reakcí. Přál bych si, abyste si mohli vybrat jeden přístup, ale je těžké zkrotit jediný přístup pro všechny případy použití. Naštěstí můžete kombinovat knihovny a techniky. A můžete zapouzdřit podrobnosti do opakovaně použitelných HOC.

Možná budete chtít vyzkoušet knihovny, jako je změna složení, které usnadní vytváření HOC.

Reprezentace GitHub pro tento projekt je zde.

Prosím ♡ tento příspěvek a následuj mě pro budoucí příběhy. Děkuji za přečtení.