Библиотеката Framer Motion предоставя цял набор от функции за анимация към вашите React приложения.

Анимирането на React компонент, докато влиза или излиза от екрана, може да бъде предизвикателство. Това е така, защото когато скриете компонент, React го премахва от DOM, което го прави недостъпен за анимация. Когато покажете компонента отново, React го добавя отново към DOM, което може да доведе до внезапно появяване без анимация.

Можете да разрешите този проблем с библиотека за анимации като Framer Motion.

Какво е Framer Motion?

Framer Motion е готова за производство анимационна библиотека за React. Той предоставя набор от компоненти, кукички, ключови кадри и персонализирани функции за облекчаване за създаване и контролиране на анимации.

Едно предимство на Framer Motion е, че улеснява създаването на плавни и плавни анимации, без да е необходимо да пишете много JavaScript код или да правите изчисления за всеки преход.

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

instagram viewer

За да демонстрирате как да използвате Framer Motion в React, ще анимирате компонент, който влиза и излиза от екрана, когато щракнете върху бутон.

Създаване на React проект

За да създадете React проект, ще трябва да инсталирайте Node.js и npm (Node Package Manager) на вашата машина ако не сте.

След като инсталирате тези зависимости, можете създайте нов проект React с помощта на Vite като изпълните командата yarn vite във вашия терминал.

прежда вит

Тази команда ще създаде нова папка с всички необходими файлове и предварително инсталирани зависимости. Отидете до папката и стартирайте сървъра за разработка с командата yarn start.

начало на преждата

Инсталиране на Framer Motion в React

Инсталирайте Framer Motion, като изпълните тази команда:

npm инсталирайте framer-motion

Тази команда ще добави Framer Motion като зависимост към вашия проект.

Анимиране на компонент

За да анимирате компонент, докато влиза и напуска екрана в React с помощта на Framer Motion, трябва да го обвиете в компонента за движение.

Компонентът за движение предоставя набор от свойства за анимиране на входа и изхода на компонента. Можете да използвате началните, анимираните и изходните подпори, за да контролирате неговата видимост и позиция.

За да го видите в действие, добавете следния код в горната част на App.jsx, за да импортирате компонента за движение от framer-motion.

импортиране {движение} от"framer-motion";

След това създайте компонента, който искате да анимирате, като го обвиете с компонента за движение. Този пример използва елемент div, но можете да използвате всеки друг елемент, който искате, като бутон, li и p между другото.

импортиране {движение, AnimatePresence} от"framer-motion"
функцияПриложение() {
връщане (
 <>

 първоначално={{ х: -100, непрозрачност: 0 }}
 анимация={{ х: 0, непрозрачност: 1 }}
 изход={{ х: -100, непрозрачност: 0 }}
 >
Изпратено!</p>
 </motion.div>

 </>
 )
}

Компонентът за движение ви позволява да анимирате елемента div, съдържащ текста „Изпратено!“.

The начален, оживявам, и изход свойствата на компонента за движение дефинират входните и изходните анимации на компонента. Когато компонентът се визуализира първоначално, той ще започне с позиция x от -100 (извън екрана вляво) и непрозрачност 0 и ще стане невидим.

Свойството animate определя как компонентът трябва да анимира, когато влезе в екрана, в този случай се движи от x позиция от -100 до позиция x от 0 (плъзга се отляво) и постепенно избледнява до непрозрачност от 1 и става напълно видими.

И накрая, свойството exit определя как компонентът трябва да анимира, когато го премахнете от екрана. В този случай компонентът ще се плъзне от екрана вляво с позиция x от -100 и постепенно ще изчезне до непрозрачност от 0.

Също така трябва да обвиете компонента за движение с компонента AnimatePresence от framer-motion, за да анимирате компоненти, когато ги премахнете от React DOM дървото.

Сега, след като сте дефинирали анимациите за влизане и излизане, можете да добавите бутон за задействане на анимацията. Ето модифицирания компонент с бутона:

импортиране { AnimatePresence, движение } от"framer-motion";
импортиране {useState} от"реагира";
функцияПриложение() {
конст [isVisible, setIsVisible] = useState(вярно);


конст toggleVisibility = () => {
 setIsVisible(!isVisible);
 };


връщане (
 <>

 {isVisible && ( <движение.разр
 първоначално={{ х: -100, непрозрачност: 0 }}
 анимация={{ х: 0, непрозрачност: 1 }}
 изход={{ х: -100, непрозрачност: 0 }}
 >
Изпратено!</p>
 </motion.div>)}
 </AnimatePresence>

Този актуализиран код добавя променлива на състоянието, наречена isVisible, използвайки куката useState. Тази променлива проследява дали компонентът трябва да бъде видим. Функцията toggleVisibility превключва стойността на isVisible между true и false, когато щракнете върху бутона.

Ти си сега рендиране на компонента условно в зависимост от стойността на isVisible. Ако isVisible е true, компонентът за движение ще се визуализира с входната анимация.

И накрая, добавете манипулатор на събитие onClick към бутона, който извиква функцията toggleVisibility, актуализира състоянието на isVisible и задейства анимацията за влизане или излизане на компонента за движение.

Добавяне на функция за облекчаване

Функция за облекчаване контролира скоростта на промяна на анимацията във времето. Той определя времето на анимация, като указва как анимацията трябва да се ускорява или забавя, докато напредва. Без функция за облекчаване анимацията може да се изобрази твърде бързо.

Framer Motion предоставя няколко функции за облекчаване, от които можете да избирате, включително easeInOut. Импортирайте го в горната част на App.jsx от framer-motion, за да го използвате.

импортиране {motion, easeInOut} от"framer-motion";

След това го добавете към преходния обект в компонента за движение:

 първоначално={{ х: -100, непрозрачност: 0 }}
 анимация={{ х: 0, непрозрачност: 1, преход: { продължителност: 0.5, лекота: easeInOut } }}
 изход={{ х: -100, непрозрачност: 0, преход: { продължителност: 0.5, лекота: easeInOut } }}
>
Изпратено!</p>
</motion.div>

Свойството duration указва колко дълго трябва да се изпълнява анимацията.

Използвайте обикновен CSS за прости анимации

Има много повече, които можете да правите с Framer Motion, включително 3D анимация. Въпреки това, не винаги се нуждаете от библиотека, за да създавате анимации. За прости анимации, като например преходи при задържане на курсора на мишката, винаги можете да използвате обикновен CSS.