Како додати анимације у своје Реацт апликације помоћу Фрамер Мотион-а

Анимација је кључни део скоро сваке модерне веб апликације. То је такође један од најтежих делова за исправљање.

Фрамер Мотион је библиотека направљена за Реацт која олакшава анимирање компоненти.

Како функционише Фрамер Мотион

Фрамер Мотион користи компоненту покрета за анимације. Сваки ХТМЛ/СВГ елемент има еквивалентну компоненту покрета која има реквизите за покрете и анимације. На пример, обичан ХТМЛ див изгледа овако:

<див>див>

Док еквивалент Фрамер Мотион изгледа овако:

<мотион.див>мотион.див>

Компоненте покрета подржавају ан анимирати проп који покреће анимације када се његове вредности промене. За сложене анимације користите усеАнимате кука са реф.

Анимација у Фрамер Мотион-у

Пре него што користите Фрамер Мотион у свом пројекту, морате да имате Ноде.јс рунтиме и Иарн пакет менаџер инсталиран на вашем рачунару и разуме шта је Реацт и како га користити.

Отворите свој терминал и покрените:

гит клон гит@гитхуб.цом: макеусеофцоде/фрамер-мотион-апп.гит
цд фрамер-мотион-апп
пређе
иарн дев

Када отворите локални хост: 5173 у вашем претраживачу, видећете ово:

Сада можете да креирате своју прву једноставну анимацију, дугме које расте при лебдењу и смањује се када курсор напусти.

Отвори срц/Апп.јск датотеку у уређивачу кода. Ова датотека садржи функционалну компоненту која враћа Реацт фрагмент. Увезите Дугме компоненту, а затим је рендерујте, прелазећи у а текст реквизит:

Анимирано дугме</h4>
Пређите мишем преко дугмета да бисте видели ефекат</div>
"Лебди ме"/>
</section>

Затим уредите Буттон.јск датотеку и увозите кретање корисност из фрамер-мотион:

увоз { кретање } из"фрамер-мотион"

Сада замените обичан дугме елемент са кретање.[елемент] саставни део. У овом случају користите кретање.дугме саставни део.

Затим додајте а вхилеХовер гестуре проп и проследите објекат вредности на који Фрамер Мотион треба да анимира када корисник пређе мишем преко дугмета.

Скала: 1.1 }}>
{тект}
</motion.button>

Дугме ће сада бити анимирано када померите показивач миша преко њега или из њега:

Можда се питате зашто се овај демо не користи ЦСС анимације уместо тога. Фрамер Мотион има предности у односу на ЦСС јер се интегрише са Реацт стањем и генерално резултира чистијим кодом.

Затим покушајте нешто сложеније: анимирање модалног. У Бацкдроп.јск, увезите услужни програм за кретање и креирајте функционалну компоненту са онЦлицк и деца реквизити. Повратак а мотион.див компонента са класом „позадина“ и онЦлицк слушалац у ЈСКС.

извозУобичајенофункцијаПозадина() {
повратак (<>

 </motion.div>
 </>)
}

Затим додајте три реквизита и то: почетни, анимирати, и излаз. Ови реквизити представљају оригинално стање компоненте, стање у које компонента треба да анимира, и стање у коме би компонента требало да буде након анимације, респективно.

Додати онЦлицк и деца реквизити за мотион.див и подесите трајање прелаза на 0,34 секунде:

извозУобичајенофункцијаПозадина ({онЦлицк, деца}){
повратак (<>
 онЦлицк={онЦлицк}
 цлассНаме="позадина"
 почетни={{ непрозирност: 0, бацкдропФилтер:"замућење (0 пиксела)" }}
 анимате={{ непрозирност: 1, бацкдропФилтер:„замућење (3,4 пиксела)“ }}
 излаз={{ непрозирност: 0, бацкдропФилтер:"замућење (0 пиксела)"}}
 транзиција={{
 трајање: 0.34,
 }}
 >
 {деца}
 </motion.div>
 </>)
}

Тһе Позадина компонента је омот за Модал саставни део. Кликом на позадину одбацујете модал. У Модал.јск, увоз кретање и компоненту Позадина. Подразумевана функционална компонента прихвата пропс: цлосеМодал и текст. Креирајте варијантну променљиву као објекат.

конст варијанте = {
 почетни: {
 и: "-200%",
 непрозирност: 1,
 },
 видљиво: {
 и: "50%",
 прелаз: {
 трајање: 0.1,
 тип: "пролеће",
 пригушење: 32,
 крутост: 500
 }
 },
 излаз: {
 и: "200%",
 }
 }

