为什么反应弹簧不重复工作?

Question

我正在尝试与useInterval:

https://codesandbox.io/s/mutable-water-icy6m

export default App = () => {
let [count, setCount] = useState(0);
useInterval(() => {
setCount(count + 1);
}, 1000);
const style = useSpring({
opacity: 1 - Math.random() / 10,
from: { opacity: 0 + Math.random() / 10 }
});
return <animated.h1 style={style}>{count}</animated.h1>;
};

一开始我用的是

const style = useSpring({
opacity: 1,
from: { opacity: 0 }
});

但是我认为如果虚拟DOM没有从以前的值中得到任何差异，那么它就不会重新渲染，所以我添加了Math.random() / 10来改变它一点，这样它就可以工作了，但它不会在数字中每一秒钟褪色，除了第一个。怎样才能使它起作用呢?

Answer 1

如果你想让动画重新开始，你需要设置reset标志:

const style = useSpring({
opacity: 1,
from: { opacity: 0},
reset:true});