Быстро освойте библиотеку анимаций React-Motion.

JavaScript React.js анимация
react-motionэто мощная библиотека анимации реагирования.
Официальный сайт:react-motion

на основеreact-motion, написал три простых анимации, чтобы объяснить, как его использовать.
  1. блокировать движение
  2. следуй за мышкой
  3. складывать

Прежде чем приступить к объяснению примера, давайте сначала разберемся с важной функцией: spring()

грамматика:
spring(val: number, config?: SpringHelperConfig)
  • val: число, конечное значение
  • config: Конфигурация для создания эффектов плавности анимации.
- stiffness: По умолчанию 170 -damping: по умолчанию 26 -precision: значение по умолчанию — 0,01, которое используется для настройки точности val и обычно не требует изменения.

Только от медленного описания текста, давайте вместе почувствуем эффект:
watchtower.GitHub.IO/react-morti о…Сравните следующие две пружины:


Мы можем думать об оживляемых объектах как о пружинах, в то время какstiffnessЭто эквивалентно силе пружины, а также может пониматься как длина растягиваемой пружины (эффективный диапазон);dampingЭто эквивалентно жесткости пружины.
  • При одинаковой твердости чем дольше тянешь, тем быстрее отскакивает;
  • При одинаковой силе, чем больше жесткость, тем меньше количество отскоков (буферизация).

Гитхаб:react-motion-demo
1. Блокировать движение

В примере перемещения блока используется компонент Motion.

подходит для написания анимации деформации отдельных компонентов.
Атрибуты:
  • style: Объект, стиль анимации
  • defaultStyle: Объект, исходный стиль
  • children: дочерний элемент
  • onRest: Обратный вызов срабатывает, когда анимация заканчивается.

Пример диаграммы:


2. Следите за мышью

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

Атрибуты:
  • styles: Массив, стиль анимации
  • defaultStyles: Массив, начальный стиль
  • children: дочерний элемент

Пример диаграммы:

3. Сложите
Сворачивающийся экземпляр использует компонент TransitionMOtion.
используется для записи анимации монтирования и размонтирования компонентов.
Атрибуты:
  • styles: Массив, стиль анимации
  • defaultStyles: Массив, начальный стиль
  • children: дочерний элемент

Пример диаграммы:
Категории