javascript - 绘制和删除圆弧 - 使用 JavaScript 或 CSS 的圆弧动画

Question

我有一个案例，我想画 3 条弧线并删除它们。

首先Arc CA应该逐步绘制，然后应该逐步删除。然后应绘制和删除弧 AB，然后应绘制和删除弧 BC。然后重复。

我的方法:

使用 Canvas 和 JS:

我从 Canvas 开始，但抗锯齿在这里不起作用。所以我认为 SVG 可能会更好。

			var currentEndAngle = 0;
			var currentStartAngle = 0;
			var currentColor = 'black';
			var lineRadius = 300;
			var lineWidth = 5;

			setInterval(draw, 5);

			function draw() { 

			    var can = document.getElementById('canvas1'); // GET LE CANVAS
			    var canvas = document.getElementById("canvas1");
			    var context = canvas.getContext("2d");
			    var x = canvas.width / 2;
			    var y = canvas.height / 2;
			    var radius;
			    var width;

			    var startAngle = currentStartAngle * Math.PI;
			    var endAngle = (currentEndAngle) * Math.PI;
			    
			    currentStartAngle = currentEndAngle - 0.01;
			    currentEndAngle = currentEndAngle + 0.01;
			    
			    if (Math.floor(currentStartAngle / 2) % 2) {
			      currentColor = "white";
			      radius = lineRadius - 1;
			      width = lineWidth + 3;
			    } else {
			      currentColor = "black";
			      radius = lineRadius;
			      width = lineWidth;
			    }
			            
			    var counterClockwise = false;

			    context.beginPath();
			    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
			    context.lineWidth = width;
			    // line color
			    context.strokeStyle = currentColor;
			    context.stroke();

			    /************************************************/
			}

            body {
				text-align: center;
                background: blue;
			} 
			#canvas1 {
				width: 500px;
				height: 500px;
				margin: 0 auto;
			} 

<canvas id="canvas1" width="700" height="700"></canvas>

使用 SVG 和 CSS

SVG 方法看起来更流畅。但我不明白如何修改 dasharray、dashoffset 和圆半径来获得 3 个弧形动画。

	circle {
	  fill: transparent;
	  stroke: black;
	  stroke-width: 2;
	  stroke-dasharray: 250;
	  stroke-dashoffset: 0;
	  animation: rotate 5s linear infinite;
	}

	@keyframes rotate {
	  0% {
	    stroke-dashoffset: 500;
	  }
	  100% {
	    stroke-dashoffset: 0;
	  }
	}

<svg height="400" width="400">
  <circle cx="100" cy="100" r="40" />
</svg>

因此，如果有人可以帮助我扩展代码或指导我如何从 svg 圆创建三个圆弧以及应该如何设置 dasharray、dashoffset 和半径？

如果您有比上述两种方法更好的解决方案，请告诉我。

我也尝试过使用 GSAP 的 drawsvg 插件，我想这可能更容易，但我不允许在我的元素中使用“drawsvg”插件。

Answer 1

对于 Canvas 版本，如评论中所述，您的抗锯齿问题是您在同一像素上一遍又一遍地重绘。

为避免这种情况，请在每一帧清除整个 Canvas 并重新绘制所有内容。

---

对于您请求的动画，您必须同时存储开始 Angular 和结束 Angular 。然后，您将一个接一个地递增，同时在超过分区大小阈值时切换。

这是一个带注释的片段，我希望它能让事情变得更清楚。

// settings
var divisions = 3;
var duration = 3000; // in ms
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = (canvas.width / 7) * 2;
context.lineWidth = 4;

// init
var currentSplit = 0;
var splitAngle = (Math.PI * 2) / divisions;
var splitTime = (duration / (divisions*2)); // how much time per split per end
var angles = [0,0]; // here we store both start and end angle
var current = 0;
var startTime = performance.now();
draw();

function draw(currentTime) {
  // first convert the elapsed time to an angle
  var timedAngle =  ((currentTime - startTime) / splitTime) * splitAngle;
  // set the current end to this timed angle + the current position on the circle
  angles[current] = timedAngle + (splitAngle * currentSplit);

  if (timedAngle >= splitAngle) {  // one split is done for this end
    // it should not go farther than the threshold
    angles[current] = (splitAngle * (currentSplit + 1));
    current = +(!current) // switch which end should move
    startTime = currentTime; // reset the timer

    if(!current){ // we go back to the start
      currentSplit = (currentSplit + 1) % divisions; // increment our split index
      }
  }

  if(angles[1] > Math.PI*2){ // we finished one complete revolution
    angles[0] = angles[1] = current = 0; // reset everything
    }
  
  // at every frame we clear everything
  context.clearRect(0, 0, canvas.width, canvas.height);
  // and redraw
  context.beginPath();
  context.arc(x, y, radius, angles[0], angles[1], true);
  context.stroke();

  requestAnimationFrame(draw); // loop at screen refresh rate
}

body {
  text-align: center;
}

#canvas1 {
  width: 250px;
  height: 150px;
}

<canvas id="canvas1" width="500" height="300"></canvas>