requestAnimationFrame

最新推荐文章于 2024-04-03 08:39:23 发布

程序猿想成程序狮

最新推荐文章于 2024-04-03 08:39:23 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/m0_47659279/article/details/124524070

版权

web前端(html css js) 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

requestAnimationFrame(callback)允许你在每一帧执行一次回调，这对于制作动画是非常适合的

不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moving Box</title>
</head>
<body>
  <div style="width: 50px; height: 50px; border-radius: 50%; background-color: red;"></div>
  <script>
    const ball = document.querySelector("div");
    let x = 0;
    let raf = 0;

    function move() {
      ball.style.transform = `translateX(${x++}px)`
      // 必须要在回调函数中再次调用requestAnimationFrame，否则回调函数只会执行一次，而不是每一帧执行一次
      raf = requestAnimationFrame(move);
      // 取消动画使用cancelAnimationFrame(requestID)
      if(x > 400) cancelAnimationFrame(raf);
    }
    raf =  requestAnimationFrame(move);
  </script>
</body>
</html>

程序猿想成程序狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
requestAnimationFrame

requestAnimationFrame(callback)允许你在每一帧执行一次回调，这对于制作动画是非常适合的不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
复制链接

扫一扫