Question

我来自React-pose背景，喜欢尝试React-spring。我有一个非常简单的案例，我想转移到与React-spring一起使用。

我用React-pose https://codesandbox.io/s/4wxzm60nk9

在Codesanbox中编写了案例

我已经尝试过自己进行转换，但最终却使自己感到困惑。尤其是现在，当尝试使用其hooks API进行操作时。我能得到的所有帮助都是超级应聘的。

谢谢。

Answer 1

类似这样的事情：https://codesandbox.io/s/pyvo8mn5x0

function App() {
  const [clicked, set] = useState(false)
  const { scale } = useSpring({ scale: clicked ? 0.8 : 1 })
  return (
    <div className="App">
      <animated.button
        onMouseDown={() => set(true)}
        onMouseUp={() => set(false)}
        style={{
          backgroundColor: 'red',
          height: '100px',
          width: '100px',
          color: '#FFF',
          transform: scale.interpolate(s => `scale(${s})`)
        }}
        children="Click me"
      />
    </div>
  )
}

如果愿意，还可以预先插值：

const props = useSpring({ transform: `scale(${clicked ? 0.8 : 1})` })
return <animated.button style={props} />

与姿势反应弹簧不同，它不包含手势，它选择与第三方库交互。例如：https://github.com/react-spring/react-with-gesture

React Spring的动画按钮

1 个答案: