使用setTimeout/setInterval做动效改变时,过程中的刷新频率会影响最终效果,可以使用requestAnimationFrame来优化动效。
简单需求:
一模块,每间隔t秒右移x像素
const [left, setLeft] = useState(0)
const handlestartAnimation = () => {
addLeft(0)
}
// 通过计时器逐步增加右移偏量
const addLeft = (left) => {
if (left < 500) {
setTimeout(() => {
addLeft(left + 10)
}, 15) // 这里的异步间隔不好控制,若设置为0ms,会直接移动到最右侧;15ms,又会有明显的卡顿现象...
}
}
// 通过requestAnimationFrame
const addLeft = (left) => {
if (left < 500) {
setLeft(left + 10)
window.requestAnimationFrame(() => addLeft(left + 10)) // 这里的刷新频率会根据屏幕的刷新频率动态改变,若屏幕刷新频率为60Hz,则回调函数1000/60=16.6ms执行一次
}
}
return <div onClick={handlestartAnimation} className={cn.radio} style={{ left: `${left}px` }}></div>