Chengzhebei/src/components/Zloding/index.tsx

import React, { useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'

const imgObj = {
  1: require('@/assets/sgImg/bacScene1.jpg'),
  2: require('@/assets/sgImg/bacScene2.jpg'),
  3: require('@/assets/sgImg/bacScene3.jpg'),
  4: require('@/assets/img/A7base3_bg.jpg')
}

type Props = {
  isShow: boolean
  bacNum: 1 | 2 | 3 | 4
  callBackFu?: () => void
}

function Zloding({ isShow, bacNum, callBackFu }: Props) {
  // 增加消失的时候透明度
  const [flag, setFlag] = useState(false)

  const [showFlag, setShowFlag] = useState(false)

  useEffect(() => {
    setShowFlag(isShow)
  }, [isShow])

  const bacImgRes = useMemo(() => {
    return Reflect.get(imgObj, bacNum)
  }, [bacNum])

  // 进度条
  const [loding, setLoding] = useState(0)
  const lodingRef = useRef(0)

  const timeRef = useRef(-1)

  const flagRef = useRef(true)

  useEffect(() => {
    if (showFlag) {
      window.unityLoading = (progress: number) => {
        const num = Math.round(Number(progress * 100))
        setLoding(num)

        if (num >= 100 && flagRef.current) {
          clearTimeout(timeRef.current)
          setShowFlag(false)
          setFlag(true)
          timeRef.current = window.setTimeout(() => {
            setLoding(0)
            setFlag(false)
          }, 1000)
          if (callBackFu) callBackFu()
          flagRef.current = false
        }
      }
    }
    return () => {
      clearTimeout(timeRef.current)
    }
  }, [callBackFu, showFlag])

  useEffect(() => {
    lodingRef.current = loding
  }, [loding])

  return (
    <div
      id='Zloding'
      className={classNames(
        styles.Zloding,
        showFlag ? styles.ZlodingShow : '',
        flag && !showFlag ? styles.ZlodingChange : ''
      )}
      style={{ backgroundImage: `url(${bacImgRes})` }}
    >
      <div className='ZlodingBox'>
        <div className='AlodingT'>
          <div className='AlodingT1' style={{ width: `${loding}%` }}></div>
          <img
            className='AlodingT2'
            style={{ left: `${loding}%` }}
            src={require('@/assets/sgImg/icon_skip.png')}
            alt=''
          />
        </div>
      </div>
    </div>
  )
}

const MemoZloding = React.memo(Zloding)

export default MemoZloding