Анимация с использованием функции интерполяции реакции-пружины не работает - PullRequest
Новая
       18

Анимация с использованием функции интерполяции реакции-пружины не работает

0 голосов
/ 25 мая 2020

Я пытаюсь понять, как работает интерполяция реактивной пружины.

Вот моя пружина: 

const { x } = useSpring({ from: { x: 0 }, x: 100, config: { duration: 1000 } })

Вот как я ее использую: 

...
return (
  <animated.div style={{
    background: "lightblue",
    height: "100%",
    width: x.interpolate([0, 0.5, 1], [0, 100, 0]).interpolate(x => `${x}%`)
  }} />
)

Интерполяция происходит, но не отображается.
Здесь это песочница: https://codesandbox.io/s/amazing-panini-fzn54?fontsize=14&hidenavigation=1&theme=dark

Вы можете помочь мне разобраться, что не так с этим кодом?

1 Ответ

2 голосов
/ 25 мая 2020

Это почти готово. Если вы хотите использовать диапазон, при интерполяции от [0, 0.5, 1] до [0, 100, 0] тогда вы должны изменить значение x между 0 и 1.

Поэтому я бы изменил эту часть: 

const { x } = useSpring({ from: { x: 0 }, x: 1, config: { duration: 1000 } })

Я также исправил codeandbox, но он немного отличается: он использует api renderprops.

https://codesandbox.io/s/tender-varahamihira-6nic7?file= / src / App. js: 63-123

...