最近做了埋点方案XTracker的轨迹回放功能，大致效果就是，在指定几个顺序的点之间形成轨迹，来模拟用户在页面上的先后行为（比如一个用户先点了啥，后点了啥）。效果图如下：
在这篇文章中，我们来聊聊轨迹回放的一些技术细节。
注意，本文只关注轨迹的绘制，并不讨论轨迹的各种生成算法。
绘制红点坐标
在绘制轨迹前，需要先绘制轨迹经过的红点坐标。使用SVG绘制红点非常简单：
<svg width="500" height="500">
<circle r="5" cx="50" cy="55" fill="red"></circle>
</svg>
然后根据需要多画几个红点就可以了，也可以通过js批量生成：
function createCircles() {
var r = "5",
fill = "red",
// circleGroup是红点的容器
circleGroup = document.querySelector("#circle-group");
// pointList是红点的坐标集合
pointList.forEach(function(point) {
var circle = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
circle.setAttribute("r", r);
circle.setAttribute("cx", point[0]);
circle.setAttribute("cy", point[1]);
circle.setAttribute("fill", fill);
circleGroup.appendChild(circle);
});
}
两点之间的弧线
红点坐标画完了，我们来画轨迹。在画多点的轨迹之前，我们先来学习两点之间的轨迹，也就是两点之间弧线的画法。
二次贝塞尔曲线、三次贝塞尔曲线还是圆弧？
SVG通过path可以画多种弧线主要包括：
- 二次贝塞尔曲线：需要一个控制点，用来确定起点和终点的曲线斜率。
- 三次贝塞尔曲线：需要两个控制点，用来确定起点和终点的曲线斜率。
- 圆弧：需要两个半径、两个圆心，逆时针还是顺时针，大圆弧还是小圆弧等多个属性。
显然，二次贝塞尔曲线最为简单，所以我们决定用二次贝塞尔曲线来画两点之间的弧线。在SVG的path中，二次贝塞曲线的参数是：
M x1 y1 Q x2 y2 x3 y3
其中x1 y1是起点，x2 y2是控制点，x3 y3是终点。来个demo吧！
<svg width="320px" height="320px">
<path id="line1" stroke="black" fill="none" d="M 0 50 Q 25 10 50 50"/>
</svg>
效果：
确定控制点
确定了使用二次贝塞尔曲线，那么问题又来了，如何确定控制点呢？控制点决定了曲线的斜率和方向，我们期望曲线：
- 对称。
- 接近直线，稍微弯曲即可，太弯可能会超出画布范围。
- 曲线永远顺时针，这样可以保证，A点到B点的曲线和B点到A点的曲线不重合。
要想做到这三点，我们只需要让控制点：
- 在两点的中垂线上。
- 距离两点的中点小于某个固定值。
- 在两点顺时针区域。
画个图吧！
- 在顺时针区域画中垂线。中垂线和垂直线的角度为
angle - 规定offset为某个定值（比如40，或者其他比较小的定值）。
- 那么控制点相对于中点的偏移值就确定了：
offsetX = Math.sin(angle) * offset;，offsetY = -Math.cos(angle) * offset;
完整算法：
function getCtlPoint(startX, startY, endX, endY, offset) {
var offset = offset || 40;
var angle = Math.atan((endY - startY) / (endX - startX));
var offsetX = Math.sin(angle) * offset;
var offsetY = -Math.cos(angle) * offset;
var ctlX = (startX + endX) / 2 + offsetX;
var ctlY = (startY + endY) / 2 + offsetY;
return [ctlX, ctlY];
}
起点终点相同的情况
如果起点终点相同，我们就不能使用二次贝塞尔曲线了，而是应该在该点右侧画一个小圆弧。在Path中圆弧的参数为：
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
- 弧形命令A的前两个参数分别是x轴半径和y轴半径。
x-axis-rotation表示弧形的旋转情况。large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。- 最后两个参数是指定弧形的终点。
弧形命令A的具体用法不属于本文范畴，请参考：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths 。
因为我们要求：
- 圆弧接近于圆，不是椭圆。
- 圆弧在右侧。
- 大于180度。
所以，我们的圆弧参数为：
- x轴和y轴半径同为某个很小的定值（我们就设为10吧）
x-axis-rotation为0，不需要旋转，既然是圆，转了也白转。large-arc-flag为1，显然大于180度。sweep-flag为1或0都行，不过要保证为1时，终点稍微比起点靠下一点，这样才能保证圆弧在右边。
示例代码：
<svg width="320px" height="320px">
<path id="line1" stroke="black" fill="none" d="M 50 50 A 10 10 0 1 1 50 50.1"/>
</svg>
效果截图：
将两种情况封装成获取d属性的函数：
function getD(startX, startY, endX, endY) {
var ctlPoint = getCtlPoint(startX, startY, endX, endY, 40);
var d = ["M", startX, startY].join(" ");
if (startX !== endX || startY !== endY) {
d += [" Q", ctlPoint[0], ctlPoint[1], endX, endY].join(" ");
} else {
d += [" A", 10, 10, 0, 1, 1, endX, endY + 0.1].join(" ");
}
return d;
}
完整demo：
See the Pen svg：两点间的弧线：非圆弧 by lewis liu (@lewis617) on CodePen.
多点之间的弧线
两点之间弧线确定了，那么如何确定多点之间的弧线呢？其实很简单，只需要在命令后面加上新的控制点和终点即可：
M x1 y1 Q x2 y2 x3 y3 Q x4 y4 x5 y5
所以只需要简单更新一下之前封装的函数即可：
function getD(pointList){
var offset = offset || 40;
var d = (['M' ,pointList[0][0], pointList[0][1]]).join(' ');
pointList.forEach(function(point, i){
if(i>0){
var startX = pointList[i-1][0],
startY = pointList[i-1][1],
endX = point[0],
endY = point[1];
var ctlPoint = getCtlPoint(startX, startY, endX, endY, offset);
if(startX !== endX || startY !== endY){
d+=([' Q', ctlPoint[0], ctlPoint[1], endX, endY]).join(' ');
}else{
d+=([' A', 10, 10, 0, 1, 1, endX, endY + 0.1]).join(' ');
}
}
})
return d;
}
如果pointList为：
var pointList = [
[0, 50],
[0, 50],
[50, 50],
[100, 50],
[0, 100],
[50, 100],
[100, 100],
];
那么效果图：
完整demo：
See the Pen svg：多点间的弧线：非圆弧 by lewis liu (@lewis617) on CodePen.
让轨迹回放起来
轨迹画完了，如何让它回放呢？这里需要用到这两个属性：
stroke-dasharray：控制用来描边的点划线的图案范式。
stroke-dashoffset：指定了dash模式到路径开始的距离。
- 先设置
stroke-dasharray为"length length"，来让曲线颜色和空白的长度均为曲线长度。 - 然后设置
stroke-dashoffset初始状态为曲线长度，来保证整个曲线"看起来"都是空白。 - 最后渐变
stroke-dashoffset属性为0，来模拟画线。
如何渐变呢？使用SVG SMIL animation。
关键代码：
var length = path.getTotalLength();
path.setAttribute("stroke-dasharray", length + " " + length);
path.setAttribute("stroke-dashoffset", length);
path.innerHTML= '<animate attributeName="stroke-dashoffset" to="0" dur="7s" begin="0s" fill="freeze" repeatCount="indefinite"/>';
完整demo：
See the Pen svg：多点间的弧线回放 by lewis liu (@lewis617) on CodePen.
给轨迹加上“圆头”
马上就可以看见胜利的曙光了，最后我们来做轨迹的“圆头”：
- 圆头就是个圆点（circle）
- 圆点需要跟着轨迹一起移动
画一个圆点很简单，那么如何画一个按照轨迹移动的圆点呢？答案是：animateMotion元素。
关键代码：
function createPathHead(pathObj, d){
var r = 3;
var head = document.createElementNS("http://www.w3.org/2000/svg", "circle");
head.setAttribute("id", pathObj.id + "-head");
head.setAttribute("r", r);
head.setAttribute("fill", pathObj.stroke);
var animateMotion = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion");
animateMotion.setAttribute("path", d);
animateMotion.setAttribute("begin", "indefinite");
animateMotion.setAttribute("dur", "7s");
animateMotion.setAttribute("fill", "freeze");
animateMotion.setAttribute("rotate", "auto");
head.appendChild(animateMotion);
return head;
}
至此，轨迹回放的关键技术点就讲完了，完整的demo在这里，点击按钮进行回放。
See the Pen xtracker 动画2:其他弧线 by lewis liu (@lewis617) on CodePen.