Comments 16
Очень-очень интересная техника, спасибо что написали. getPointAtLength — вообще открытие, это просто огонь! Если у вас ещё какие-нибудь новые интересные приёмы найдутся, напишите, пожалуйста. А то редко что-то новое попадается в сфере анимации, а тут ещё и Vanilla JS вариант применения.
Спасибо за положительный комментарий. Если освою что нибудь интересное, обязательно поделюсь.
Я уж было испугался, но этот метод просто переехал в другое место. Так что можно просто использовать новый вариант с фолбеком на старый вариант (который в статье)
Недавно для мелкого хобби-проекта пытался сделать анимированную пунктирную линию поверх произвольного фона, и чтобы каждый пунктир был закруглён по концам и ещё обведён контрастным цветом. Ну, типа, юзер потыкал мышью по картинке, а потом через все точки пунктирный сплайн медленно прорисовался, такой юзкейс. Сделал через анимированную маску видимости, всё получилось, кроме самопересечений. Их пришлось делать, пряча svg, кладя вместо него канву и рисуя по ней тот же путь, получая точки через getPointAtLength.
У меня пример очень быстро начинает тормозить, хотя ничего тормозящего там быть по идее не должно. Что-то там очень неоптимизировано.
Ну и перерисовывать лучше
а) через requestAnimationFrame, а не таймаут
б) только когда что-то действительно изменилось на канвасе
Ну и перерисовывать лучше
а) через requestAnimationFrame, а не таймаут
б) только когда что-то действительно изменилось на канвасе
Если вы про второй, там полно вещей которые нагружают процессор, и код я бы сказал очень не оптимизированный, да и цели такой не было, все таки это пример, а не готовое решение. А насчет таймаута, вы наверное не дошли до места, где вызывается rAF.
А, тогда ок :) Про raf я просто не так понял кусок кода, да, вы правы.
Если хотите, покажу, куда копать, чтобы освоить ещё пару интересных вещей (это к комментарию habr.com/post/432114/#comment_19458236).
Если хотите, покажу, куда копать, чтобы освоить ещё пару интересных вещей (это к комментарию habr.com/post/432114/#comment_19458236).
UFO just landed and posted this here
SVG SMIL вообще крутейшая вещь. Одно время команда Хромиума объявила её «Deprecated» и собиралась вообще выпилить её, так SMIL и прожил в таком статусе несколько лет. Прочитал ваше сообщение, решил проверить на caniuse как там поживает статус SMIL'а. Оказалось ещё в середине 2016 хромиумцы под давлением сообщества решили отменить «депрекацию» и выпиливание. Это же просто праздник, теперь можно смело продолжать использовать на проде! Просто нативных аналогов вообще нет, там и морфинг, и (как в вашем примере) анимация вдоль пути. В общем хорошо, что вы упомянули ваш опыт
Получилось симпатично, даже колеса крутятся, но у вас анимация «внутри» svg, в моем случае изначально надо было двигать растровое изображение на холсте. Хотя, таким образом можно перемещать и любой блок на html странице, но говорить о широкой поддержке, в этом случае, вряд ли приходится.
Sign up to leave a comment.
Использование SVG путей в canvas для движения объектов