svg沿路径运动

两个关键的API

  • getTotalLength()
    获取路径的总长度
  • getPointAtLength(distance)
    获取路径在指定长度下的某点坐标
html 复制代码
<template>
  <div style="height: 90vh; width: 90vw">
    <svg width="600px" height="400px">
      <path
        id="path"
        d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
        stroke="black"
        fill="transparent"
      />
      <circle id="item" cx="5" cy="5" r="5"></circle>
    </svg>
  </div>
</template>
export default {
  mounted() {
    const path = document.querySelector("#path");
    const item = document.querySelector("#item");
    let len = 0;
    function move() {
      if (len > path.getTotalLength()-1) {
        len = 0;
      }
      len++;
      // 获取下一段距离的点坐标,平移过去
      const currentPoint = path.getPointAtLength(len);
      item.setAttribute("transform",`translate(${currentPoint.x-5},${currentPoint.y-5})`)
    }
    setInterval(() => {
      move();
    }, 100);
  },
};
</script>

这里要简单的介绍下svg的坐标系

svg的原点是其画布的左上角,x轴正方向向右,y轴正方向向下。
translate(x,y) 表示将物体向右移动 x 单位,向下移动 y 单位,如果想参考物体的中心点来移动,则移动距离为 (x2-x1,y2-y1)

通过不断的获取一下段距离的坐标点,改变物体的坐标实现物体的运动。效果如图下:

沿路径运动方向自动转向

  • 曲线上某一个点的运动方向为其切线的方向,我们只需要获取到该切线的夹角,并将物体旋转相同的角度即可。
  • 计算某个点的切线
js 复制代码
      // 当前点
      const currentPoint = path.getPointAtLength(len);
      // 在当前点上移动极小段距离
      const nextPoint = path.getPointAtLength(len + 0.01);
      // 该点的切线与x轴正方向的夹角      
      const angle = Math.atan2(
      nextPoint.y - currentPoint.y, 
      nextPoint.x - currentPoint.x)
      *(180 / Math.PI);

当物体的正方向不是x轴的正方向时,需要将物体旋转到x轴的正方向

如下图: 三角形的初始方向朝上,需要向右旋转90度,使其方向指向x轴的正方向

js 复制代码
    let len = 0;
    function move() {
      if (len > path.getTotalLength()-1) {
        len = 0;
      }
      len++;
      const currentPoint = path.getPointAtLength(len);
      const nextPoint = path.getPointAtLength(len + 0.01);
      // 与X轴的切线夹角
      // 在切线夹角的基础上旋转90度
      const angle =
        Math.atan2(nextPoint.y - currentPoint.y, nextPoint.x - currentPoint.x) *
        (180 / Math.PI) + 90 ;
      item.setAttribute(
        "transform",
        // 假设参考点为 (10,0)
        `translate(${currentPoint.x - 10},${currentPoint.y-0}) rotate(${angle})`
      );
      item.setAttribute("transform-origin",`${10}px ${0}px`)
    }

默认的旋转点为元素的左上角,将其修改到参考点上,得到的效果如下:

相关推荐
就爱瞎逛15 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81618 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者33 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js