requestAnimationFrame请求动画帧

118 阅读1分钟

当c3动画无法满足时,可以使用h5的api
setTimeout制作动画时,时间跟浏览器的刷新,导致抖动
可以使用requestAnimationFrame制作动画\

let i= 0
/*
*param:move 传参为回调函数
*/
let id = requestAnimationFrame(move)
function move(){
    i++
    //获取要操作的元素进行位移
    document.getElementById('test').style.transform=`translateX(${i}px)`
    id = requestAnimationFrame(move)
}
//清除动画
setTimeout(()=>{
    cancelAnimationFrame(id)
},200)