Использование SVG путей в canvas для движения объектов

[Sergey-Pimenov]

Очень-очень интересная техника, спасибо что написали. getPointAtLength — вообще открытие, это просто огонь! Если у вас ещё какие-нибудь новые интересные приёмы найдутся, напишите, пожалуйста. А то редко что-то новое попадается в сфере анимации, а тут ещё и Vanilla JS вариант применения.

[citizen55]

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

[noodles]

getPointAtLength — вообще открытие, это просто огонь!

так Deprecated же(

[Sergey-Pimenov]

Я уж было испугался, но этот метод просто переехал в другое место. Так что можно просто использовать новый вариант с фолбеком на старый вариант (который в статье)

[citizen55]

Да как бы ссылка была на новый интерфейс — SVGGeometryElement. Старый был SVGPathElement

[3aicheg]

Недавно для мелкого хобби-проекта пытался сделать анимированную пунктирную линию поверх произвольного фона, и чтобы каждый пунктир был закруглён по концам и ещё обведён контрастным цветом. Ну, типа, юзер потыкал мышью по картинке, а потом через все точки пунктирный сплайн медленно прорисовался, такой юзкейс. Сделал через анимированную маску видимости, всё получилось, кроме самопересечений. Их пришлось делать, пряча svg, кладя вместо него канву и рисуя по ней тот же путь, получая точки через getPointAtLength.

[Keyten]

У меня пример очень быстро начинает тормозить, хотя ничего тормозящего там быть по идее не должно. Что-то там очень неоптимизировано.
Ну и перерисовывать лучше
а) через requestAnimationFrame, а не таймаут
б) только когда что-то действительно изменилось на канвасе

[citizen55]

Если вы про второй, там полно вещей которые нагружают процессор, и код я бы сказал очень не оптимизированный, да и цели такой не было, все таки это пример, а не готовое решение. А насчет таймаута, вы наверное не дошли до места, где вызывается rAF.

[Keyten]

А, тогда ок :) Про raf я просто не так понял кусок кода, да, вы правы.

Если хотите, покажу, куда копать, чтобы освоить ещё пару интересных вещей (это к комментарию habr.com/post/432114/#comment_19458236).

[citizen55]

Интригу создали, если они и правда интересные, то не скрывайте, напишите обязательно.

[Keyten]

Написал в личку, ответите?

[Sergey-Pimenov]

SVG SMIL вообще крутейшая вещь. Одно время команда Хромиума объявила её «Deprecated» и собиралась вообще выпилить её, так SMIL и прожил в таком статусе несколько лет. Прочитал ваше сообщение, решил проверить на caniuse как там поживает статус SMIL'а. Оказалось ещё в середине 2016 хромиумцы под давлением сообщества решили отменить «депрекацию» и выпиливание. Это же просто праздник, теперь можно смело продолжать использовать на проде! Просто нативных аналогов вообще нет, там и морфинг, и (как в вашем примере) анимация вдоль пути. В общем хорошо, что вы упомянули ваш опыт

[citizen55]

Получилось симпатично, даже колеса крутятся, но у вас анимация «внутри» svg, в моем случае изначально надо было двигать растровое изображение на холсте. Хотя, таким образом можно перемещать и любой блок на html странице, но говорить о широкой поддержке, в этом случае, вряд ли приходится.

[ivan386]

Я прочитав заголовок подумал что canvas в svg запихнули и двигали по путям.

[citizen55]

Шикарно было бы наоборот — svg в canvas запихать.