Question

在这里，我在理解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>

不起作用

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

插值实际上是做什么的

1 个答案: