Как да изградим анимирани микровзаимодействия в React

Микроинтеракциите ръководят потребител чрез вашето приложение. Те подсилват вашето потребителско изживяване и доставят наслада.

Може би сте виждали някои от гладките примери за микровзаимодействия на Dribble или CodePen. Но знаете ли как да създадете своя собствена библиотека с подобни потребителски интерфейси?

В тази статия ще се съсредоточа върху анимираните микровзаимодействия с помощта на React, популярната, компонентно ориентирана интерфейсна рамка на Facebook. Ще създам три взаимодействия за поле за търсене:

  • отворете и затворете текстовото поле
  • преминете в горната част на екрана
  • клатете (показва грешка)

Ще използвам няколко различни реализации:

  • CSS преходи
  • реагират каданс
  • реагира-анимация

Ето демонстрация на живо и кода, който го захранва.

Това е един от няколко публикации за висш ред (HOC) и функционални компоненти без гражданство. Първата публикация е за повторното използване на кода в React и React Native, чрез тези техники.

Какво е микроинтеракция?

Дан Сафър (който написа книгата) ни дава това определение: „Микроинтерактивите съдържат продуктови моменти, които се въртят около един случай на използване - те имат една основна задача.“

Примерите може да са по-ясни. Някои микровзаимодействия са навсякъде, като например промяна на курсора, когато задържите курсора върху връзка или вибрация на вашия телефон, когато преминете в безшумен режим. Други, като например артикул, добавен в количката за пазаруване, все още не са толкова често срещани.

Защо трябва да се интересувам от Микроинтеракции?

Микро взаимодействията могат да осигурят обратна връзка и да направят приложението ви запомнящо се. Когато потребителите имат толкова много възможности за избор на приложения, по-добрите микро взаимодействия може да са клишето по-добра мишка, която трябва да изградите.

Но аз не съм UX дизайнер. Затова предлагам да прочетете публикацията на Ник Бабич за микровзаимодействията.

Приготвяме се да започнем

Ще използвам create-react-app за зареждане на приложение React, но всеки метод за настройка на React ще работи. Също така харесвам Material-UI, така че и аз ще го импортирам. (Този избор е произволен - бихте могли да използвате друга библиотека с джаджи или ръчно да стилизирате елементите си.)

създаване-реагиране на приложение-анимация на поле за търсене
cd-поле за търсене-анимация
npm install --съхранявайте материал-ui react-tap-event-plugin

Компонентът: Обикновено поле за търсене

Ще създам просто поле за търсене. Той ще се състои от два елемента: бутон за икона за търсене и текстово поле. Ще създам функционален компонент без състояние за полето за търсене. (Функционалните компоненти без състояние са функции, които правят React компоненти и не поддържат състояние, т.е. използват setState. Можете да научите повече в този урок или предишния ми пост.)

SearchBox.js

(Ще използвам обратното обаждане на onClick по-късно.)

Подпорът isOpen задава SearchBox отворено или затворено изобразяване.

isOpen = true / isOpen = false

Използване на компоненти за по-висок ред, за да се отделят притесненията

Мога да променя SearchBox на обикновен компонент и да добавя код, който ще отвори и затвори текстовото поле при щракване например.

Но предпочитам да отделя анимацията от основната цел на полето за търсене. Полето за търсене показва / улавя заявената стойност и изпраща тази заявка на друг контролер. Това е субективно дизайнерско решение, но има практически ползи: Мога да използвам отново логиката на микро-взаимодействие с друг компонент за въвеждане на потребител.

Компонентите с по-висок ред (HOC) са функции, които връщат нов компонент. Този компонент обвива компонент (и) и добавя функционалност. Ще създам HOC, за да добавя поведението за отваряне / затваряне в SearchBox.

Създайте разширяване-animation.js

Актуализирайте App.js, както следва:

Ако стартирате npm start, ще имате икона за търсене, която можете да щракнете, за да отворите и затворите текстовото поле.

Работи, но отварянето и затварянето се тресе. Анимацията може да изглади ефекта.

Анимации

Има три общи подхода към анимациите.

  1. CSS преходи
  2. CSS анимации
  3. бързо и многократно изобразяване на елемент за симулиране на движение (ръчно кадриране на клавиши)

