前端小白的第一篇笔记（svg路径跑圈简单实现）

前言

我是小白，励志要做技术男神的帅逼，目前住在南京，做了快3年前端工程师，准备从今天开始写我的笔记。

参考过的资料

参考链接：实现小球跟随曲线路径移动 参考链接：沿着svg奔跑的动画

可使用的在线工具

图片转为svg svg在线编辑器

做到的效果图片及介绍

沿着svg路径前进的红线及每过一个点就点亮相应的事件

功能实现要点

1. svg路径
2. element.getPointAtLength()该方法沿路径返回给定距离的点。
3. element.getTotalLength()方法以用户单位返回路径总长度的用户代理计算值。
4. svg路径的属性1：stroke-dasharray 设置虚线长度和每段虚线之间的间距
5. svg路径的属性2：stroke-dashoffset 设置相对于起始点的偏移

html:
<svg>
    <path id="a1" d="M153 334
    C153 334 151 334 151 334
    C151 339 153 344 156 344
    C164 344 171 339 171 334
    C171 322 164 314 156 314
    C142 314 131 322 131 334
    C131 350 142 364 156 364
    C175 364 191 350 191 334
    C191 311 175 294 156 294
    C131 294 111 311 111 334
    C111 361 131 384 156 384
    C186 384 211 361 211 334
    C211 300 186 274 156 274"/>
</svg>
js:
let offset  // 给定距离 数值类型
document.getElementById('a1').getPointAtLength(offset) // 沿路径返回给定距离的点
document.getElementById('a1').getTotalLength() // 方法以用户单位返回路径总长度的用户代理计算值

功能实现思路

根据功能要点中的学习，我门可以知道路径的总长度 及路径上某一点的坐标、设置虚线的长度

1. 功能一：红线跟进度条一般前进 -> 我们可以设置虚线长度和每段虚线之间的间距， 设置虚线的长度和虚线之间的距离都为路径的总长度，那效果就是 一段空白一段路径 ， 然后在设置相对于起始点的偏移是不是就可以做成跟进度条类似的效果啦。
2. 功能二：点跟随进度条起始点一起运动的点的实现 -> 根据功能一我们知道起始点的偏移距离 在根据 getPointAtLength() 这个方法沿路径返回给定距离的点 然后给我们的点进行添加定位及偏移，不就实现了吗？
3. 功能三：底图蓝线的实现 -> 红线及红点 我们都实现了同理加个图片不难，那我们的底图蓝线是怎么实现的那？很简单只要我们重新复制一条红线 不做上述设置 是不是就是一个完整的路线， 然后给这两条path 加上绝对定位 不就重合了，这功能就实现了

写的 demo 链接（vue）

vue demo

结语

以上是我的第一篇笔记，本人前端小白一只，如果写的不好请各位大佬指正，俺想再学习到更深知识，希望和各位大佬交朋友,希望我的笔记对您提供舒适的观看体验。