Создание микроанимаций элементов интерфейса сайта

Создание микроанимаций элементов интерфейса сайта

Микроанимации — это визуальная обратная связь на уровне отдельных элементов: нажатая кнопка, загружающийся список, переключённый тоггл, появившееся уведомление. Они делают интерфейс «живым» и снижают когнитивную нагрузку: пользователь видит, что его действие зарегистрировано.

Принципы

Продолжительность. Микроанимации — 100–300ms. Медленнее — раздражает. Быстрее — незаметно. Исключение: анимации с физическим смыслом (spring-эффект, inertia) могут быть длиннее.

Easing. ease-out для появлений (быстрый старт, плавное торможение — имитирует реальные объекты). ease-in для исчезновений. spring для интерактивных элементов.

Не анимировать то, что не менялось. Если пользователь кликнул кнопку и ничего не изменилось логически — анимация лжёт.

Кнопки

Самая частая микроанимация. Три уровня:

CSS-only (hover + active):

.btn {
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Loading state (кнопка с spinner):

const Button: React.FC<ButtonProps> = ({ children, onClick, loading }) => {
  return (
    <button
      onClick={onClick}
      disabled={loading}
      className={`btn ${loading ? 'btn--loading' : ''}`}
    >
      <AnimatePresence mode="wait">
        {loading ? (
          <motion.span
            key="spinner"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.5 }}
            transition={{ duration: 0.15 }}
          >
            <SpinnerIcon />
          </motion.span>
        ) : (
          <motion.span
            key="label"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            {children}
          </motion.span>
        )}
      </AnimatePresence>
    </button>
  );
};

Success state (кнопка → галочка → текст «Сохранено»):

type BtnState = 'idle' | 'loading' | 'success';

const SaveButton: React.FC = () => {
  const [state, setState] = useState<BtnState>('idle');

  const handleClick = async () => {
    setState('loading');
    await saveData();
    setState('success');
    setTimeout(() => setState('idle'), 2000);
  };

  return (
    <motion.button
      onClick={handleClick}
      animate={state === 'success' ? { backgroundColor: '#22c55e' } : {}}
      transition={{ duration: 0.3 }}
    >
      {state === 'idle'    && 'Сохранить'}
      {state === 'loading' && <Spinner />}
      {state === 'success' && <><CheckIcon /> Сохранено</>}
    </motion.button>
  );
};

Форма: появление ошибок и успеха

// Поле с анимированной ошибкой
const FormField: React.FC<{ error?: string }> = ({ error, ...props }) => (
  <div className="field">
    <input {...props} className={error ? 'input--error' : ''} />
    <AnimatePresence>
      {error && (
        <motion.p
          key="error"
          initial={{ opacity: 0, y: -4, height: 0 }}
          animate={{ opacity: 1, y: 0,  height: 'auto' }}
          exit={{ opacity: 0,   y: -4,  height: 0 }}
          transition={{ duration: 0.2 }}
          className="field__error"
        >
          {error}
        </motion.p>
      )}
    </AnimatePresence>
  </div>
);

Shake-анимация при невалидном submit:

const shakeVariants = {
  idle:  { x: 0 },
  shake: { x: [0, -10, 10, -8, 8, -4, 4, 0] },
};

<motion.form
  variants={shakeVariants}
  animate={hasErrors ? 'shake' : 'idle'}
  transition={{ duration: 0.5, ease: 'easeInOut' }}
>

Тоггл / Чекбокс

const Toggle: React.FC<{ checked: boolean; onChange: () => void }> = ({ checked, onChange }) => (
  <button
    role="switch"
    aria-checked={checked}
    onClick={onChange}
    className="toggle"
  >
    <motion.div
      className="toggle__thumb"
      animate={{ x: checked ? 20 : 0 }}
      transition={{ type: 'spring', stiffness: 500, damping: 30 }}
    />
  </button>
);

Spring-переход (stiffness: 500, damping: 30) даёт физически правдоподобное движение с лёгким отскоком.

Список: появление элементов

const listVariants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.05 } },
};

const itemVariants = {
  hidden:  { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
};

const AnimatedList: React.FC<{ items: Item[] }> = ({ items }) => (
  <motion.ul
    variants={listVariants}
    initial="hidden"
    animate="visible"
  >
    {items.map(item => (
      <motion.li key={item.id} variants={itemVariants}>
        <ItemCard item={item} />
      </motion.li>
    ))}
  </motion.ul>
);

staggerChildren: 0.05 — каждый следующий элемент появляется с задержкой 50ms. Для 20 элементов — весь список раскрывается за 1 секунду, что воспринимается как плавный каскад.

Toast-уведомления

const ToastNotification: React.FC<{ message: string; type: 'success' | 'error' }> = ({ message, type }) => (
  <motion.div
    className={`toast toast--${type}`}
    initial={{ opacity: 0, y: 50, scale: 0.9 }}
    animate={{ opacity: 1, y: 0,  scale: 1 }}
    exit={{ opacity: 0, y: 20, scale: 0.95, transition: { duration: 0.15 } }}
    transition={{ type: 'spring', stiffness: 400, damping: 25 }}
  >
    {type === 'success' ? <CheckCircleIcon /> : <AlertIcon />}
    <span>{message}</span>
  </motion.div>
);

Тост появляется снизу-вверх со spring-эффектом и уходит быстро (duration: 0.15) — это важно, уходить должно быстрее, чем появляться.

Число с анимацией инкремента

Для счётчиков, статистики, корзины:

const AnimatedNumber: React.FC<{ value: number }> = ({ value }) => {
  const spring = useSpring(value, { stiffness: 100, damping: 30 });
  const display = useTransform(spring, Math.round);

  return <motion.span>{display}</motion.span>;
};

Число «накручивается» к новому значению физически плавно.

Курсорные эффекты (Spotlight, Magnetic)

// Magnetic button — тянется к курсору
const MagneticButton: React.FC<ButtonProps> = ({ children }) => {
  const ref = useRef<HTMLButtonElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const handleMouseMove = (e: React.MouseEvent) => {
    const rect = ref.current!.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    x.set((e.clientX - centerX) * 0.3);
    y.set((e.clientY - centerY) * 0.3);
  };

  const handleMouseLeave = () => { x.set(0); y.set(0); };

  return (
    <motion.button
      ref={ref}
      style={{ x, y }}
      transition={{ type: 'spring', stiffness: 200, damping: 15 }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      {children}
    </motion.button>
  );
};

Производительность

Анимировать можно только transform и opacity — эти свойства не вызывают reflow. Анимация width, height, top, left бьёт по FPS:

/* Плохо */
.card { transition: width 300ms; }

/* Хорошо */
.card { transition: transform 300ms; }
.card:hover { transform: scaleX(1.05); }

В framer-motion layout prop автоматически анимирует изменение размеров через FLIP-технику (сначала замеряет финальное состояние, потом анимирует transform от начального к конечному).

Сроки