requestAnimationFrame实现动效优化

使用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>

requestAnimationFrame用法