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 

requestAnimationFrame用法