Введение

Когда доступен такой инструмент, как Framer Motion, зачем писать много строк кода CSS для создания анимации? Веб-приложения выглядят более захватывающими и красивыми, когда они анимированы.

Многие разработчики избегают добавлять анимацию в свои веб-приложения, поскольку коды анимации могут быть очень сложными для написания. Однако с помощью Framer Motion вы можете выполнять анимацию всего несколькими строками кода. Эта внешняя библиотека в React.js делает анимацию невероятно простой, позволяя разработчику сосредоточиться на других аспектах проекта.

В этой статье мы рассмотрим функциональность, процесс установки и удобство использования Framer Motion, используя его для анимации текста и изображений.

Шаги, которые мы рассмотрим:


Предпосылки

Чтобы следовать этому руководству, вам необходимо иметь:

  • Четкое понимание основных технологий внешнего интерфейса, т. е. HTML, CSS и JavaScript.
  • Знание ReactJS
  • Установлен Node.js.


Что такое Framer Motion?

Framer motion — это мощная готовая к производству библиотека от Фреймер которые могут создавать различные стили анимации в DOM как элементы. Framer Motion — отличная альтернатива созданию сложных CSS-анимаций. Чтобы использовать Framer Motion, вам необходимо установить библиотеку и интегрировать ее в свой проект React.


Начало работы с Framer Motion в React

React требует, чтобы мы установили любые внешние библиотеки с помощью пакета npm перед их использованием. Установите Framer Motion с помощью следующей команды.

npm install framer-motion
Войти в полноэкранный режим

Выйти из полноэкранного режима

Следующим шагом будет импорт компонента Framer Motion, который вы хотите использовать, в свое приложение React.

Примечание:
Мы собираемся разбить эту статью на две части: во-первых, текстовая анимация, во-вторых, анимация изображений. В конце концов, мы объединим их в одно приложение React.


Начало работы с текстовой анимацией

В этом разделе мы покажем, как использовать Framer Motion при анимации текста с помощью motion составные части.

Добавьте следующий код в свой App.js файл.

import { motion } from "framer-motion";

function App() {
    return (
        <div className="App">
            <motion.h1
                animate={{ x: [50, 150, 50], opacity: 1, scale: 1 }}
                transition={{
                    duration: 5,
                    delay: 0.3,
                    ease: [0.5, 0.71, 1, 1.5],
                }}
                initial={{ opacity: 0, scale: 0.5 }}
                whileHover={{ scale: 1.2 }}
            >
                Animation made easy with Framer Motion
            </motion.h1>
        </div>
    );
}
export default App;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Мы импортировали Framer Motion motion составная часть. Посмотрите внимательно на h1 элемента вы заметите, как он отличается от стандартного h1 элемент.

Первым шагом в использовании Framer Motion для анимации является использование motion компонент, который можно использовать с любым стандартным элементом HTML.

Мы добавим нашему тексту классную анимацию входа, которая будет постепенно отображаться при перезагрузке страницы, используя motion компонент в нашем h1 и Framer Motion animate prop для выполнения анимации.

При таком подходе мы можем анимировать наш текст, чтобы исполнить наши желания. Сначала мы назначаем нашему тексту позицию, указывающую, где будет происходить анимация. Затем мы будем анимировать наш текст по оси X. Вы можете установить x иметь значение [0, 150, 50].

Далее, давайте дадим ему opacity из 1.

Нам нужно присвоить масштаб крутой анимации входа. Мы не хотим ничего дикого. Мы можем установить масштаб равным 1. Таким образом, когда текстовая анимация достигает масштаба 1, она перестает увеличиваться в размере.

Наконец, мы используем Framer Motion transition prop, потому что каждая эффективная анимация требует процесса перехода. Мы уточним duration, delayа также ease нашей текстовой анимации внутри этой опоры. Дайте ему продолжительность 5, задержку 3 и легкость. [0.5, 0.71, 1, 1.01].

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

масштаб GIF

