SVG дорожка анимированная из центра, с мо-джи

Question

Я пытаюсь анимировать простую форму линии SVG, используя mojs, 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
  })

Answer 1

Если я понимаю, что вы ищете, следующий код должен выполнить эту работу:

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

С такими свойствами, как strokeDasharray, довольно сложно работать, особенно если вы ищете точно описанные анимации.