有意思的 requestAnimationFrame html动画api

最新推荐文章于 2023-12-21 16:08:10 发布

海龟先生plus

最新推荐文章于 2023-12-21 16:08:10 发布

阅读量227

点赞数 1

分类专栏： js 笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_45219069/article/details/109268230

版权

js 同时被 2 个专栏收录

70 篇文章 1 订阅

订阅专栏

笔记

25 篇文章 0 订阅

订阅专栏

本文探讨了如何在Vue自定义指令中利用requestAnimationFrame实现返回顶部的平滑滚动动画。通过设置动画帧率，避免了js定时器可能导致的丢帧和卡顿问题，提升了用户体验。同时，介绍了模拟实现这一功能的代码示例，以及如何将此原理应用到Vue的自定义指令中，以实现更佳的兼容性和控制性。

摘要由CSDN通过智能技术生成

1、原由

今天在看一个开源的Ui框架（vue）时，看到了一个返回顶部的自定义指令，也是随意一点，却发现，这个返回顶部页面滚动还带了动画，但是从f12确看不到动画的‘痕迹’，于是勾引了我的好奇心，不由去查看了该部分的源码，却发现了 requestAnimationFrame这玩意

2、requestAnimationFrame，浏览器请求动画的api，该api接收的一个回调，且已该浏览器刷新的帧数去执行，通常60hz（1000/60 16.7ms）,也就是说，会以16.7ms的时间间隔去执行这个回调

关于动画的原理就不做解释，简单说下，为什么要这玩意，通常前端做动画要么是 js，要么是css的属性，相比js的定时器，这个api的方式不会引起丢帧现象、动画出现卡顿、CPU节能等（好奇的自己取补补）。

3、自己模拟实现回到顶部带动画

var flag = true;
var left = 0;
var back = document.getElementsByClassName('back')[0]
var s = null
back.onclick = backTop
function backTop() {
	//获取页面滚动距离
    var top = document.documentElement.scrollTop || document.body.scrollTop
    //返回带动画的原因就在这里，由于会以 16.8ms的频率不断执行回调，
    //所以滚动的距离也越来越小，因此有动画效果
    if( top >0 ){
        window.requestAnimationFrame(backTop)
        let posY = top - top / 8
        window.scrollTo(0,posY)
    }
 }