如何停止弹簧循环动画

Question

我有一个简单的脉冲计时器。当时间达到"0"时，我想停止脉冲动画；0〃；。我对春天的反应有点陌生，如果有人知道如何做到这一点，请帮忙。

const Timer = ({time = 0}) => {
const [timer, setTimer] = useState(time);
const props = useSpring({
config: {duration: 1000},
from: { scale: 1 },
to: {scale: 1.1},
loop: timer > 0,
});
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>)
}

Answer 1

我用一个"不那么理想"；解决方案，仍然有更好的解决方案。

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

Answer 2

const Timer = ({time = 0}) => {
const [timer, setTimer] = useState(time);
const [isCancel, setIsCancel] = useState(false);
const props = useSpring({
config: {duration: 1000},
from: { scale: 1 },
to: {scale: 1.1},
loop: timer > 0,
cancel: isCancel
});
useEffect(() => {
if (!timer) return;
const intervalId = setInterval(() => {
const newTime = timer - 1;
setTimer(newTime);

if(newTime === 0){
setIsCancel(true)
}
}, 1000);
return () => clearInterval(intervalId);
}, [timer])
return (<animated.div style={props} className={'timer-main'}>
{ timer }
</animated.div>)
}

spring中有cancel属性，它使用布尔值停止动画。