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)


相关文章
|
3月前
|
前端开发 JavaScript UED
深入理解requestAnimationFrame函数及其应用
深入理解requestAnimationFrame函数及其应用
|
1月前
|
JavaScript 前端开发 数据可视化
js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)
js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)
34 2
|
3月前
uView throttle & debounce节流防抖
uView throttle & debounce节流防抖
68 0
|
9月前
|
前端开发
setInterval
setInterval
31 0
|
10月前
|
前端开发 JavaScript
CSS动画实现节流
CSS动画实现节流
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
275 0
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
|
JavaScript 前端开发 异构计算
requestAnimationFrame 和 setInterval 在动画上应用的区别
定义 requestAnimationFrame 帧动画,又叫 RAF,在 requestAnimationFrame 中执行的事件叫 RAF 回调 setInterval 引用 MDN 的定义 区别
使用requestAnimationFrame实现进度条
使用requestAnimationFrame实现进度条
143 0
15、计时器方法1(setInterval、clearInterval)
15、计时器方法1(setInterval、clearInterval)
119 0
|
移动开发 JavaScript 前端开发
解析requestAnimationFrame和requestIdleCallback
传统的javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题
270 0