首页 文章

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

提问于
浏览 次
1

我'm trying to animate simple line shape of SVG using mojs' s， strokeDasharray 和 strokeDashoffset 也许我对这些属性和值感到困惑，它在动画时表现得很奇怪 .

预期的行为是动画应该从中心开始，并且应该在一次拍摄中直到结束 .

然而，动画从行的中间开始，但是具有小片段和最终动画的统计数据按预期进行 - 从中心开始并一直持续到结束 .

我无法弄清楚为什么那些小部分在一开始就会出现 .

DEMO

点击页面查看上面链接的动画 .

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

1 回答

  • 1

    如果我了解您要查找的内容，则以下代码应该可以完成以下任务：

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

    像strokeDasharray这样的属性非常具有挑战性，特别是如果你正在寻找精确描述的动画 .

    回复于

相关问题