requestAnimationFrame详解

简介: requestAnimationFrame详解

var e = document.getElementById("e");
var flag = true;
var left = 0;

function render() {
    if(flag == true){
        if(left>=100){
            flag = false
        }
        e.style.left = ` ${left++}px`
    }else{
        if(left<=0){
            flag = true
        }
        e.style.left = ` ${left--}px`
    }
}
setInterval(function(){
     render()
},1000/60)


相关文章
|
1月前
|
前端开发 JavaScript UED
深入理解requestAnimationFrame函数及其应用
深入理解requestAnimationFrame函数及其应用
|
7月前
|
前端开发
setInterval
setInterval
27 0
|
7月前
|
消息中间件 JavaScript 前端开发
setTimeout和setInterval
setTimeout和setInterval
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
257 0
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
|
JavaScript 前端开发 异构计算
requestAnimationFrame 和 setInterval 在动画上应用的区别
定义 requestAnimationFrame 帧动画,又叫 RAF,在 requestAnimationFrame 中执行的事件叫 RAF 回调 setInterval 引用 MDN 的定义 区别
使用requestAnimationFrame实现进度条
使用requestAnimationFrame实现进度条
133 0
|
移动开发 JavaScript 前端开发
解析requestAnimationFrame和requestIdleCallback
传统的javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题
247 0
|
移动开发 JavaScript 前端开发
requestAnimationFrame和requestIdleCallback
requestAnimationFrame和requestIdleCallback
395 0
|
JavaScript 前端开发