使用 react-spring 插值函数的动画不起作用

Question

我正在尝试了解 react-spring 插值的工作原理。

这是我的spring：

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

你能帮我弄清楚这段代码有什么问题吗？

Answer 1

快到了。如果要使用范围，在从 [0, 0.5, 1] 到 [0, 100, 0] 的插值中，则应将 x 值更改为 0 和 1 之间的值。

所以我会更改这部分：

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

我也修复了 codesandbox，但它使用 renderprops 有点不同 api。

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

使用 react-spring 插值函数的动画不起作用

Animation using react-spring interpolate function not working

reactjs

react-spring