用SVG制作秒表外圈的走动效果

在做freeCodeCamp的番茄计时器练习时，想要在计时器的外围加一会随着时间进展的圆圈，最终的代码先贴上 - Github，效果如下图：

一开始找了几个类似的jquary插件，但都觉得代码太多了不想看... 于是想自己动手写一个。

最初的思路都是从“遮挡”方面开始的，想着用两个半圆重叠出的缺口来制造该效果，但似乎只是对时钟的0-6点比较方便，余下的6-12点半圆似乎又得有另外的技巧来制造，或者把后半圆变为以两个半圆的合并来实现而不是遮挡。

就在觉得这样的思路越想越麻烦的时候，正好看到了SVG这个神器，可以直接用CSS画出曲线，了解了一下觉得很方便，于是就从此开始着手了。

 

制作思路

计时器底盘的圆圈就不必多说，把一个div指定好宽高，后把box-radius设为100%即可实现，之后便要在圆圈上方加上SVG做出的动态圆弧。

SVG曲线在菜鸟教程上的简单实例是这样的：

曲线的轨迹是通过points属性来决定的，以位置左上角为0点x轴正向y轴负方向为坐标轴，在坐标轴上定点连线就形成了指定曲线。

所以实现思路也很直接就出来了，如下坐标图所示，x值为r+sin(angle) *r，y值为r-cos(angle)*r，angle从0°-360°变化，如此在一个setInterval定时器里将x,y值不断地往points属性增加即可制造动态效果。

 

另外有几个需要注意的点：

• x,y值在向points填入时，最好要各自加上stroke-width的值，时整个圆圈曲线往右下方向有所偏移，否则会出现圆圈的左部和上部被盖住部分的情况；
• SVG曲线覆盖在底盘的圆DIV上方后，虽然还看得到底盘上的东西，但如果底盘有添加onclick事件的话，会发现点击无效，所以要调整好SVG和DIV的z-index，使DIV在SVG曲线的上方，之后增加曲线的stroke-width来抵消被DIV覆盖的部分；
• 如果像上方的最终效果一样，有多个计时器，且计时器上的数字也要跟着变化，一定要注意所有这些变化的元素最好都要放在同一个setInterval里，以共用相同的时间变化与angle变化，否则计时器在中途暂停、开始后，可能会出现几个元素不同步的情况。

 

简单代码

#clock {
	height: 300px;
	width: 300px;
	border-radius: 100%;
	margin: 10px 10px;
	background-color: #ffc;
	z-index: 2;
}

svg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 5px;
	left: 5px;
	z-index: 1;
}
polyline {
	fill: none;
	stroke: #007bff;
	stroke-width: 10px;
}

$(document).ready(function() {
	var intervalTime = 60 * 1000 / 360;  //定时器间隔时间（1度）
	var pointnum = "";  //初始化polyline的points属性值
	var radius = parseInt($("#clock").css('width')) / 2;  //半径为时钟半径
	var x, y, radian;
	var angle = 0;

	//时间轴流动
	var timetravel = setInterval(function() {
		//转完一圈停止
		if (angle >= 360)
			clearInterval(timetravel);

		//角度转弧度
		radian = angle * (Math.PI / 180);  

		//计算x,y坐标值
		x = (radius + Math.sin(radian) * radius + 5).toFixed(1);
		y = (radius - Math.cos(radian) * radius + 5).toFixed(1);

		//增加points属性值
		pointnum += x + ',' + y + ' ';
		$("polyline").attr('points', pointnum);

		angle++;
	}, intervalTime);
});

以上代码的简单效果：