Как лучше всего анимировать отрисовку кривой Безье canvas?

Question

[hatealleverything]

Добрый день. У меня есть данная кривая.

Хотел бы её отрисовывать постепенно с анимацией. Это лучше всего сделать через массив с точками?
Есть ли ещё какие-то варианты?

Answer 1

[Сергей Соколов]

отрисовывать пунктирной линией, меняя смещение штриха. Длина штриха сравнима с длиной всей кривой.

• setLineDash() – установить паттерн штриха с длиной штриха достаточно длинной, чтобы закрыть 1 штрихом всю длину кривой.
  
• lineDashOffset – установить смещение этого штриха вдоль линии. Сначала на минус_длину_штриха, чтобы ничего не было отрисовано. Затем чуть увеличивать с каждым кадром: кривая станет появляться.
  

Comments

[hatealleverything]

Большое спасибо

Answer 2

[Максим]

https://codepen.io/ThreePixDroid/pen/QWjdNqQ

Comments

[Rerurk]

Охрененная залипуха)

[Максим]

Rerurk, я на ютубе на его канал подписан....подача материала шикарная...парень гений

[Rerurk]

Максим Ленский, ссылочку если не затруднительно?

[Максим]

Rerurk, название кодепен видишь ThreePixDroid вот в поиске вбей...тебе понравится, и FrancLaboratory тоже шикарно

[Rerurk]

Максим Ленский, спасибо, обожаю такие вещи

Answer 3

[Developer]

Массив можно, но не обязательно.
Можно последовательно вычислять все точки и отрисовывать их с задержкой