Вратите компоненту мотион.див омотану компонентом Бацкдроп са пропсом „варијанти“ који показује на објекат варијанти. Варијанте су скуп унапред дефинисаних стања анимације у којима би компонента могла да се налази.

 онЦлицк={(е) => е.стопПропагатион()}
 цлассНаме="модал"
 варијанти={варијанти}
 почетни='почетно'
 анимате='видљиво'
 екит='излаз'
 >
 {тект}
 </motion.div>
</Backdrop>

Затим морате да додате функционалност за приказ модалног када корисник кликне на дугме. Отвори Апп.јск датотеку и увозите усеСтате Реаговати кука и Модал саставни део.

увоз { усеСтате } из"реаговати";
увоз Модал из"./цомпонентс/Модал";

Затим креирајте а модалОпен стање са подразумеваном вредношћу постављеном на лажно.

конст [модалОпен, сетМодалОпен] = усеСтате(лажно);

Затим дефинишите функцију цлосеМодал који поставља модалОпен на лажно.

функцијацлосеМодал() {
 сетМодалОпен(лажно)
}

На врху Реацт фрагмента, условно рендерујте а Модал компоненту и положити одговарајуће текст проп са цлосеМодал проп.

{модалОпен && <Модалтекст=„Ово је модални анимирани Фрамер Мотион“}

Затим, у другом одељак елемент, рендер а дугме елемент са обрађивачем догађаја онЦлицк који поставља модалОпен на фалсе.

 сетМодалОпен(истина)}>Прикажи модал</button>

Можда ћете приметити да Реацт искључује Модалну компоненту из ДОМ-а без излазне анимације. Да бисте то поправили, потребан вам је АниматеПресенце саставни део. Увези АниматеПресенце из фрамер-мотион.

увоз {АниматеПресенце} из'фрамер-мотион';

Сада умотајте Модал компоненту у АниматеПресенце компоненту и подесите почетни проп за лажно и режим чекати".

лажно} моде="чекати">
 {модалОпен && <Модалтекст=„Ово је модални анимирани Фрамер Мотион“цлосеМодал={цлосеМодал} />}
</AnimatePresence>

Компонента АниматеПресенце омогућава завршетак анимације за излаз пре него што је Реацт искључи из ДОМ-а.

Фрамер Мотион може да анимира компоненте приликом померања користећи вхилеИнВиев проп. Отвори СцроллЕлемент.јск, и увозите кретање корисност. Промена див до мотион.див са класом "сцролл-елемент".

 почетни={{ непрозирност: 0, Скала: 0, ротирати: 14 }}
 вхилеИнВиев={{ непрозирност: 1, Скала: 1, ротирати: 0 }}
 транзиција={{ трајање: .8 }}
 виевпорт={{ једном: истина }}
 цлассНаме='сцролл-елемент'
>
 Сцролл Елемент
</motion.div>

Тһе виевпорт проп указује на објекат који поставља једном до истина. Следеће, у Апп.јск датотеку, увезите СцроллЕлемент компоненту и дефинише променљиву сцроллЕлементЦоунт која садржи целобројну вредност.

дозволити сцроллЕлементЦоунт=14;

У последњем одељак елемент, креирајте низ са одређеном дужином дефинисаном помоћу сцроллЕлементЦоунт који пресликава сваки елемент низа и генерише компоненту са јединственим кључем на основу индекса и.

{[...Арраи (сцроллЕлементЦоунт)].мап((к, и) =><СцроллЕлементкључ={и} />)}

Сада, враћајући се у претраживач, елементи би требало да анимирају када их скролујете у приказ.

Алтернативе Фрамер Мотион-у

Фрамер Мотион није једина библиотека анимација на тржишту. Ако вам се не свиђа начин на који Фрамер Мотион ради ствари, можете испробати друге библиотеке попут Реацт Спринг.

Такође можете користити ЦСС анимације, које сви модерни претраживачи подржавају изворно, али укључене технике могу бити тешке за учење и подешавање.

Побољшање корисничког искуства помоћу анимација

Сваки корисник очекује глатко искуство када користи веб апликацију. Веб локација или апликација без анимација изгледају статичне и не реагују. Анимације побољшавају корисничко искуство јер их можете користити за преношење повратних информација кориснику када изврши одређену радњу.