Однако мы не хотим останавливаться на крутом входе в нашу текстовую анимацию. Давайте добавим к нашему тексту красивый эффект наведения. Когда ваша мышь наводит на него, он будет подпрыгивать или увеличиваться в размерах.

Для этого мы будем использовать whileHover prop и масштабируйте его до 1.2.

function App() {
    return (
        <div className="App">
            <motion.h1
              ...
                // ====>
                whileHover={{ scale: 1.2 }}
                // <====
            >
                Animation made easy with Framer Motion
            </motion.h1>
        </div>
    );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

масштабировать текст


баннер поддержки github


Начало работы с анимацией изображений

В этом разделе мы покажем, как использовать Framer Motion при анимации изображений.

Во-первых, вам нужно создать папку с изображениями внутри папки «src», чтобы сохранить ваши изображения. Ради этого проекта я использовал несколько случайных изображений. Не стесняйтесь использовать любое изображение по вашему выбору.

Создайте файл «image.js» в папке «src» и добавьте внутрь следующий код:

import fox from "./images/pexels-fox-1071249.jpg";
import jill from "./images/jill.jpg";
import cha1 from "./images/cha1.jpg";
import cha2 from "./images/cha2.jpg";

export default[fox, jill, cha1,cha2]
Войти в полноэкранный режим

Выйти из полноэкранного режима

Мы собираемся импортировать все наши изображения в image.js файл, упомянутый выше, прежде чем использовать их в нашем App.js файл. Это поможет нам избежать избыточного импорта, когда мы будем использовать эти изображения.

Добавьте следующий код в свой App.css файл.

.item{
  min-height: 10rem;
  min-width: 30rem;
  padding: 5px;
}

.item img{
  width: 60%;
  height: 50%;
  border-radius: 1rem;
  pointer-events: none;
  padding: 15%;
}

.inner-carousel {
  display: flex;
  background: rgb(76, 76, 76);
  height: 23rem;
}

.carousel{
  cursor: grab;
  overflow: hidden;
  background: rgb(215, 216, 215);
  height: 23rem;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Изменять App.js файл со следующим кодом:

import { motion } from "framer-motion";
import "./App.css";
import images from "./image";

function App() {
    return (
        <div className="App">
            <motion.div className="carousel">
                <motion.div
                    animate={{
                        scale: [1, 1, 1, 1, 1],
                        rotate: [0, 30, 60, 240, 360],
                    }}
                >
                    {images.map((image) => {
                        return (
                            <motion.div
                                whileHover={{ scale: 1.2 }}
                                whileTap={{ scale: 2 }}
                                className="item"
                                transition={{ duration: 3 }}
                                key={image}
                            >
                                <img src={image} alt="image" />
                            </motion.div>
                        );
                    })}
                </motion.div>
            </motion.div>
        </div>
    );
}

export default App;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Анимация изображения будет иметь форму карусели с эффектами вращения при каждом обновлении страницы, эффектами наведения при каждом приближении мыши к ним и эффектами касания при каждом прикосновении к изображению.

Для карусели создайте три контейнера: один для внешней карусели, один для внутренней карусели и один для изображений. Все три контейнера должны быть созданы с помощью Framer Motion. motion компоненты, одна внутри другой.

Внутренняя карусель будет выполнять эффекты вращения и скольжения. Движение создателя animate prop будет вызываться в этот момент, масштабируется до [1,1,1,1,1]и повернулся к [0,30, 60, 240, 360].

Это придаст ему уникальный эффект вращения, как вы можете видеть ниже:

тяга

мы будем использовать dragConstraint движение реквизита и кадрера drag чтобы придать ему ощущение карусели. «X» будет передан в качестве параметра в drag prop, потому что нам нужно, чтобы наша карусель двигалась по оси X.

Чтобы установить стопор на место, используйте dragConstraint опора Чтобы наша карусель двигалась влево, а затем возвращалась на прежнее место, мы устанавливаем dragConstraint:{ right: 0, left: -1100 }.

Это кажется слишком скучным, чтобы двигаться только с drag prop а также dragConstraint реквизит; вместо этого давайте добавим эффект отскока на каждом конце перетаскивания. Это может быть достигнуто с помощью drag transition реквизит от Framer Motion.

Мы воспользуемся преимуществом «bounceStiffner» и «bounceDamping» для drag transition атрибуты. Дай bounceStiffner а также bounceDamping значения 600 и 8 соответственно. Наконец, мы будем перемещаться по нашим импортированным изображениям в этом контейнере и добавлять каждое изображение обратно в карусель.

Добавьте выделенный код в App.js

function App() {
    return (
        <div className="App">
            <motion.div className="carousel">
                <motion.div
                   ...
                   // highlight-start
                    drag="x" 
                    dragConstraints={{right: 0, left:-1100}} 
                    dragTransition={{ bounceStiffness: 600, bounceDamping: 8 }} 
                    // highlight-end
                >
                    ...
                </motion.div>
            </motion.div>
        </div>
    );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

во время наведения

Последний div в карусели будут размещены возвращенные изображения. Чтобы создать соответствующую анимацию внутри этого div, мы будем использовать кадры движений whileHover, whileTapи переходную опору.

Используйте кадрирующее движение whileHover с масштабом 1,2, чтобы придать нашему изображению приятный эффект наведения. Когда ваша мышь находится над изображением, оно будет увеличиваться только до этого максимума.

Затем, дав whileTap prop масштаб 2, мы дадим нашим изображениям эффект касания, чтобы они подпрыгивали, когда мы нажимаем на них. Мы должны определить продолжительность перехода, чтобы наведение и нажатие стали более привлекательными. Давайте выберем 3 секунды в качестве продолжительности.

function App() {
    return (
        <div className="App">
            <motion.div className="carousel">
                <motion.div>
                    {images.map((image) => {
                        return (
                            <motion.div
                                ...
                            // ====>
                                whileHover={{ scale: 1.2 }}
                                whileTap={{ scale: 2 }}
                            // <==== 
                            >
                                <img src={image} alt="image" />
                            </motion.div>
                        );
                    })}
                </motion.div>
            </motion.div>
        </div>
    );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

последний гиф

В отличие от обычного CSS, мы можем видеть, что движение фреймов позволило создать анимацию выше быстро и с помощью нескольких строк кода. Некоторым программистам нравится использовать свою собственную анимацию с необработанным CSS, но если вы похожи на меня и предпочитаете более простое решение, вы можете использовать Framer Motion для своей анимации.

Вы можете получить доступ к приложению здесь


Вывод

В этой статье мы узнали, как использовать Framer Motion для создания простой текстовой и графической анимации для приложения React. По сравнению с обычным CSS мы увидели, как легко реализовать эти анимации с помощью нескольких строк кода. Мы также увидели, как использовать некоторые компоненты и реквизит Framer Motion. Фреймер Движение имеет другие мощные функции, которые мы не рассмотрели в этой статье. Вы должны проверить их. Я надеюсь, что эта статья станет для вас ценной.

*Сценарист: Джоэл Эзимора *


баннер раздора



Создавайте свои CRUD-приложения на основе React без ограничений

Современные CRUD-приложения должны использовать данные из множества различных источников, от пользовательских API до серверных служб, таких как Supabase, Hasura, Airtable и Strapi.

Проверить уточнитьесли вы заинтересованы в независимой от бэкэнда безголовой среде, которая может подключать более 15 источников данных благодаря встроенным провайдерам и плагинам сообщества.


улучшить логотип блога

уточнить это фреймворк на основе React с открытым исходным кодом для создания CRUD-приложений. без ограничений.
Это может ускорить время разработки до 3X без ущерба для свободы стиль, настройка а также рабочий процесс проекта.

уточнить безголовый по дизайну, и он соединяет 30+ встроенные серверные службы, включая настраиваемые API REST и GraphQL.

Посещать уточнить репозиторий GitHub для получения дополнительной информации, демонстраций, учебных пособий и примеров проектов.