Что делает "оживленный" в реагирующей весне?

В настоящее время я вхожу в борьбу с библиотекой анимации реагирования-весны.

В некоторых демонстрациях CodeSandbox (например, https://codesandbox.io/embed/j150ykxrv) в документации импортируется что-то, называемое "анимированным":

import { Transition, animated } from 'react-spring'

а потом использовал вот так:

  {this.state.items.map(item => styles => <animated.li style={{ ...defaultStyles, ...styles }}>{item}</animated.li>)}

В других примерах это не используется:

import { Spring } from 'react-spring'

<Spring
  from={{ opacity: 0 }}
  to={{ opacity: 1 }}>
  {props => <div style={props}>✌️</div>}
</Spring>

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

Является ли использование в документации частью устаревшей версии?

Источник

3 ответа

Решение

Native необязателен, если вы установите его (а затем вам потребуется расширение компонента от animated.xxx), он не будет воспроизводить анимацию, как это обычно делают реагирующие библиотеки анимации, другими словами, они вызывают forceUpdate или setState для каждого кадра, что дорого С native он будет визуализировать компонент один раз, а затем анимировать в фоновом режиме, используя цикл requestAnimationFrame, который напрямую устанавливает стили. Значения, которые вы передаете целевому div (или какому-либо другому), не являются числовыми значениями, а являются классами, которые получают события обновления, поэтому вам нужно расширять их.

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

Источник

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

Это позволяет реактивной пружине обходить React для обновления кадров. Преимущества этого метода - повышение производительности.

Рекомендуется использовать этот подход

"Попробуйте сделать это во всех ситуациях, где вы можете"

Просто помните о следующих условиях:

  1. native анимирует только стили, атрибуты и дочерние элементы (как textContent)
  2. Получаемые значения являются непрозрачными объектами, а не обычными значениями.
  3. Получающие элементы должны быть анимированными.[ElementName], например, div становится animated.div
  4. Если вы используете styled-component или custom componemts, сделайте: animated (component)
  5. Если вам нужно интерполировать стили, используйте интерполяцию

Обобщенные преимущества:

  1. Ваше приложение будет быстрее, разница действительно может быть днем ​​и ночью
  2. Вы получаете довольно мощные инструменты интерполяции и ключевых кадров (см. Ниже)
  3. Вы получаете, чтобы оживить scrollTop а также scrollLeft из коробки (с которой React обычно не справляется)
Источник

Похоже, он используется для рендеринга в нативном режиме, посмотрите на компонент Transition, у него есть нативная поддержка

Источник
Другие вопросы по тегам