如何让react-countup组件在计数最后阶段放慢速度？

要实现计数到最后阶段减速的效果，你可以给CountUp组件传入自定义缓动函数，替代默认的线性动画。具体步骤如下：

1. 定义自定义缓动函数 #

这个函数接收一个0到1的参数t（代表动画进度，0是开始，1是结束），返回对应的进度值，通过分段逻辑实现前快后慢的效果：

const customEasing = (t) => {
  // 前80%进度快速推进
  if (t <= 0.8) {
    return t * 1.25;
  }
  // 最后20%进度减速收尾，三次方缓动让减速更自然
  return 1 - Math.pow(1 - t, 3);
};

2. 修改CountUp组件配置 #

在你的现有代码中，给CountUp添加easing属性，传入上面定义的缓动函数：

<div className="nox-number home-page-numbers-number">
  <CountUp
    decimals={isDecimal ? 1 : 0}
    duration={1}
    end={parsedNum}
    easing={customEasing} // 新增自定义缓动配置
    onEnd={() => {
      setActive(false)
    }}
    start={parsedNum > 10 ? parsedNum - 10 : 0}
  >
    {({ countUpRef, start }) => (
      <VisibilitySensor
        active={active}
        delayedCall
        onChange={(isVisible) =>
          isVisible ? start() : null
        }
      >
        <span ref={countUpRef} />
      </VisibilitySensor>
    )}
  </CountUp>
  {removeNumberFromString(number)}
</div>

调整参数适配需求 #

• 可以修改t <= 0.8的阈值，比如改成t <= 0.7，让最后30%的阶段开始减速；
• 调整Math.pow(1 - t, 3)的幂次，数值越大（比如4、5），最后阶段的减速效果越明显；
• 如果需要更细腻的控制，还可以扩展分段逻辑，比如分三个阶段调整速度。

内容的提问来源于stack exchange，提问作者Zura Sudadze