使用反应弹簧插值函数的动画不起作用

Question

我试图理解反应弹簧插值是如何工作的。

这是我的春天：

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 } }) 

我还修复了代码沙箱，但它使用 renderprops api 有点不同。

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