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/1512.html">电脑上免费好用的拼图软件</a></li><li><a href="https://blog.qqvbc.com/default/1511.html">手机刷机遇到提示“不能在 Hyper‑环境中运行刷机程序”处理</a></li><li><a href="https://blog.qqvbc.com/default/ERR_PNPM_IGNORED_BUILDS-pnpm-9-build.html">报错解读 ERR_PNPM_IGNORED_BUILDS pnpm 9 + 供应链安全策略，禁止自动运行依赖包的 build 脚本</a></li><li><a href="https://blog.qqvbc.com/default/Agiso.html">阿奇索（Agiso）开放平台，鱼店长是闲鱼官方的吗</a></li><li><a href="https://blog.qqvbc.com/default/1506.html">acme申请RSA类型的证书（兼容性更多）默认是ECC类型</a></li><li><a href="https://blog.qqvbc.com/default/1505.html">ES6和ES5有哪些主要的区别</a></li><li><a href="https://blog.qqvbc.com/default/1502.html">js数据劫持和监听实现ui更新技术细节</a></li><li><a href="https://blog.qqvbc.com/default/1498.html">Cocos Creator 主动检测碰撞（3.8.8适用）</a></li><li><a href="https://blog.qqvbc.com/default/1497.html">Cocos Creator 自定义启动加载页从简单替换LOGO到完整动画Loading场景</a></li><li><a href="https://blog.qqvbc.com/default/1496.html">Cocos Creator 多场景共享数据全套方案</a></li> </ul> </section> <section class="widget"> <h3 class="widget-title">最近回复</h3> <ul class="widget-list"> <li><a href="https://blog.qqvbc.com/default/1478.html#comment-28">Joyber</a>: 真恶心</li> <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> </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(99, 191, 83)" href="https://blog.qqvbc.com/tag/linux/" title='linux'>linux</a></div> <div><a style="color: rgb(20, 80, 154)" href="https://blog.qqvbc.com/tag/mysql/" title='mysql'>mysql</a></div> <div><a style="color: rgb(238, 175, 58)" href="https://blog.qqvbc.com/tag/php/" title='php'>php</a></div> <div><a style="color: rgb(24, 160, 184)" href="https://blog.qqvbc.com/tag/nginx/" title='nginx'>nginx</a></div> <div><a style="color: rgb(9, 136, 173)" href="https://blog.qqvbc.com/tag/git/" title='git'>git</a></div> <div><a style="color: rgb(50, 21, 71)" href="https://blog.qqvbc.com/tag/docker/" title='docker'>docker</a></div> <div><a style="color: rgb(89, 20, 63)" href="https://blog.qqvbc.com/tag/js/" title='js'>js</a></div> <div><a style="color: rgb(7, 59, 224)" href="https://blog.qqvbc.com/tag/yii/" title='yii'>yii</a></div> <div><a style="color: rgb(216, 228, 250)" href="https://blog.qqvbc.com/tag/css/" title='css'>css</a></div> <div><a style="color: rgb(46, 171, 29)" href="https://blog.qqvbc.com/tag/shell/" title='shell'>shell</a></div> <div><a style="color: rgb(19, 145, 156)" href="https://blog.qqvbc.com/tag/ansible/" title='ansible'>ansible</a></div> <div><a style="color: rgb(190, 208, 219)" href="https://blog.qqvbc.com/tag/python/" title='python'>python</a></div> <div><a style="color: rgb(197, 33, 85)" href="https://blog.qqvbc.com/tag/jenkins/" title='jenkins'>jenkins</a></div> <div><a style="color: rgb(135, 144, 66)" href="https://blog.qqvbc.com/tag/zabbix/" title='zabbix'>zabbix</a></div> <div><a style="color: rgb(66, 12, 192)" href="https://blog.qqvbc.com/tag/waf/" title='waf'>waf</a></div> <div><a style="color: rgb(95, 45, 210)" href="https://blog.qqvbc.com/tag/%E8%BF%90%E7%BB%B4/" title='运维'>运维</a></div> <div><a style="color: rgb(112, 127, 7)" href="https://blog.qqvbc.com/tag/html/" title='html'>html</a></div> <div><a style="color: rgb(132, 125, 114)" href="https://blog.qqvbc.com/tag/ide/" title='ide'>ide</a></div> <div><a style="color: rgb(142, 142, 221)" href="https://blog.qqvbc.com/tag/%E5%B0%8F%E7%A8%8B%E5%BA%8F/" title='微信小程序'>微信小程序</a></div> <div><a style="color: rgb(139, 130, 124)" href="https://blog.qqvbc.com/tag/supervisor/" title='supervisor'>supervisor</a></div> <div><a style="color: rgb(57, 159, 9)" href="https://blog.qqvbc.com/tag/CentOS/" title='CentOS'>CentOS</a></div> <div><a style="color: rgb(18, 209, 154)" href="https://blog.qqvbc.com/tag/win10/" title='win10'>win10</a></div> <div><a style="color: rgb(4, 113, 208)" 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(22, 180, 170)" href="https://blog.qqvbc.com/tag/wepy/" title='wepy'>wepy</a></div> <div><a style="color: rgb(112, 30, 176)" 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(172, 60, 30)" href="https://blog.qqvbc.com/tag/php-fpm/" title='php-fpm'>php-fpm</a></div> <div><a style="color: rgb(226, 77, 172)" href="https://blog.qqvbc.com/tag/elasticsearch/" title='elasticsearch'>elasticsearch</a></div> <div><a style="color: rgb(251, 93, 254)" href="https://blog.qqvbc.com/tag/es/" title='es'>es</a></div> <div><a style="color: rgb(137, 229, 133)" href="https://blog.qqvbc.com/tag/keepalived/" title='keepalived'>keepalived</a></div> <div><a style="color: rgb(230, 108, 253)" 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="" title="nginx 封IP 禁止IP/IP段访问">nginx 封IP 禁止IP/IP段访问</a></li><li><a href="" title="soter 框架渲染模板中提现变量不存在问题">soter 框架渲染模板中提现变量不存在问题</a></li><li><a href="" title="弄了一个翻墙的代理，需要共享的留言">弄了一个翻墙的代理，需要共享的留言</a></li><li><a href="" title="转：Clipboard 为什么无法用trigger(click)手动触发拷贝事件？怎么解决">转：Clipboard 为什么无法用trigger(click)手动触发拷贝事件？怎么解决</a></li><li><a href="" title="群晖 NAS 手动重启 Docker 服务">群晖 NAS 手动重启 Docker 服务</a></li><li><a href="" title="让ffmpeg工具支持h264格式转码 linux ffmpeg Unknown encoder 'h264'">让ffmpeg工具支持h264格式转码 linux ffmpeg Unknown encoder 'h264'</a></li><li><a href="" title="移动端下拉刷新、上拉加载更多插件">移动端下拉刷新、上拉加载更多插件</a></li><li><a href="" title="使用 ceckobecko/spreadsheet-reader 出现红点乱码的研究">使用 ceckobecko/spreadsheet-reader 出现红点乱码的研究</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>