Github https://github.com/pmndrs/react-spring
网站 https://react-spring.io
image.png

  1. react-spring是基于spring-physics 弹簧物理学 的 react动画库，动画效果更加流畅、自然
  2. 几乎可以实现任意UI动画效果
  3. 组件式使用方式（render-props模式），简单易用，符合react的声明式特性，性能高
  4. 继承了animated强大的插值和性能，以及 react-motion的易用性

react-spring 快速上手

react-spring库提供了2种API

  1. Hooks api 就是 React 16.8 的新增特性——Hook
  2. Render-props api ```jsx npm install react-spring

import { useSpring, animated } from ‘react-spring’

function App() { const props = useSpring({ to: { opacity: 1 }, from: { opacity: 0 } })

return I will fade in }

  2. 1. 导入Spring文档，使用Spring组件包裹要实现动画效果的遮罩层div
  3. 2. 通过render-props模式，讲参数props设置为遮罩层div的style
  4. 3. 给Spring组件添加from属性，指定：组件第一次渲染时的动画状态
  5. 4. 给Spring组件添加to属性，指定：组件要更新的新动画状态
  6. 5. props就是透明度有0~1中变化的值
  10. <a name="CDNM5"></a>
  11. ## 数字动画
  12. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/112859/1637723216042-81e157e1-755c-4430-abf8-0d8bb302290f.png#clientId=u0e01c8f0-4ab8-4&from=paste&height=73&id=ue935f515&originHeight=218&originWidth=422&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8058&status=done&style=none&taskId=u148c33db-383a-4a4b-b4b5-1761d9b487f&title=&width=140.66666666666666)
  13. ```jsx
  14. function Number() {
  15.   const [flip, set] = useState(false)
  16.   const { number } = useSpring({
  17.     reset: true,
  18.     reverse: flip,
  19.     from: { number: 0 },
  20.     number: 1,
  21.     delay: 200,
  22.     config: config.molasses,
  23.     onRest: () => set(!flip),
  24.   })
  26.   return <animated.div>{number.to(n => n.toFixed(2))}</animated.div>
  27. }