javascript - SVG 路径从中心开始动画，使用 mo-js

Question

我正在尝试使用 mojs、strokeDasharray 和 strokeDashoffset 为 SVG 的简单线条形状制作动画，也许我对这些属性和值感到困惑，它们在制作动画时表现得很奇怪。

预期的行为是动画应该从中心开始，并且应该在一次拍摄中向两侧增长，直到结束。

然而，动画从线的中间开始，但统计数据有小段，然后最终动画按预期进行 - 从中​​心开始增长，直到结束。

我不明白为什么那些小片段一开始就来了。

DEMO

click on the page to see the animation on above link.

const line = new mojs.Shape({
    stroke: 'blue',
    shape: 'line',
    strokeLinecap: 'round',
    strokeDasharray: {'0%': '100%'},
    strokeDashoffset: {'-50%':'0%'},
    radius: 50,
    strokeWidth: 6,
    duration: 2000
  })

Answer 1

如果我明白你在找什么，下面的代码应该可以完成工作:

const line = new mojs.Shape({
  stroke: 'blue',
  shape: 'line',
  strokeLinecap: 'round',
  radius: {'0': '50'},
  strokeWidth: 6,
  duration: 2000
})

使用 strokeDasharray 等属性非常具有挑战性，尤其是当您正在寻找精确描述的动画时。