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

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

0
Да как бы ссылка была на новый интерфейс — SVGGeometryElement. Старый был SVGPathElement
0
Недавно для мелкого хобби-проекта пытался сделать анимированную пунктирную линию поверх произвольного фона, и чтобы каждый пунктир был закруглён по концам и ещё обведён контрастным цветом. Ну, типа, юзер потыкал мышью по картинке, а потом через все точки пунктирный сплайн медленно прорисовался, такой юзкейс. Сделал через анимированную маску видимости, всё получилось, кроме самопересечений. Их пришлось делать, пряча svg, кладя вместо него канву и рисуя по ней тот же путь, получая точки через getPointAtLength.
0
У меня пример очень быстро начинает тормозить, хотя ничего тормозящего там быть по идее не должно. Что-то там очень неоптимизировано.
Ну и перерисовывать лучше
а) через requestAnimationFrame, а не таймаут
б) только когда что-то действительно изменилось на канвасе
0
Если вы про второй, там полно вещей которые нагружают процессор, и код я бы сказал очень не оптимизированный, да и цели такой не было, все таки это пример, а не готовое решение. А насчет таймаута, вы наверное не дошли до места, где вызывается rAF.
0
А, тогда ок :) Про raf я просто не так понял кусок кода, да, вы правы.

Если хотите, покажу, куда копать, чтобы освоить ещё пару интересных вещей (это к комментарию habr.com/post/432114/#comment_19458236).
0
Интригу создали, если они и правда интересные, то не скрывайте, напишите обязательно.
0
В 2013 году сделали простенький сайт для детского сада. Пришла в голову идея в заголовок поместить движущийся паровозик из мультфильма, т.к. сад подведомствен «РЖД». Реализовали это встроенными средствами самого SVG, в частности, используя теги AnimateTransform и AnimateMotion. Кажется, получилось неплохо.-)
+1
SVG SMIL вообще крутейшая вещь. Одно время команда Хромиума объявила её «Deprecated» и собиралась вообще выпилить её, так SMIL и прожил в таком статусе несколько лет. Прочитал ваше сообщение, решил проверить на caniuse как там поживает статус SMIL'а. Оказалось ещё в середине 2016 хромиумцы под давлением сообщества решили отменить «депрекацию» и выпиливание. Это же просто праздник, теперь можно смело продолжать использовать на проде! Просто нативных аналогов вообще нет, там и морфинг, и (как в вашем примере) анимация вдоль пути. В общем хорошо, что вы упомянули ваш опыт
0
Получилось симпатично, даже колеса крутятся, но у вас анимация «внутри» svg, в моем случае изначально надо было двигать растровое изображение на холсте. Хотя, таким образом можно перемещать и любой блок на html странице, но говорить о широкой поддержке, в этом случае, вряд ли приходится.
0

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

Only those users with full accounts are able to leave comments., please.