【奇淫巧技】一个神奇的前端动画 API requestAnimationFrame
作者：互联网
前言
先上一个面试题：做前端少不了跟动画打交道，那么实现一个动画有哪些方式呢？
- JavaScript：
setTimeout和setInterval - Css3：
transition和animation - Html：
canvas和SVG - requestAnimationFrame API
- …
- 你还知道哪些方式可以实现动画?
requestAnimationFrame API
是什么
本文主要学习 requestAnimationFrame API ， 顾名思义，请求动画帧，也称 帧循环。
文中贴的 js 代码全都是真实代码，复制即可运行。
怎么玩
我们学习一个东西，肯定是要先看看 MDN 怎么说的。
window.requestAnimationFrame()
告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
浏览器的重绘与回流 后续会单独出一篇文章来学习。现在不懂也没关系，不影响我们学习 requestAnimationFrame API 。
我们先初步认识一下它，根据文档。我们给它传递一个回调函数 test 。
//html代码全文通用，所以只在此贴出一次
<body>
<h1>requestAnimationFrame API</h1>
<button id='begin' class="begin">开始</button>
<button id='end' class="end">停止</button>
</body>
//js
(() => {
function test() {
console.log('标签：动画,淫巧,log,requestAnimationFrame,API,myRef,test,浏览器
来源： https://blog.csdn.net/m0_48721669/article/details/119207152