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

1. Основные ключевые кадры.
   Framer Motion предоставляет простой способ определения ключевых кадров с помощью реквизита animate. Вот пример анимации положения компонента с помощью ключевых кадров:

import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      animate={{
        x: [0, 100, 0],
        y: [0, -100, 0],
      }}
    />
  );
};

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

1. Ключевые кадры с замедлением.
   Замедление определяет ускорение и замедление анимации. Framer Motion поддерживает различные функции замедления. Вот пример использования свойства easeс ключевыми кадрами:

import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      animate={{
        x: [0, 100, 0],
        y: [0, -100, 0],
        transition: { ease: "easeInOut" },
      }}
    />
  );
};

Функция замедления easeInOutсоздаст более плавную анимацию с постепенным ускорением и замедлением.

1. Настраиваемая продолжительность и задержка.
   Вы можете контролировать продолжительность и задержку анимации ключевых кадров. Вот пример:

import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      animate={{
        x: [0, 100, 0],
        y: [0, -100, 0],
        transition: { duration: 1, delay: 0.5 },
      }}
    />
  );
};

В этом примере анимация будет иметь продолжительность 1 секунду и задержку 0,5 секунды перед запуском.

1. Объединение ключевых кадров и переходов.
   Framer Motion позволяет комбинировать ключевые кадры с другими типами переходов. Вот пример использования ключевых кадров вместе с реквизитом transition:

import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      animate={{
        x: [0, 100, 0],
        y: [0, -100, 0],
      }}
      transition={{ duration: 1, type: "spring", stiffness: 200 }}
    />
  );
};

В этом коде анимация ключевого кадра будет объединена с пружинящим переходом, что приведет к эффекту упругости.

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

Не забывайте экспериментировать и изучать документацию Framer Motion, чтобы найти более продвинутые методы и возможности!