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

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

0 голосов
/ 17 октября 2018

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

В некоторых демонстрациях 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 ]

0 голосов
/ 17 октября 2018

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

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

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

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

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

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

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

  1. Ваша заявка будетбыстрее, разница действительно может быть днем ​​и ночью
  2. Вы получаете довольно мощные инструменты интерполяции и ключевых кадров (см. ниже)
  3. Вы получаете анимацию scrollTop и scrollLeft из коробки (который Реакт не может нормально чandle)
0 голосов
/ 18 октября 2018

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

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

0 голосов
/ 17 октября 2018

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

...