SVG路径使用mo-js从中心进行动画处理

Question

我正在尝试使用Mojs的strokeDasharray和strokeDashoffset为SVG的简单线形制作动画，也许我对这些属性和值感到困惑，因为它们的动画效果很奇怪。

预期的行为是动画应从中心开始，并且应以一次拍摄的方式使两侧都长到最后。

但是，动画从行的中间开始，但是统计数据具有较小的细分，然后最终的动画按预期进行-从中心开始增长直至结束。

我不知道为什么这些小片段开始出现。

DEMO

  

单击页面以查看上方链接上的动画。

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之类的属性很难使用，尤其是在您需要精确描述动画的情况下。