window.requestAnimationFrame 使用方式

更新日期: 2019-05-22阅读: 2.1k标签: 动画

MDN解释

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行 执行时机W3C建议,回调函数执行次数与浏览器屏幕刷新次数相匹配, 如60Hz刷新,大约就是16毫秒执行一次

参数

回调函数会被传入domHighResTimeStamp参数,DOMHighResTimeStamp指示由RequestAnimationFrame()排队的回调开始触发的时间。指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。

回调函数自动传入的参数,可以看做是页面加载后的计时(毫秒数, 如果设备支持,可能精确到微秒)即时间起源 The time origin

时间原点是被认为是当前文档的生命周期的开始的标准时间。它的计算如下:

  • 如果脚本的全局对象是Window,则时间原点确定如下:

    • 如果当前Document是第一个加载的Window,则时间原点是创建浏览器上下文的时间。
    • 如果在卸载窗口中加载的上一个文档的过程中,显示​​确认对话框让用户确认是否离开上一页,时间原点是用户确认导航到该页面的时间。新页面是可以接受的。
    • 如果上述两者均未确定时间原点,则时间原点是负责创建窗口当前的导航Document发生的时间。
  • 如果脚本的全局对象是 WorkerGlobalScope(即脚本作为Web worker运行),则时间原点是创建worker的时刻。
  • 在所有其他情况下,时间原点未定义。

在同一个帧中的多个回调函数,它们每一个都会接受到一个相同的时间戳,即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数,单位毫秒,最小精度为1ms(1000μs)。


返回值

 一个 long 整数,请求 ID ,是回调列表中唯一的标识。是个非零值,没别的意义。可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

 

应用

比如在一个页面中插入10万条数据,不考虑滚动加载、分页之类的话,就可以使用 requestAnimationFrame 来改善

<body>
    <button>关闭</button>
    <div></div>
</body>
</html>
<script>
    let timer = null
    document.querySelector('button').onclick = function (param) {  
        window.cancelAnimationFrame(timer)
    }

    setTimeout(() => {
        const num = 100000
        const step = 100 // 每次插入100条
        const loopCount = num / step
        let countOfRender = 0
        let div = document.querySelector('div')
        function add(){
            const fragment = document.createDocumentFragment()
            for(let i = 0; i < step; i++){
                const span = document.createElement('span')
                span.innerText = Math.floor(Math.random() * num)
                span.style.color = `hsl(${countOfRender}, 64%, 51%)`
                fragment.appendChild(span)
            }
            div.appendChild(fragment)
            // const first = div.firstChild
            // div.insertBefore(fragment, first)
            countOfRender++
            loop()
        }
        function loop(){
            if(countOfRender < loopCount){
                timer = window.requestAnimationFrame(add)
            }else{
                alert('结束了')
            }
        }
        loop()

    }, 1000)
</script>

 如果一次性插入100000条,页面会卡顿4-8秒左右才渲染完成,使用上述方式插入的话,后期的回流压力也会越来越大,不过前期页面的渲染时间是正常的。


链接: https://www.fly63.com/article/detial/3830

纯CSS3实现各种表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画

Vue.js动画笔记_vue实现动画效果

Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。

新手引导动画的4种实现方式

尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素

为何 Canvas 内元素动画总是在颤抖?

在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的

前端开发常用css动画代码

常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。

css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可

css transition 实现滑入滑出

transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

超酷的CSS3 loading预加载动画特效

这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下

Vue 动画的封装

js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!