Question

我正在尝试从起点到终点对此SVG路径/弧进行动画处理，但是我无法实现。实际上，动画是从圆弧的中点开始的。

我的弧代码是：

#arc {
  display: block;
  stroke-dashoffset: 3925px;
  stroke-dasharray: 3925px;
}

#arc {
  -webkit-animation: dashAnim 1s 1s linear alternate forwards;
  animation: dashAnim 1s 1s linear alternate forwards;
}

@keyframes dashAnim {
  0% {
    stroke-dashoffset: 3925px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

<svg id="arc" viewBox="0 0 1922 100.2">
       <path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5" 
       strokeMiterlimit="10" d="M969.3,21.9c-344.4,0-669.8,82.4-956.8,229.7v6
       h1922.3C1646,106.7,1317.2,21.9,969.3,21.9z"/>
</svg>

有人可以帮忙吗？

Answer 1

在像Illustrator这样的应用程序中打开时，您的路径在画布上还有其他要点。我清理了它们，动画似乎可以按照您的要求工作。

我可以找到的路径没有其他明显的问题。

我的猜测是-当您为实际上是一个圆的闭合路径设置动画时，某些东西必须是起点和终点。在这种情况下，它是弧线的中间。

#arc {
  display: block;
  stroke-dashoffset: 3925px;
  stroke-dasharray: 3925px;
}

#arc {
  -webkit-animation: dashAnim 1s 1s linear alternate forwards;
  animation: dashAnim 1s 1s linear alternate forwards;
}

@keyframes dashAnim {
  0% {
    stroke-dashoffset: 3925px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

<svg id="arc" viewBox="0 0 1922 100.2">
       <path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5" 
       strokeMiterlimit="10" d="M1591.4,115.8c-196.6-61.1-405.6-93.9-622.1-93.9c-218.8,0-430,33.3-628.5,95.3"/>
</svg>

路径/弧的SVG动画的起点问题

1 个答案: