Представляем Framer Motion

Однако создание привлекательных анимаций с помощью CSS может быть непростым делом. Именно здесь на помощь приходит Framer Motion. С Framer Motion вам не нужно быть экспертом в CSS, чтобы создавать красивые анимации.
**

1. Что такое Framer Motion?**Framer Motion — это библиотека анимации, которая упрощает создание анимации. Ее упрощенный API помогает нам абстрагироваться от сложности анимации и позволяет нам легко создавать анимацию с нуля. Одно отличие заключается в том, что Framer Motion поддерживает только React, в то время как Pose поддерживает React-Native и Vue. Если вы сейчас используете Pose, я бы рекомендовал перейти на Framer Motion, так как Pose устарел.

2. Как работает Framer Motion

Компоненты движения — это строительные блоки Framer Motion. Компоненты Motion создаются путем добавления motion к обычному элементу HTML и SVG (например, motion.h1). Компоненты движения могут принимать несколько реквизитов, основным из которых является анимированный реквизит. Этот реквизит принимает объект, в котором мы определяем свойства компонента, которые мы хотим анимировать. Определенные нами свойства анимируются, когда компонент развернут в DOM.

Давайте анимируем текст h1 с помощью Framer Motion. Сначала мы установим библиотеку Framer Motion и импортируем Motion.

npm install framer-motion
import { motion } from 'framer-motion';

Затем мы преобразуем h1 в компонент движения.

<motion.h1 
  animate={{x: 20, y: -20}}>
  This is a motion component
</motion.h1>

Это перемещает h1 на 20 пикселей вправо и на 20 пикселей вверх при загрузке. Если единицы измерения не добавлены, вычисления выполняются с использованием пикселей. Однако вы можете явно указать единицы, на которых будут основываться вычисления, animate={x: "20rem", y:"-20rem"}}>.

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

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

<motion.h1
    initial={{x: -1000}}
    animate={{x: 20}}>
   This is a motion component
</motion.h1>

Теперь, когда h1 монтируется, он задвигается слева.

Переход _prop позволяет нам определить, как происходит анимация. С его помощью мы определяем, как значения анимируются при переходе из одного состояния в другое. Кроме всего прочего, с помощью этого параметра можно определить _длительность, задержку и _тип _анимации.

<motion.h1
    initial={{ x: -1000 }}
    animate={{ x: 0 }}
    transition={{
        type: "tween",
        duration: "2",
        delay: "1"
    }}>
    This is a motion component
</motion.h1>

Варианты

Как видите, код становится все больше и больше, и скоро эти новые реквизиты будут иметь даже большее значение, чем те, которые связаны с логикой React. Мы можем использовать варианты для изоляции кода, связанного с анимацией и многим другим.
Реквизит variant в Framer Motion позволяет нам извлекать наши определения анимации в объект variant.
Варианты не только делают наш код чище, но и позволяют нам создавать еще более мощные и сложные анимации.
Когда мы извлекаем наши определения анимации в объекты-варианты, мы получаем следующее:

const Variants = {
  initial: { x: -1000 },
  animate: { x: 0 },
  transition: {
    type: "tween",
    duration: 2,
    delay: 1
  }
} 

Вместо того чтобы передавать определения анимации непосредственно в реквизиты initial и animate компонента, мы извлекаем эти определения в отдельные объекты variant. В объектах variant мы определяем имена variant, которые описывают название каждой анимации как variant.

<motion.h1
      variants={Variants}
      initial='initial'
      animate='animate'
      >

В реквизите variants мы передаем имена объектов variant для каждого компонента движения, а затем передаем анимации в реквизиты initial и animate.

Заключение

Это лишь вводное руководство по framer-motion, внутри библиотеки есть еще много чего интересного, особенно много полезных хуков для создания еще более безумных анимаций без особых усилий.
Надеюсь, этот блог даст вам прочный фундамент, чтобы добавить несколько отличных анимаций в вашу библиотеку и развивать их со временем, чтобы удовлетворить все ваши потребности.