人物行迹图/SVG的描点动画

最新推荐文章于 2024-07-26 15:05:55 发布

思旧人

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量453

点赞数 11

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/jiusiw/article/details/135119130

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 10px;
        height: 10px;
        background: red;
        border-radius: 50%;
        offset-path: path(
          "M 200 100 Q 300 50 400 100 Q 450 150 400 200 Q 200 200 200 200"
        );
        animation: move 5s linear;
        animation-fill-mode: forwards;
      }

      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }

      svg {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <svg>
      <path
        d="M 200 100 Q 300 50 400 100 Q 450 150 400 200 Q 200 200 200 200"
        stroke="green"
        stroke-width="2"
        fill="none"
      />
    </svg>
  </body>
</html>
<script>
  let num1 = false;
  let num2 = false;
  let num3 = false;
  function getPoint() {
    // 用于在浏览器中优化动画效果的函数。它会在下一次重绘之前调用指定的动画函数，以确保动画在浏览器的优化渲染周期内运行。这有助于提高动画的性能和流畅度。
    requestAnimationFrame(getPoint);
    const box = document.querySelector(".box");
    // 获取元素位置和尺寸信息,包括左边距、上边距、宽度和高度。
    const boxRect = box.getBoundingClientRect();
    // 运动到某个点时，暂停动画
    if (
      Math.floor(boxRect.left) === 400 &&
      Math.floor(boxRect.top) === 100 &&
      !num1
    ) {
      box.style.animationPlayState = "paused";
      setTimeout(() => {
        num1 = true;
        box.style.animationPlayState = "running";
      }, 3000);
    }
    if (
      Math.floor(boxRect.left) === 390 &&
      Math.floor(boxRect.top) === 203 &&
      !num2
    ) {
      box.style.animationPlayState = "paused";
      setTimeout(() => {
        num2 = true;
        box.style.animationPlayState = "running";
      }, 3000);
    }
    console.log(boxRect.left, boxRect.top);
  }

  getPoint();
</script>

这是一个用于SVG的描点动画，也用于做展示屏幕上的行迹图