react hooks写一个数字从0开始加载数字_react数字改变动画hooks-优快云博客

本文链接：https://blog.youkuaiyun.com/Candy_luck/article/details/132855910

本文介绍了如何使用Reacthooks（useState和useEffect）创建一个自定义Hook，用于实现数字动画效果，包括目标数字、动画时间和步数的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { useState, useEffect } from 'react'

/**
 * 自定义 Hook 用于数字动画
 * @param {number} targetNumber - 要动画到的目标数字。
 * @param {number} animationDuration - 动画持续时间（毫秒）。默认为 1000 毫秒。
 * @param {number} steps - 动画步数。默认为 100 步。
 * @returns {number} - 当前动画的数字值。
 */
function useNumberAnimation(targetNumber: number, animationDuration = 1000, steps = 100) {
  const [currentNumber, setCurrentNumber] = useState(0)

  useEffect(() => {
    let currentStep = 0

    // 计算每一步增加的值
    const stepValue = targetNumber / steps

    const interval = setInterval(() => {
      if (currentStep < steps) {
        // 更新当前数字
        setCurrentNumber((prevNumber) => prevNumber + stepValue)
        currentStep++
      } else {
        // 动画完成后设置最终数字并清除间隔
        setCurrentNumber(targetNumber)
        clearInterval(interval)
      }
    }, animationDuration / steps)

    // 在组件卸载时清除间隔，以防止内存泄漏
    return () => clearInterval(interval)
  }, [targetNumber, animationDuration, steps])

  return currentNumber
}

/**
 * 数字动画组件
 * @param {number} targetNumber - 要动画到的目标数字。
 * @returns {number} - 当前动画的数字值。
 */
function NumberAnimation(targetNumber: any) {
  // 使用自定义 Hook 获取当前动画的数字
  const currentNumber = useNumberAnimation(targetNumber)

  return currentNumber
}

export default NumberAnimation