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>
    )