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)


相关文章
|
4月前
使用requestAnimationFrame模拟实现setTimeout和setInterval
`rafTimeout` 函数采用 `requestAnimationFrame` 实现延时或周期性调用,提供与 `setTimeout` 和 `setInterval` 类似的功能。接受参数包括要执行的函数 `fn`、延迟时间 `delay`(默认 0ms)及是否周期执行 `interval`(默认为单次执行)。返回值为包含 `id` 的对象,可用于取消定时器。通过 `cancelRaf` 或 `cancelAnimationFrame` 方法可取消对应的 `rafTimeout` 定时器。
166 2
使用requestAnimationFrame模拟实现setTimeout和setInterval
|
3月前
|
前端开发 JavaScript
animate
【9月更文挑战第27天】
44 5
|
5月前
|
JavaScript 前端开发 数据可视化
js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)
js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)
81 2
|
前端开发
setInterval
setInterval
43 0
|
消息中间件 JavaScript 前端开发
setTimeout和setInterval
setTimeout和setInterval
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
324 0
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
|
JavaScript 前端开发 异构计算
requestAnimationFrame 和 setInterval 在动画上应用的区别
定义 requestAnimationFrame 帧动画,又叫 RAF,在 requestAnimationFrame 中执行的事件叫 RAF 回调 setInterval 引用 MDN 的定义 区别
使用requestAnimationFrame实现进度条
使用requestAnimationFrame实现进度条
165 0
|
移动开发 JavaScript 前端开发
解析requestAnimationFrame和requestIdleCallback
传统的javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题
313 0
|
前端开发 小程序
09 React每隔0.2s颜色变淡 之settimeOut变成setInterval
09 React每隔0.2s颜色变淡 之settimeOut变成setInterval