Фрамер Мотион библиотека доноси читав низ функција анимације у ваше Реацт апликације.
Анимирање Реацт компоненте док улази или излази са екрана може бити изазов. То је зато што, када сакријете компоненту, Реацт је уклања из ДОМ-а, што је чини недоступном за анимацију. Када поново прикажете компоненту, Реацт је поново додаје у ДОМ што може довести до наглог изгледа без анимације.
Овај проблем можете решити помоћу библиотеке анимација као што је Фрамер Мотион.
Шта је Фрамер Мотион?
Фрамер Мотион је библиотека анимација спремна за продукцију за Реацт. Пружа низ компоненти, кукица, кључних кадрова и прилагођених функција ублажавања за креирање и контролу анимација.
Једна од предности Фрамер Мотион-а је то што олакшава креирање глатких и флуидних анимација без потребе за писањем много ЈаваСцрипт кода или израчунавањем за сваки прелаз.
Такође има систем догађаја, који можете да користите за покретање анимација на основу корисничког уноса, као што су кликови на дугме и покрети, стварајући интерактивне и динамичке интерфејсе који се осећају осетљиво.
Да бисте демонстрирали како да користите Фрамер Мотион у Реацт-у, анимираћете компоненту која улази и напушта екран када кликнете на дугме.
Креирање Реацт пројекта
Да бисте креирали Реацт пројекат, мораћете инсталирајте Ноде.јс и нпм (Ноде Пацкаге Манагер) на вашој машини ако нисте.
Када инсталирате ове зависности, можете креирајте нови Реацт пројекат користећи Вите покретањем команде иарн вите у вашем терминалу.
предиво вите
Ова команда ће креирати нову фасциклу са унапред инсталираним свим потребним датотекама и зависностима. Идите до фасцикле и покрените развојни сервер командом иарн старт.
почетак предиваИнсталирање Фрамер Мотион-а у Реацт-у
Инсталирајте Фрамер Мотион тако што ћете покренути ову команду:
нпм инсталл фрамер-мотион
Ова команда ће додати Фрамер Мотион као зависност вашем пројекту.
Анимирање компоненте
Да бисте анимирали компоненту док улази и излази са екрана у Реацт користећи Фрамер Мотион, потребно је да је умотате у компоненту покрета.
Компонента покрета пружа скуп својстава за анимирање улаза и изласка компоненте. Можете да користите почетне, анимиране и излазне реквизите да контролишете његову видљивост и положај.
Да бисте га видели у акцији, додајте следећи код на врх Апп.јск да бисте увезли компоненту покрета из фрамер-мотион.
увоз { кретање } из"фрамер-мотион";
Затим креирајте компоненту коју желите да анимирате тако што ћете је омотати компонентом покрета. Овај пример користи елемент див, али можете користити било који други елемент који желите, као што су дугме, ли и п између осталог.
увоз { мотион, АниматеПресенце } из"фрамер-мотион"
функцијаАпликација() {
повратак (
<>
почетни={{ Икс: -100, непрозирност: 0 }}
анимате={{ Икс: 0, непрозирност: 1 }}
излаз={{ Икс: -100, непрозирност: 0 }}
>Послано!</p>
</motion.div>
</>
)
}
Компонента покрета вам омогућава да анимирате див елемент који садржи текст „Послато!“.
Тхе почетни, анимирати, и излаз својства компоненте покрета дефинишу улазне и излазне анимације компоненте. Када се компонента првобитно прикаже, почеће са к позицијом од -100 (ван екрана лево) и непрозирношћу од 0 и постати невидљива.
Својство анимате дефинише како компонента треба да анимира када уђе на екран, у овом случају се креће од к позиција од -100 до позиције к од 0 (клизи са леве стране) и постепено бледи у непрозирност од 1 и постаје потпуно видљиво.
Коначно, својство излаза дефинише како компонента треба да анимира када је уклоните са екрана. У овом случају, компонента ће склизнути са екрана улево са к положајем од -100 и постепено ће избледети до непрозирности од 0.
Такође морате да премотате компоненту покрета са компонентом АниматеПресенце из фрамер-мотион у анимиране компоненте када их уклоните из Реацт ДОМ стабла.
Сада када сте дефинисали улазну и излазну анимацију, можете додати дугме за покретање анимације. Ево модификоване компоненте са дугметом:
увоз { АниматеПресенце, покрет } из"фрамер-мотион";
увоз { усеСтате } из"реаговати";функцијаАпликација() {
конст [исВисибле, сетИсВисибле] = усеСтате(истина);
конст тогглеВисибилити = () => {
сетИсВисибле(!исВисибле);
};
повратак (
<>
{исВисибле && ( <мотион.див
почетни={{ Икс: -100, непрозирност: 0 }}
анимате={{ Икс: 0, непрозирност: 1 }}
излаз={{ Икс: -100, непрозирност: 0 }}
>
Послано!</p>
</motion.div>)}
</AnimatePresence>
Овај ажурирани код додаје променљиву стања која се зове исВисибле помоћу куке усеСтате. Ова променљива прати да ли компонента треба да буде видљива. Функција тогглеВисибилити мења вредност исВисибле између тачне и нетачне када кликнете на дугме.
Ви сада условно приказивање компоненте у зависности од вредности исВисибле. Ако је исВисибле тачно, компонента покрета ће се приказати са улазном анимацијом.
На крају, додајте онЦлицк обрађивач догађаја дугмету које позива функцију тогглеВисибилити, ажурира стање исВисибле и покреће анимацију улаза или излаза компоненте покрета.
Додавање функције ублажавања
Функција ублажавања контролише брзину промене анимације током времена. Он дефинише време анимације тако што наводи како анимација треба да се убрза или успори како напредује. Без функције ублажавања, анимација се може приказати пребрзо.
Фрамер Мотион нуди неколико функција ублажавања које можете изабрати, укључујући еасеИнОут. Увезите га на врх Апп.јск из фрамер-мотион да бисте га користили.
увоз {мотион, еасеИнОут} из"фрамер-мотион";
Затим га додајте у прелазни објекат у компоненти покрета:
почетни={{ Икс: -100, непрозирност: 0 }}
анимате={{ Икс: 0, непрозирност: 1, прелаз: { трајање: 0.5, ублажити, лакоца: еасеИнОут } }}
излаз={{ Икс: -100, непрозирност: 0, прелаз: { трајање: 0.5, ублажити, лакоца: еасеИнОут } }}
>
Послано!</p>
</motion.div>
Својство дуратион специфицира колико дуго анимација треба да траје.
Користите обичан ЦСС за једноставне анимације
Има још много тога што можете да урадите са Фрамер Мотион, укључујући 3Д анимацију. Међутим, није вам увек потребна библиотека да бисте креирали анимације. За једноставне анимације као што су прелази преко лебдења, увек можете користити обичан ЦСС.