插值真的是做什么的答案

【问题标题】：what does interpolation really do插值真的是做什么的
【发布时间】：2020-05-17 18:32:26
【问题描述】：

这里是初学者，我在理解 React spring 库中的 usespring 插值时遇到了麻烦，我试图让一个元素使用 translate css 属性来回移动，现在我明白的是，传入一个范围模拟 css 键帧和输出是元素在动画的那个点应该具有的值所以我做了类似的事情，

const {xyz} = useSpring({
  from: {xyz: [0, 0, 0]},
  to: {xyz: [0, 200, 0]},
})

<animated.div className={classes.down} style={{
  transform: xyz
    .interpolate(([y]) => (
    {range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
    output: [180, 220, 180, 220, 180, 220, 180, 200]}
    ))
    .interpolate((x, y, z)=> translate(${x}px, ${y}px, ${z}px))
  }}>
    <Typography variant="body2" className={classes.downText}> 
       Scroll Down
    </Typography>
    <DownArrow className={classes.downIcon}/>
</animated.div>

这不起作用

【问题讨论】：

标签： react-spring

【解决方案1】：

这里有很多问题。

首先在useSpring中如果只想改变y那么可以去掉x和z。

其次，箭头函数参数对我不起作用。

最后你必须使用 translate3d 而不是 translate 并且模板字符串缺少反引号。

类似这样的：

  const { y } = useSpring({
    from: { y: 0 },
    to: { y: 1 }
  });

  return (
    <div className="App">
      <animated.div
        style={{
          transform: y
            .interpolate({
              range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
              output: [180, 220, 180, 220, 180, 220, 180, 200]
            })
            .interpolate(y => `translate3d(0px, ${y}px, 0px)`)
        }}
      >
        Scroll Down
      </animated.div>
    </div>
  );

https://codesandbox.io/s/gracious-diffie-rgz06?file=/src/App.js:135-613

【讨论】：