使用JS或SVG和CSS制作Circle徽标动画

Question

我有一个圆形徽标，并且正在尝试像以下示例一样对其进行动画处理：https://codepen.io/sergiopedercini/pen/aWawra

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle {
  stroke: #4CC790;
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

<svg viewBox="0 0 36 36" class="circular-chart">
     <path class="circle"
       stroke-dasharray="60, 100"
       d="M18 2.0845
       a 15.9155 15.9155 0 0 1 0 31.831
       a 15.9155 15.9155 0 0 1 0 -31.831"
     />
    </svg>

我该怎么做？

这是我的SVG图片：

Answer 1

要从图片中的位置开始动画，您需要更改stroke-dasharray ="80, 20 "并添加 stroke-dashoffset ="-20 "

我希望这是您所需要的。

.circular-chart {
display: block;
margin: 10px auto;
max-width: 80%;
max-height: 250px;
}

.circle {
stroke: #F29105;
fill: none;
stroke-width: 2.8;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}

@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}

<svg viewBox="0 0 36 36" class="circular-chart">
 <path  class="circle"
   stroke-dasharray="80, 20"
   stroke-dashoffset="-20"
   
   d="M18 2.0845
   a 15.9155 15.9155 0 0 1 0 31.831
   a 15.9155 15.9155 0 0 1 0 -31.831"
 />
</svg>

Answer 2

@Alexandr_TT给了您一个很好的答案。 这是我的，与我不同：我正在为stroke-dashoffset

设置动画

最初，.circle具有stroke-dasharray:100;和stroke-dashoffset:100;：笔画不可见。 如果要查看路径笔画的70％，则需要在动画结束时将stroke-dashoffset设置为30动画（100-70 = 30）。

@keyframes progress {
    100% {
    stroke-dashoffset: 30;
    }
    }

这是一个有效的示例：

.circular-chart {
display: block;
margin: 10px auto;
max-width: 20vw;
max-height: 20vw;

border:1px solid #d9d9d9;
}

.circle {
stroke: #F29105;
fill: none;
stroke-width: 2.8;
stroke-linecap: round;
stroke-dasharray:100;
stroke-dashoffset:100;
animation: progress 1s ease-out forwards;
}

@keyframes progress {
100% {
stroke-dashoffset: 30;
}
}

<svg viewBox="0 0 36 36" class="circular-chart">
 <circle r="15.9155" cx="18" cy="18" stroke="#ccc" stroke-width="4" fill="none"/>
 <path  class="circle" 
   d="M18 2.0845
   A15.9155 15.9155 0 0 0 18 33.9155
   A15.9155 15.9155 0 0 0 18 2.0845"
 /> 
</svg>

也请阅读CSS技巧中的这篇文章，以了解有关How SVG Line Animation Works

的更多信息

Answer 3

您尝试使用的动画技术只能在未填充的行上起作用。

您的SVG（大概）是填充的轮廓形状。标准技术对此不起作用。您需要使用修改后的方法。

请查看以下答案，以找到适合您的方法： How to animate handwriting text on the web page using SVG?

Answer 4

这是数学解决方案，在每一帧中计算弧点并不是那么困难：

let r1 = 90, r2 = 60, r3 = 20;

requestAnimationFrame(draw)

function draw(t) {
  let a = -t/300 - Math.PI/2;
  let s = Math.sin(a);
  let c = Math.cos(a);
  let largeArc = c < 0 ? 0 : 1;
  t < 1.4e3 && requestAnimationFrame(draw);
  path.setAttribute('d', `
    M0,${-r1}
    A${r1},${r1},0,${largeArc},0,${c*r1},${s*r1}
    A${r3},${r3},0,0,0,${c*r2},${s*r2}
    A${r2},${r2},0,${largeArc},1,0,${-r2}
    A${r3},${r3},0,0,0,0,${-r1}
  `);
}

body { margin:0;overflow:hidden; }

<svg viewbox=-100,-100,200,200 height=100vh>
  <path id=path fill="#f29105"></path>
</svg>