CSS преходите променят стойност на свойството (като ширина) за известно време. Промяната не трябва да е линейна; можете да зададете функции за промяна на стойностите.

CSS анимациите променят стила на даден елемент (като размер, цвят и позиция). Всеки инкрементален стил е ключов кадър. Създавате серия ключови кадри, за да постигнете желания ефект.

И двете CSS тактики многократно правят елементи, за да симулират движение. Можете да направите изчисленията сами, т.е. опция (3). Няколко анимационни рамки на Javascript използват този подход, управлявайки изчисленията. (Ще използвам реакция-движение в по-късен пример.)

Ще използвам всички тези техники в примерите по-долу, но ще започна с CSS преходи.

Разширяване на полето за търсене

Анимацията с разширяващо се текстово поле се нуждае от едно свойство CSS: преход

Променете разширяващия-animation.js, както следва,

Като гледам промяната в ред 21, AdditionalStyles, SearchBox ще обедини този стил със съществуващите стилове в ред 29 и 31 по-долу. (След малко ще се върна към свойството CSS за преход в ред 2.)

Актуализирайте SearchBox.js

Със стилове, обединени, анимацията ще влезе в сила.

CSS преход: ширина

Резултатът е плавно разширяване на ширината на текстовото поле, придавайки външния вид, който се отваря. CSS свойството за преход контролира това (от ред 2 в extending-animation.js).

преход: 'ширина 0,75s кубик-безие (0,000, 0,795, 0,000, 1.000)'

Съветвам ви да прочетете документацията за свойството за преход на CSS, тъй като има най-различни опции. В примера има три параметъра:

  1. свойство за промяна: ширина
  2. продължителност на прехода: 0,75s
  3. функция за контрол на времето: кубично-безие (0.000, 0.795, 0.000, 1.000) '

Докато аз избрах кубик-безир като функция, линейна или лекота са сред другите опции. Има интерактивни инструменти, които ви помагат да изберете тези стойности, като например този кубично-безие строител.

Преместване на полето за търсене

Вижте следната анимация на концепцията, която намерих в Dribble:

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

Във взаимодействието има множество елементи; но бих искал да се съсредоточа върху движението на полето за търсене в горната част на екрана.

Мога да преместя скромното си поле за търсене с CSS преход. Създайте нов HOC, move-up-animation.js

Това е като функцията makeExpanding HOC, с изключение на превод (преместване нагоре). Също така стилът на анимация важи само за външната рамка (div).

Актуализирайте App.js,

и трябва да видите

CSS преход. трансформация: превеждаY

Може би искате ефект на подскачане. Бихте могли да използвате реакция-движение. Това е популярна библиотека React, която използва пролетната динамика за контрол на анимациите. (Добро въведение от Неш Вейл е тук.)

npm install - запазване на реакцията-движение

Създайте spring-up-animation.js

Тъй като това не е урок за реакция на движение, ще обобщя накратко как става това. React-motion обгръща анимирания компонент Target със собствен компонент Motion. (Има и други компоненти за реакция на движение, като например TransitionMotion и поетапно движение.)

Интерполати с реактивно движение, използвайки динамика на пружината, серия от междинни стойности. Той предоставя стойностите на анимирания компонент като стил. Този стил определя визуалния преход в анимацията.

Изображението по-долу показва резултата (с променлива пружина, за да подчертае ефекта).

динамика на пролетта на реакция-движение

Можете да използвате реакция-движение за редица ефекти. Например, можете да промените текстовото поле, за да се разшири като пружина.

(spring-up-animation.js и move-up-animation.js имат една и съща логика на състоянието на Клик, така че реконструирах общите части. Подробностите са тук.)

Разклащане на полето за търсене

Искам да дам обратна връзка на потребителя относно грешни заявки. Можете да използвате съобщения за грешки, но бих искал да направя нещо по-причудливо: разклатете полето за търсене.

Бих могъл да използвам реакция-движение, но бих искал да разгледам друга техника: анимация с ключови кадри.

