Создание сложных анимаций в React с помощью библиотеки Framer Motion

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

Зачем использовать Framer Motion?

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

Установка и настройка

Для начала, установим библиотеку Framer Motion в наш проект:

npm install framer-motion

После установки, мы можем начать использовать ее в наших функциональных компонентах.

import { motion } from 'framer-motion';

const MyComponent = () => {
  return (
    <motion.div>
      {/* Содержимое компонента */}
    </motion.div>
  );
};

Простые анимации

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

import { motion } from 'framer-motion';

const MyComponent = () => {
  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
      Привет, мир!
    </motion.div>
  );
};

В этом примере мы используем initial для установки начального состояния компонента (в данном случае, нулевой прозрачности), а animate для установки конечного состояния (полной видимости).

Интерактивные анимации

Framer Motion также предоставляет легкий способ добавления интерактивных анимаций. Рассмотрим пример анимации при наведении мыши.

import { motion } from 'framer-motion';

const MyComponent = () => {
  return (
    <motion.div whileHover={{ scale: 1.2 }}>
      Наведи мышь на меня!
    </motion.div>
  );
};

В этом примере whileHover изменяет масштаб компонента до 1.2 при наведении мыши.

Комплексные анимации

Framer Motion также позволяет создавать сложные и комплексные анимации. Рассмотрим пример анимации движения и изменения цвета.

import { motion } from 'framer-motion';

const MyComponent = () => {
  return (
    <motion.div
      initial={{ x: -100, opacity: 0, backgroundColor: '#3498db' }}
      animate={{ x: 0, opacity: 1, backgroundColor: '#2ecc71' }}
      transition={{ duration: 1.5 }}
    >
      Сложная анимация!
    </motion.div>
  );
};

В этом примере мы используем initial и animate для определения начального и конечного состояния, а также transition для установки времени анимации.

Итоги

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

Что такое условный рендеринг?

Условный рендеринг (conditional rendering) означает отображение элементов в пользовательском интерфейсе только в том случае, если выполняется определенное условие, в противном случае элементы скроются.

Условные выражения if/else

Давайте рассмотрим условные выражения if/else в JavaScript.

let num = 2

if (num === 2) {
    console.log('the given number is 2')
} else {
    console.log('the give number is not 2')
}

В приведенном выше коде мы инициализировали переменную значением 2, а затем использовали условие if/else для логирования сообщения на основе предоставленного числа. Давайте реализуем условие if/else в ReactJs.

function App(props) {
   if (props.num === 2) {
       return <p>The given number is 2</p>
   } else {
       return <p>The given number is not  2</p>
   }
}

<App  num={2} />

В компонент App мы передали 2 в проп num.

Тернарный оператор

Мы можем сделать код компонента приложения короче с помощью тернарного оператора.

function App(props){
  return  (
    {props.num === 2
      ? <p>The given number is 2</p>
      : <p>The given number is not 2</p>
    }
  )
}

<App num={2} />

Здесь мы обернули наш код фигурными скобками, потому что в JSX нам нужно использовать фигурные скобки для выражений JavaScript.

Логический оператор && (и)

В JavaScript логический оператор && используется для вычисления выражения, если данное условие истинно.

true && expression // => expression

false && expression // => false

Использование логического оператора “и” (&&) в React.

function Search(props) {
  return (
    <div>
      <h1>Search</h1>
      <button>Search</button>

      {props.searchResults > 0 && <ul>search results</ul>}
    </div>
  )
}

В компоненте Search мы использовали оператор && для рендеринга элемента ul только в том случае, если props.results больше 0.