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

我有使用 React-pose 在 Codesanbox 中编写的案例，https://codesandbox.io/s/4wxzm60nk9

我试过自己转换它，但最终还是把自己弄糊涂了。尤其是现在尝试使用他们的 hooks API 来做到这一点时。我能得到的所有帮助都非常感谢。

谢谢。

请您参考如下方法:

我昨天刚做了一个动画按钮，所以我重构它来改变它的大小。

import React, {useState} from "react"; 
import { Spring, animated as a } from 'react-spring/renderprops'; 
 
const SpringButton = () => { 
  const [pressed, setPressed] = useState(false); 
  return ( 
  <Spring native from={{scale: 1}} to={{scale: pressed? 0.8 : 1}}> 
    {({scale}) => ( 
      <a.button  
        style={{ 
          backgroundColor: 'red',  
          height: '100px',  
          width: '100px',  
          color: 'rgb(255, 255, 255)', 
          transform: scale.interpolate(scale => `scale(${scale})`) 
          }} 
        onMouseDown={() => setPressed(true)} 
        onClick={() => setPressed(false)} 
        onMouseLeave={() => setPressed(false)} 
      > 
        Click me 
      </a.button> 
    )} 
  </Spring> 
  ); 
} 

它还不是钩子(Hook)接口(interface)，但我认为它可以帮助你理解它是如何工作的。它还使用更快的 native 渲染。事件处理与 react-pose 有点不同。如果您希望动画真的很有弹性，您也可以调整配置。

import {config} from 'react-spring/renderprops'; 
<Spring config={config.wobbly} ...> 

https://codesandbox.io/s/7zlrkv4kjj