react-spring动画库

react-spring动画库

概述

• 场景：实现动画效果，增强用户体验
• react-spring是基于spring-physics（弹簧物理）的react动画库，动画效果更加流畅、自然
• 优势：
  • 几乎可以实现任意UI动画效果
  • 组件式使用方式（render-props模式），简单易用，符合react的声明式特性，性能高
• github地址
• 官方文档

基本使用

• 安装： yarn add react-spring
• 打开Spring组件文档
• 导入Spring文档，使用Spring组件包裹要实现动画效果的遮罩层div
• 通过render-props模式，讲参数props设置为遮罩层div的style
• 给Spring组件添加from属性，指定：组件第一次渲染时的动画状态
• 给Spring组件添加to属性，指定：组件要更新的新动画状态
• props就是透明度有0~1中变化的值

实现遮罩层动画

• 创建方法 renderMask来渲染遮罩层 div
• 修改渲染遮罩层的逻辑，保证Spring组件一直都被渲染（Spring组件被销毁了，就无法实现动画效果）
• 修改to属性的值，在遮罩层隐藏时为0，在遮罩层展示为1
• 在render-props的函数内部，判断props.opacity是否等于0
• 如果等于0，就返回null，解决遮罩层遮挡页面导致顶部点击事件失效
• 如果不等于0，渲染遮罩层div

renderMask() {
    const { openType } = this.state

    const isHide = openType === 'more' || openType === ''

    return (
      <Spring from={{ opacity: 0 }} to={{ opacity: isHide ? 0 : 1 }}>
        {props => {
          // 说明遮罩层已经完成动画效果，隐藏了
          if (props.opacity === 0) {
            return null
          }

          return (
            <div
              style={props}
              className={styles.mask}
              onClick={() => this.onCancel(openType)}
            />
          )
        }}
      </Spring>
    )