Canvas wave animate?

Question

[Артем]

Какой плагин для canvas лучше взять для отрисовки данных линий (jsfiddle.net/6r87w8L7/109 ) для последующей их плавной анимации. Svg morph пробовал, сильно нагружает процессор при анимации морфинга path

Answer 1

[Aleksey Solovyev]

У Вас какая цель стоит? Просто сделать: snapsvg.io
Если цель стоит 60fps, то рисуйте на видеокарте https://threejs.org/
Или тоже самое, но проще(2d): www.pixijs.com

Comments

[Артем]

threejs или pixijs позволяют отрисовать фигуры по заданным точкам d взятые с path у svg ?

[Aleksey Solovyev]

Из описание threejs - легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. Исходный код расположен в репозитории GitHub.

Оба созданы для реализации анимации на webgl. Вы можете анимировать все что угодно. Другое дело порог вхождения выше среднего(шейдеры и тп). Поэтому, возможно, для Вас будет лучше делать на snapsvg.io или использовать gsap (в данный момент стандарт для анимации любой в web)

[Артем]

Aleksey Solovyev, подскажите, пожалуйста, я то-то делаю не так в snap svg, эффект морфинга совсем кривой - jsfiddle.net/rgWLT/764

[Aleksey Solovyev]

Артем, у Вас работает анимация. Добавьте к своему path opacity = 0

var path = s.path(firstPath).attr({"fill-opacity": 0, stroke: "#000"});

и Вы увидите, что у Вас просто путь нарисован плохо(если я правильно понял что вы хотите от сей анимации).