使用 react-spring 插值功能的动画不起作用答案

【问题标题】：Animation using react-spring interpolate function not working使用 react-spring 插值功能的动画不起作用
【发布时间】：2020-09-11 23:00:24
【问题描述】：

我试图了解 react-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

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

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

快到了。如果你想使用范围，在从[0, 0.5, 1]到[0, 100, 0]的插值中，那么你应该在0和1之间改变x值。

所以我会改变这部分：

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

【讨论】：