插值到底有什么作用

Question

这里是初学者，我无法理解 React spring 库中使用 spring 的插值，我试图让一个元素通过翻译 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>

哪个不起作用

Answer 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

插值到底有什么作用

what does interpolation really do

react-spring