js使用 requestAnimationFrame 执行循环动画代码

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

window.requestAnimationFrame() 方法会告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。

对回调函数的调用频率通常与显示器的刷新率相匹配。虽然 75hz、120hz 和 144hz 也被广泛使用，但是最常见的刷新率还是 60hz（每秒 60 个周期/帧）。为了提高性能和电池寿命，大多数浏览器都会暂停在后台选项卡或者隐藏的中运行的 requestAnimationFrame()。</p><p><strong>语法</strong></p><pre><code class="lang-js">requestAnimationFrame(callback)</code></pre><p><strong>参数</strong><br>callback<br>该函数会在下一次重绘更新你的动画时被调用到。这个回调函数只会传递一个参数：一个 DOMHighResTimeStamp 参数，用于表示上一帧渲染的结束时间（基于 time origin 的毫秒数）<br>时间戳是一个以毫秒为单位的十进制数字，最小精度为 1 毫秒。对于 Window 对象（而非 workers）来说，它等同于 document.timeline.currentTime。此时间戳在同一代理上（所有同源的 window，更重要的是同源的 iframe）运行的所有窗口之间共享——它允许在多个 requestAnimationFrame 回调函数中执行同步动画。此时间戳值也近似于在回调函数开始时调用 performance.now()，但它们永远都不会是相同的值。<br>当 requestAnimationFrame() 队列中的多个回调开始在同一帧中触发时，它们都会收到相同的时间戳，即便在计算前一个回调函数工作量时这一帧的时间已经过去。<br>返回值<br>请求 ID 是一个 long 类型整数值，是在回调列表里的唯一标识符。这是一个非零值，但你不能对该值做任何其他假设。你可以将此值传递给 window.cancelAnimationFrame() 函数以取消该刷新回调请求。</p><p><strong>示例</strong><br>在这个例子中，一个元素的动画时间是 2 秒（2000 毫秒）。该元素以 0.1px/ms 的速度向右移动，所以它的相对位置（以 CSS 像素为单位）可以通过动画开始后所经过的时间（以毫秒为单位）的函数来计算，即 0.1 <em> elapsed。该元素的最终位置是在其初始位置的右边 200px（0.1 </em> 2000）。</p><pre><code class="lang-js">const element = document.getElementById("some-element-you-want-to-animate"); let start, previousTimeStamp; let done = false; function step(timestamp) { if (start === undefined) { start = timestamp; } const elapsed = timestamp - start; if (previousTimeStamp !== timestamp) { // 这里使用 Math.min() 确保元素在恰好位于 200px 时停止运动 const count = Math.min(0.1 * elapsed, 200); element.style.transform = `translateX(${count}px)`; if (count === 200) done = true; } if (elapsed < 2000) { // 2 秒之后停止动画 previousTimeStamp = timestamp; if (!done) { window.requestAnimationFrame(step); } } } window.requestAnimationFrame(step);</code></pre><hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：Joyber</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://blog.qqvbc.com/default/1270.html">https://blog.qqvbc.com/default/1270.html</a></p><p class="content-copyright">转载时须注明出处及本声明</p></blockquote> </div> <p itemprop="keywords" class="tags">标签: none</p> </article> <div id="comments"> <div id="respond-post-1270" class="respond"> <div class="cancel-comment-reply"> <a id="cancel-comment-reply-link" href="https://blog.qqvbc.com/default/1270.html#respond-post-1270" rel="nofollow" style="display:none" onclick="return TypechoComment.cancelReply();">取消回复</a> </div> <h3 id="response">添加新评论</h3> <form method="post" action="https://blog.qqvbc.com/default/1270.html/comment" id="comment-form" role="form"> <p> <label for="author" class="required">称呼</label> <input type="text" name="author" id="author" class="text" value="" required /> </p> <p> <label for="mail">Email</label> <input type="email" name="mail" id="mail" class="text" value="" /> </p> <p style="display: none"> <label for="u-r-l">网站</label> <input type="url" name="u-r-l" id="u-r-l" class="text" placeholder="http://" value="" /> </p> <p> <label for="textarea" class="required">内容</label> <textarea rows="8" cols="50" name="text" id="textarea" class="textarea" required ></textarea> </p> <p> <button type="submit" class="submit">提交评论</button> </p> </form> </div> </div> <ul class="post-near"> <li>上一篇: <a href="https://blog.qqvbc.com/default/1269.html" title="git rebase操作是什么，怎么理解与merge的操作">git rebase操作是什么，怎么理解与merge的操作</a></li> <li>下一篇: <a href="https://blog.qqvbc.com/default/1271.html" title="php正则表达式匹配指定长度的数字，前后无连续多余数字，匹配手机号微信QQ">php正则表达式匹配指定长度的数字，前后无连续多余数字，匹配手机号微信QQ</a></li> </ul> </div> <div class="col-mb-12 col-offset-1 col-3 kit-hidden-tb" id="secondary" role="complementary"> <section class="widget" style="display:''"> <h3 class="widget-title">友情链接</h3> <a href="https://www.apihz.cn/?shareid=10014788" target="_blank" style="color: #f69; font-weight: bold;"> 站长盒子免费数据接口 </a> </section> <section class="widget"> <h3 class="widget-title">最新文章</h3> <ul class="widget-list"> <li><a href="https://blog.qqvbc.com/default/1462.html">视频为什么要转码？网页播放视频的加载机制，m3u8格式</a></li><li><a href="https://blog.qqvbc.com/default/1461.html">在packagist.org上发布自己的PHP包流程别个使用composer即可使用</a></li><li><a href="https://blog.qqvbc.com/default/1460.html">wan2.2提示词技巧</a></li><li><a href="https://blog.qqvbc.com/default/1458.html">php调整时间为某个指定时间含数据库时间以生成测试数据</a></li><li><a href="https://blog.qqvbc.com/default/1456.html">AI视频生成comfyui跑视频尺寸设置16:9尺寸</a></li><li><a href="https://blog.qqvbc.com/default/1452.html">仿图生成技巧及九宫格做一致性视频分镜图技巧</a></li><li><a href="https://blog.qqvbc.com/default/1447.html">rouyi微服务版后台安全配置记录</a></li><li><a href="https://blog.qqvbc.com/default/1446.html">nginx rewrite 的 break 和 last 区别</a></li><li><a href="https://blog.qqvbc.com/default/1445.html">池化与归一化的概念和作用</a></li><li><a href="https://blog.qqvbc.com/default/1444.html">搜索词转向量进行向量搜索达到语义匹配排序的效果</a></li> </ul> </section> <section class="widget"> <h3 class="widget-title">最近回复</h3> <ul class="widget-list"> <li><a href="https://blog.qqvbc.com/default/1388.html#comment-27">xiaobai</a>: 教程很棒，但自动续期那。 80端口配置的 location /....</li> <li><a href="https://blog.qqvbc.com/default/585.html#comment-26">Joyber</a>: 此页方法已失效</li> <li><a href="https://blog.qqvbc.com/default/104.html#comment-25">ChuHai5</a>: 很好，赞一个，加油！</li> <li><a href="https://blog.qqvbc.com/default/135.html#comment-24">iMJMJ</a>: 顶顶顶！！！学习了~</li> <li><a href="https://blog.qqvbc.com/default/73.html#comment-23">Adoncn</a>: 了解了，努力！</li> <li><a href="https://blog.qqvbc.com/default/444.html#comment-22">Adoncn</a>: 赞呀，好人好文章，不顶不行呀</li> <li><a href="https://blog.qqvbc.com/default/428.html#comment-21">ChuHai5</a>: 前来学习！！！！</li> <li><a href="https://blog.qqvbc.com/default/437.html#comment-20">iMJMJ</a>: 不错，我喜欢这文章</li> <li><a href="https://blog.qqvbc.com/default/111.html#comment-19">ChuHai5</a>: 支持了，以后会常来学习的</li> <li><a href="https://blog.qqvbc.com/start-page.html#comment-18">ChuHai5</a>: 努力学习中</li> </ul> </section> <section class="widget"> <h3 class="widget-title">分类</h3> <ul class="widget-list"><li class="category-level-0 category-parent"><a href="https://blog.qqvbc.com/category/default/">默认分类</a></li><li class="category-level-0 category-parent"><a href="https://blog.qqvbc.com/category/wxapp/">微信小程序</a></li><li class="category-level-0 category-parent"><a href="https://blog.qqvbc.com/category/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/">前端技术</a></li></ul> </section> <section class="widget"> <h3 class="widget-title">标签</h3> <div><a style="color: rgb(5, 241, 133)" href="https://blog.qqvbc.com/tag/linux/" title='linux'>linux</a></div> <div><a style="color: rgb(63, 20, 53)" href="https://blog.qqvbc.com/tag/mysql/" title='mysql'>mysql</a></div> <div><a style="color: rgb(99, 34, 144)" href="https://blog.qqvbc.com/tag/php/" title='php'>php</a></div> <div><a style="color: rgb(87, 5, 148)" href="https://blog.qqvbc.com/tag/nginx/" title='nginx'>nginx</a></div> <div><a style="color: rgb(45, 239, 139)" href="https://blog.qqvbc.com/tag/git/" title='git'>git</a></div> <div><a style="color: rgb(190, 227, 131)" href="https://blog.qqvbc.com/tag/docker/" title='docker'>docker</a></div> <div><a style="color: rgb(93, 207, 111)" href="https://blog.qqvbc.com/tag/js/" title='js'>js</a></div> <div><a style="color: rgb(3, 220, 104)" href="https://blog.qqvbc.com/tag/yii/" title='yii'>yii</a></div> <div><a style="color: rgb(42, 185, 221)" href="https://blog.qqvbc.com/tag/css/" title='css'>css</a></div> <div><a style="color: rgb(90, 91, 217)" href="https://blog.qqvbc.com/tag/shell/" title='shell'>shell</a></div> <div><a style="color: rgb(27, 77, 103)" href="https://blog.qqvbc.com/tag/ansible/" title='ansible'>ansible</a></div> <div><a style="color: rgb(145, 68, 164)" href="https://blog.qqvbc.com/tag/python/" title='python'>python</a></div> <div><a style="color: rgb(122, 81, 136)" href="https://blog.qqvbc.com/tag/jenkins/" title='jenkins'>jenkins</a></div> <div><a style="color: rgb(224, 159, 63)" href="https://blog.qqvbc.com/tag/zabbix/" title='zabbix'>zabbix</a></div> <div><a style="color: rgb(164, 170, 134)" href="https://blog.qqvbc.com/tag/waf/" title='waf'>waf</a></div> <div><a style="color: rgb(36, 21, 172)" href="https://blog.qqvbc.com/tag/%E8%BF%90%E7%BB%B4/" title='运维'>运维</a></div> <div><a style="color: rgb(139, 179, 41)" href="https://blog.qqvbc.com/tag/html/" title='html'>html</a></div> <div><a style="color: rgb(200, 132, 27)" href="https://blog.qqvbc.com/tag/ide/" title='ide'>ide</a></div> <div><a style="color: rgb(114, 78, 207)" href="https://blog.qqvbc.com/tag/%E5%B0%8F%E7%A8%8B%E5%BA%8F/" title='微信小程序'>微信小程序</a></div> <div><a style="color: rgb(192, 215, 144)" href="https://blog.qqvbc.com/tag/supervisor/" title='supervisor'>supervisor</a></div> <div><a style="color: rgb(69, 34, 206)" href="https://blog.qqvbc.com/tag/CentOS/" title='CentOS'>CentOS</a></div> <div><a style="color: rgb(58, 46, 224)" href="https://blog.qqvbc.com/tag/win10/" title='win10'>win10</a></div> <div><a style="color: rgb(96, 78, 197)" href="https://blog.qqvbc.com/tag/%E6%94%AF%E4%BB%98%E5%AE%9D%E5%B0%8F%E7%A8%8B%E5%BA%8F/" title='支付宝小程序'>支付宝小程序</a></div> <div><a style="color: rgb(225, 156, 19)" href="https://blog.qqvbc.com/tag/wepy/" title='wepy'>wepy</a></div> <div><a style="color: rgb(211, 86, 75)" href="https://blog.qqvbc.com/tag/%E5%9B%BE%E7%89%87%E5%A4%84%E7%90%86/" title='图片处理'>图片处理</a></div> <div><a style="color: rgb(68, 226, 245)" href="https://blog.qqvbc.com/tag/php-fpm/" title='php-fpm'>php-fpm</a></div> <div><a style="color: rgb(42, 102, 249)" href="https://blog.qqvbc.com/tag/elasticsearch/" title='elasticsearch'>elasticsearch</a></div> <div><a style="color: rgb(143, 111, 138)" href="https://blog.qqvbc.com/tag/es/" title='es'>es</a></div> <div><a style="color: rgb(9, 147, 41)" href="https://blog.qqvbc.com/tag/keepalived/" title='keepalived'>keepalived</a></div> <div><a style="color: rgb(136, 229, 18)" href="https://blog.qqvbc.com/tag/%E9%AB%98%E5%8F%AF%E7%94%A8/" title='高可用'>高可用</a></div> </section> <section class="widget"> <h3 class="widget-title">热门文章</h3> <ul class="widget-list"> <li><a href="https://blog.qqvbc.com/default/111.html" title="nginx 封IP 禁止IP/IP段访问">nginx 封IP 禁止IP/IP段访问</a></li><li><a href="https://blog.qqvbc.com/default/73.html" title="soter 框架渲染模板中提现变量不存在问题">soter 框架渲染模板中提现变量不存在问题</a></li><li><a href="https://blog.qqvbc.com/default/33.html" title="弄了一个翻墙的代理，需要共享的留言">弄了一个翻墙的代理，需要共享的留言</a></li><li><a href="https://blog.qqvbc.com/default/886.html" title="转：Clipboard 为什么无法用trigger(click)手动触发拷贝事件？怎么解决">转：Clipboard 为什么无法用trigger(click)手动触发拷贝事件？怎么解决</a></li><li><a href="https://blog.qqvbc.com/default/755.html" title="群晖 NAS 手动重启 Docker 服务">群晖 NAS 手动重启 Docker 服务</a></li><li><a href="https://blog.qqvbc.com/default/135.html" title="让ffmpeg工具支持h264格式转码 linux ffmpeg Unknown encoder 'h264'">让ffmpeg工具支持h264格式转码 linux ffmpeg Unknown encoder 'h264'</a></li><li><a href="https://blog.qqvbc.com/default/79.html" title="使用 ceckobecko/spreadsheet-reader 出现红点乱码的研究">使用 ceckobecko/spreadsheet-reader 出现红点乱码的研究</a></li><li><a href="https://blog.qqvbc.com/default/104.html" title="移动端下拉刷新、上拉加载更多插件">移动端下拉刷新、上拉加载更多插件</a></li> </ul> </section> <section class="widget"> <h3 class="widget-title">其它</h3> <ul class="widget-list"> <li class="last"><a href="https://blog.qqvbc.com/joyberdeadmin/login.php">登录</a></li> <li><a href="https://blog.qqvbc.com/feed/">文章 RSS</a></li> <li><a href="https://blog.qqvbc.com/feed/comments/">评论 RSS</a></li> <li><a href="http://www.typecho.org">Typecho</a></li> </ul> </section> </div> </div> </div> </div> <footer id="footer" role="contentinfo"> © 2026 <a href="https://blog.qqvbc.com/">Joyber 的博客</a>. 由 <a href="http://www.typecho.org">Typecho</a> 强力驱动. </footer> <div style="display:none"> <script> !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"JymuwgO80cLTYHM9",ck:"JymuwgO80cLTYHM9"}); </script> </div>  <script src="/usr/themes/js/l2d/L2Dwidget.min.js" language="JavaScript"></script> <script> L2Dwidget.init({ "model": { "jsonPath": "/usr/themes/packages/live2d-widget-model-haru01/assets/haru01.model.json" }, dialog: { enable: true, script: { 'tap body': '哎呀！别碰我！', 'tap face': '人家是在认真写博客哦--前端妹子', } }, "mobile": { "show": true, scale: 0.5 } }); </script>  <script type="text/javascript"> window.jQuery || document.write('<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"><\/script>')</script> <script type="text/javascript" src="https://blog.qqvbc.com/usr/plugins/AudioPlayer/assets/miniplayer.js"></script> <script type="text/javascript"> $(function(){ $('a[id^="mp_"]').mb_miniPlayer({ width:"300", animate:true, volume:0.6, encode:true }); }); </script> </body> </html>