React-анимации е библиотека React за анимации с ключови кадри. Той инжектира CSS ключови рамки в лист със стил DOM. (Другите примери са използвали само вградени стилове.)

npm install - запазване на реакции-анимации

Имам нужда и от библиотека, като Radium или Aphrodite, за да се справя с инжектирането на листа в CSS стил. Избрах Афродита, както съм я използвала преди.

npm install --съхранявайте афродита

Създайте друг HOC, shake-animation.js

Има няколко ключови раздела. Линия 4 използва Афродита, за да създаде таблица със стилове за ефекта на реагиране-анимации, главата-шейк. Ред 29 задава класа CSS за анимацията на Target. (Това изисква ощипване на SearchBox за използване на CSS класа. Вижте използването на frameClass в източника на SearchBox.js.) Манипулаторът на onClick от линия 17 е по-сложен.

Рестартиране на анимация

Бих искал да направя „клатене на главата“ при всяка грешка при валидиране (или каквото и да е използвано задействане) Но тъй като анимацията е CSS клас, не мога просто да задавам отново същия клас; няма да има ефект. Тази публикация на CSS трикове очертава няколко варианта. Най-простият е тайм-аут, който премахва класа за анимация CSS. Когато го добавите отново (за ново събитие), ще видите „разклащане на главата“.

реакция-анимации (използва ключови кадри, CSS анимация)

Поставянето му заедно: Съставяне на сложен компонент

Създадох няколко HOCs за различни анимации. Но можете също да свържете HOCs, за да създадете сложен компонент. Той ще отвори текстовото поле при щракване и ще се разклати при грешно въвеждане.

Първо, ще трябва да направите няколко промени в SearchBox

SearchBox вече е контролиран компонент (фантазия за използване на React за управление на входната стойност на текстовото поле). Той също така осигурява връщане на повикване, OnSubmit, за изпращане на заявката за търсене (когато потребителят натисне клавиша Enter).

Също така трябва да промените shake-animation.js. Щракването върху иконата за търсене не трябва да причинява разклащане. Вместо това искам друг компонент, който да определи кога да се „разтърся“. Това отделя логиката за валидиране от код, който контролира анимацията.

startShake е флаг за нулиране на анимацията. Но това е детайл за изпълнение. Той трябва да бъде капсулиран като вътрешно състояние в HOC на makeShakeAnimation.

startShake зависи от ShouldShake. Мога да използвам компонент компонент WillReceiveProps, за да отговоря на опорните промени. (Родителят, компонентът за валидиране, осигурява тези подпори.) Затова преместих предишната логика на onClick в компонент компонент WillReceiveProps.

Промяната в ред 27, {... this.props}, предава всички подпори на обвития компонент, Target. (Трябва също по подобен начин да променя метода на изобразяване в разширяване-animation.js. Подробностите са тук.)

Вече мога да добавя компонент, който ще контролира кога да се разклати.

Създайте поле за търсене-controller.js

Това е друг HOC. Той няма визуални елементи, но контролира логическото поведение на обвития компонент. (Дан Абрамов има добра публикация, обясняваща подобна раздяла.) В този случай всички заявки са погрешни, но в истинско приложение бих потвърдил заявките и се свържа с API.

И накрая, искам да подчертая, че makeAnimatedValidationSearchBox е HOC, който свързва две други HOC.

const WrappedComponent = makeShakingAnimation (makeExpanding (Target));

Друга малка актуализация на toApp.js

(В ред 12 се използва новата HOC)

и изпълнете стартиране npm start

съставен компонент, направен от свързване на три HOCs

Създадох сложен компонент, който използва множество микро взаимодействия. Те са многократни и дискретни.

Обобщавайки

Пробвах всеки от подходите: CSS преходи, реакция-движение и реакция-анимации. Иска ми се да изберете един подход, но е трудно да изкривите единен подход за всички случаи на употреба. За щастие, можете да смесвате и съвпадате библиотеки и техники. И можете да капсулирате детайлите в HOCs за многократна употреба.

Може да искате да проверите библиотеките, които препоръчват, които улесняват създаването на HOC.

Репото за GitHub за този проект е тук.

Моля ♡ този пост и ме последвайте за бъдещи истории. Благодаря за четенето.