Анимация SVG-элемента path

[akzhan]

В статье не хватает ссылок на их обзоры.

• PS4 Review;
• XBox One Review.

[egmar]

Статья не про устройства, ссылки лишние :)

[SovGVD]

SVG рулит, примерно в 2010 году попробовал делать мультимедийные штуки на нем, после чего несколько комерческих проектов с использованием SVG вышло, работало мега шустро на любых Atom-ах и FullHD экранах того периода.

Пример использование SVG для анимации пути прохода

Был отдельный редактор, в котором задавались POI и связи между ними, дальше алгоритм уже сам строил пути прохода в зависимости от заданных в коде точек «откуда» и «куда» и подсвечивал этажи:

[KoGor]

Да, SVG штука мощная и удобная, ведь с ней можно работать как с помощью JavaScript, так и с помощью CSS. Вообще чем больше я работаю с векторной графикой, тем больше мне она нравится.

[SovGVD]

Самое главное что Chrome умеет (умел?) использовать GPU для SVG, поэтому анимация почти любой сложности с огромным числом элементов (c 0:30) рисуется и двигается плавно.

[sAntee]

На видео элементов кот наплакал. SVG тормозит уже на паре тысяч точек (если это график)

[SovGVD]

1699 мест в отрисованном зале, учитывая дополнительные элементы, номера и прочее думаю около 3000-4000 элементов наберется (а уж сколько точек — незнаю).

[sAntee]

Пардон, под точками я имел в виду элемент path. Ну в общем либо я не умею его готовить, либо еще что, но аналог вот такой штуки bl.ocks.org/mbostock/4063423 (это иерархический кластеринг) при около 10 тысячах элементов заставляла меня очень печалится…

[SovGVD]

Помойму раньше в хроме был флаг, включающий GPU аксселерацию отрисовки SVG (сейчас увидел только про SVG фильтры, но может это оно и есть). К сожалению не осталось у меня исходников, чтобы посмотреть что и как было тогда сделано, может быть какие то хаки и пришлось лепить, чтобы скорость сохранить. Но точно помню что был в диком восторге от SVG, работой с объектами и анимацией. Лепилось это в нескольких проектах подряд и производительность была самая последняя проблема.

[KoGor]

Как вы правильно заметили — подготовка (и оптимизация) SVG имеют огромное влияние на производительность. Десять тысяч элементов вроде цифра не маленькая, но поскольку о сложности этих элементов ничего неизвестно — это не показатель. Но то, что с отрисовкой карты мира масштаба 1:50,000,000 (1см = 500км) особых проблем нет (а это порядка 69 тысяч точек), вселяет надежду. Вам я советую изучить вопрос оптимизации SVG, возможно удастся упростить часть элементов, уменьшить точность, это должно помочь.

[sAntee]

По поводу сложности — допустим сектор круга (d3'шный arc). Вопрос не про единовременную отрисовку, к ней вопросов нет, вопрос был про анимацию. Я не знаю с каким фпс-ом работает transition в d3, но вот requestAnimationFrame это по дефолту 60 фпс. В анимации, допустим, меняются радиусы у этих элементов. Профайлер у меня вообще на изменение атрибута у DOM-элемента ругался больше всего. Снижение фпс, замена честных секторов на полигоны и тому подобное да, помогает. Просто мне не понравился тезис

поэтому анимация почти любой сложности с огромным числом элементов (c 0:30) рисуется и двигается плавно.

Ну и не надо забывать что есть например IE, в котором SVG работает не в пример хуже чем в хроме. Если я где-то не прав, поправьте пожалуйста, скорее всего я и впрямь чего-то не знаю.

[KoGor]

Ну возможно у вас действительно очень сложный объект, могу посоветовать ещё попробовать анимацию с помощью CSS (если вы этого ещё не сделали), хотя вряд ли там результат будет кардинально отличаться. Ну и как вариант использовать более проворный canvas, если есть возможность.

[pepelsbey]

Ещё статья на тему — 24 ways: Animating Vectors with SVG

[KoGor]

Добавил.

[svistiboshka]

lazylinepainter.info/