Представляем библиотеку анимаций

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

API рассчитан на типичные UI-переходы: появление, сворачивание, затухание, масштабирование и перемещение. Значения по умолчанию должны ощущаться отполированными, но каждый параметр можно настроить, если продукту нужен больший контроль.

import { animate } from '@your-scope/animation-library'

export function Example({ open, children }) {
  return (
    <animate.div
      in={open}
      animateFrom="opacity-0 scale-95"
      animateTo="opacity-100 scale-100"
      duration={350}
    >
      {children}
    </animate.div>
  )
}

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

Сосредоточьтесь на потребностях продукта

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

Практичные анимационные примитивы должны покрывать несколько частых потребностей:

1. Переходы входа и выхода.
2. Общие пресеты тайминга.
3. Обработку уменьшенного движения.
4. Составляемые варианты.
5. Предсказуемую очистку после завершения переходов.

const transition = {
  duration: 200,
  easing: 'cubic-bezier(0.2, 0, 0, 1)',
}

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