如何停止react-spring循环动画 实现计时器归零时停止脉冲动画

问题原因 #

你当前的实现存在三个会导致需求不生效的问题：

• 仅通过loop: timer > 0控制循环时，已运行的循环动画不会随着loop属性从true切为false立即终止，容易出现计时归0后动画仍在运行的情况
• 没有指定计时归0时的缩放目标，动画会直接停在当前的缩放比例，视觉效果突兀
• 原有循环配置缺少反向参数，实际运行会呈现“从1直接跳回1再放大”的生硬效果，不符合脉冲的平滑来回缩放预期

修正后的完整代码 #

import { useState, useEffect } from 'react';
import { useSpring, animated } from '@react-spring/web';

const Timer = ({time = 0}) => {
    const [timer, setTimer] = useState(time);

    const props = useSpring({
        // 动态设置缩放目标：计时运行时目标为1.1，归0时回弹到原始值1
        to: { scale: timer > 0 ? 1.1 : 1 },
        config: { duration: 1000 },
        // 仅计时运行时开启反向循环，实现平滑脉冲效果
        loop: timer > 0 ? { reverse: true } : false,
        from: { scale: 1 },
    });

    useEffect(() => {
        if (!timer) return;

        const intervalId = setInterval(() => {
            setTimer(timer - 1);
        }, 1000);

        return () => clearInterval(intervalId);
    }, [timer])

    return (<animated.div style={props} className={'timer-main'}>
        { timer }
    </animated.div>)
}

改动说明 #

• 把静态的to: {scale:1.1}改为动态判断逻辑，计时归0时会自动触发平滑缩放回scale:1的动画，不会停在放大状态
• 循环配置增加reverse: true参数，实现“从1放大到1.1，再平滑缩回1”的脉冲效果，避免生硬跳变
• 当timer归0时直接把loop设为false，react-spring会自动终止所有循环逻辑，完全停止动画

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