使用 JS 或 SVG 和 css 动画圆形徽标答案

【问题标题】：Animate Circle logo using JS or SVG and css使用 JS 或 SVG 和 css 动画圆形徽标
【发布时间】：2020-01-02 15:46:57
【问题描述】：

我有一个圆形徽标，我正在尝试像下面的示例那样对其进行动画处理：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 图像：

【问题讨论】：

Codepen 和您的代码 - 当转换为可运行的片段时 - 似乎以相同的方式制作动画。你的代码应该做什么？它没有做什么？

标签： css animation svg

【解决方案1】：

这是数学解法，计算每一帧的圆弧点并不难：

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>

【讨论】：

我认为这是最接近它的结果。如果我想提高速度我该怎么办？
t/600 在这里减少分母
这会增加圆的旋转。

【解决方案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-tricks 上的这篇文章以了解有关 How SVG Line Animation Works 的更多信息

【讨论】：

你有一个经典的方法，并给出了高水平的解释。我试图用最少的版权代码更改给出一个简洁的答案
你们都忽略了 OP 的形状显然不是简单的圆形路径这一事实。 :)

【解决方案3】：

您尝试使用的动画技术仅适用于未填充的线条。

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

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

【讨论】：

【解决方案4】：

要从图片中的位置开始动画，您需要更改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>

【讨论】：