Научете как да добавяте прости анимации към вашето приложение React с минимални усилия за програмиране.

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

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

Как работи Framer Motion

Framer Motion използва компонента за движение за анимации. Всеки HTML/SVG елемент има еквивалентен компонент за движение, който има подпори за жестове и анимации. Например обикновен HTML div изглежда така:

<див>див>

Докато еквивалентът на Framer Motion изглежда така:

<движение.разр>движение.разр>

Компонентите за движение поддържат an оживявам prop, който задейства анимации, когато стойностите му се променят. За сложни анимации използвайте useAnimate кука с опиран реф.

Анимация в Framer Motion

Преди да използвате Framer Motion във вашия проект, трябва да имате Време за изпълнение на Node.js и мениджъра на пакети Yarn, инсталиран на вашия компютър и разберете какво е React и как да го използвате.

instagram viewer

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

Отворете вашия терминал и стартирайте:

git клонинг [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
прежда
разработка на прежда

Когато отворите локален хост: 5173 във вашия браузър ще видите това:

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

Отвори src/App.jsx файл в редактор на код. Този файл съдържа функционален компонент, който връща фрагмент от React. Импортирайте Бутон компонент, след което го изобразете, като преминете в a текст опора:


Анимиран бутон</h4>
Преместете мишката върху бутона, за да видите ефекта</div>

След това редактирайте Button.jsx файл и импортирайте движение полезност от framer-motion:

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

Сега сменете обикновения бутон елемент с движение [елемент] компонент. В този случай използвайте движение.бутон компонент.

След това добавете a whileHover gesture prop и предаване на обект със стойности, към които Framer Motion трябва да анимира, когато потребител задържи курсора на мишката над бутона.

мащаб: 1.1 }}>
{текст}
</motion.button>

Бутонът вече ще се анимира, когато преместите показалеца на мишката върху него или извън него:

Може би се чудите защо тази демонстрация не се използва CSS анимации вместо. Framer Motion има предимства пред CSS, защото се интегрира със състоянието на React и като цяло води до по-чист код.

След това опитайте нещо по-сложно: анимиране на модал. в Backdrop.jsx, импортирайте помощната програма за движение и създайте функционален компонент с onClick и деца реквизит. Връщане а движение.разр компонент с клас "backdrop" и onClick слушател в JSX.

износпо подразбиранефункцияфон() {
връщане (<>

 </motion.div>
 </>)
}

След това добавете три подпори, а именно: начален, оживявам, и изход. Тези подпори представляват съответно първоначалното състояние на компонента, състоянието, до което компонентът трябва да анимира, и състоянието, в което компонентът трябва да бъде след анимацията.

Добавете onClick и деца подпори към движение.разр и задайте продължителността на прехода на 0,34 секунди:

износпо подразбиранефункцияфон ({onClick, деца}){
връщане (<>
 onClick={onClick}
 className="фон"
 първоначално={{ непрозрачност: 0, backdropFilter:"размазване (0px)" }}
 анимация={{ непрозрачност: 1, backdropFilter:"размазване (3,4 пиксела)" }}
 изход={{ непрозрачност: 0, backdropFilter:"размазване (0px)"}}
 преход={{
 продължителност: 0.34,
 }}
 >
 {деца}
 </motion.div>
 </>)
}

The фон компонентът е обвивка за Модален компонент. Щракването върху фона отхвърля модала. в Modal.jsx, внос движение и компонента Backdrop. Функционалният компонент по подразбиране приема подпори: closeModal и текст. Създайте вариантна променлива като обект.

конст варианти = {
 инициал: {
 y: "-200%",
 непрозрачност: 1,
 },
 видимо: {
 y: "50%",
 преход: {
 продължителност: 0.1,
 Тип: "пролет",
 затихване: 32,
 твърдост: 500
 }
 },
 изход: {
 y: "200%",
 }
 }

Връща компонент motion.div, обвит от компонент Backdrop с подложка „variants“, сочеща към обекта variants. Вариантите са набор от предварително дефинирани състояния на анимация, в които може да се намира компонентът.


 onClick={(e) => e.stopPropagation()}
 className="модален"
 варианти={варианти}
 първоначално="начален"
 анимация="видим"
 изход="изход"
 >
 {текст}
 </motion.div>
</Backdrop>

След това трябва да добавите функционалност за показване на модала, когато потребител щракне върху бутона. Отвори App.jsx файл и импортирайте useState Реагирайте куката и Модален компонент.

импортиране {useState} от"реагира";
импортиране Модален от"./components/Modal";

След това създайте a modalOpen състояние със зададена стойност по подразбиране невярно.

конст [modalOpen, setModalOpen] = useState(невярно);

След това дефинирайте функция closeModal който определя modalOpen до невярно.

функцияcloseModal() {
 setModalOpen(невярно)
}

В горната част на фрагмента на React изобразете условно a Модален компонент и предайте съответния текст prop с closeModal prop.

{modalOpen && <Модалентекст=„Това е модална анимация с Framer Motion“}

След това, във втория раздел елемент, рендер a бутон елемент с манипулатор на събитие onClick, който задава modalOpen на false.

Може да забележите, че React демонтира модалния компонент от DOM без анимация за изход. За да поправите това, имате нужда от AnimatePresence компонент. Импортирайте AnimatePresence от framer-motion.

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

Сега обвийте компонента Modal в компонента AnimatePresence и задайте начален prop to false and the режим да чакам".

невярно} режим="изчакайте">
 {modalOpen && <Модалентекст=„Това е модална анимация с Framer Motion“closeModal={closeModal} />}
</AnimatePresence>

Компонентът AnimatePresence позволява изходните анимации да завършат, преди React да го демонтира от DOM.

Framer Motion може да анимира компоненти при превъртане с помощта на whileInView опора Отвори ScrollElement.jsx, и импортирайте движение полезност. промяна див да се движение.разр с клас "scroll-element".

 първоначално={{ непрозрачност: 0, мащаб: 0, завъртане: 14 }}
 whileInView={{ непрозрачност: 1, мащаб: 1, завъртане: 0 }}
 преход={{ продължителност: .8 }}
 viewport={{ веднъж: вярно }}
 className='елемент за превъртане'
>
 Елемент на превъртане
</motion.div>

The прозорец за изглед prop сочи към обект, който задава веднъж да се вярно. На следващо място, в App.jsx файл, импортирайте ScrollElement компонент и дефинирайте променлива scrollElementCount, която съдържа цяло число.

позволявам scrollElementCount=14;

В последния раздел елемент, създайте масив с определена дължина, определена от scrollElementCount който картографира всеки елемент от масива и генерира компонент с уникален ключ въз основа на индекса аз.

{[...Масив (scrollElementCount)].map((x, i) =><ScrollElementключ={i} />)}

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

Алтернативи на Framer Motion

Framer Motion не е единствената анимационна библиотека на пазара. Ако не харесвате начина, по който Framer Motion прави нещата, можете да изпробвате други библиотеки като Реагирайте пролетта.

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

Подобряване на потребителското изживяване с анимации

Всеки потребител очаква гладко изживяване, когато използва уеб приложение. Уебсайт или приложение без анимации изглежда статично и не реагира. Анимациите подобряват потребителското изживяване, защото можете да ги използвате, за да съобщите обратна връзка на потребителя, когато извърши определено действие.