Чуть более недели назад, в рамках конкурса от Телеграм, пришлось окунуться в "волшебный мир" svg, математических формул, оптимизации и анимации. Конкурсным заданием было создание достаточно простого чарта на JS, но некоторые нюансы задания и акцент на производительности делали его интересным. Учитывая желание сотворить нечто с претензией на победу, погружаться необходимо было несколько глубже привычной пороговой отметки для типовых (и не очень) проектов из мира фронтэнд разработки.
С завершением конкрусной работы не сложилось, но это время не было потрачено впустую. Главным открытием, стала возможность полноценой работы с 3D графикой в SVG! Создание моделей, вращение по выбранной оси, анимации по сценарию и многое другое — все это доступно уже здесь и сейчас.
Самое важное
Инициализация SVG элемента как 3D:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" axisZ="true">Вращение по заданной оси:
polyLine.rotateX(45);
polyLine.rotateY(90);Добавление сцен и запуск анимации:
polyLine.addAnimScene('rotateX', 45);
polyLine.addAnimScene('rotateZ', 60);
...
polyLine.runAnimScene(delay);Демо
Комментарии (17)
0ri0n
01.04.2019 20:57+1Неее. ну красиво!
Жаль не кликабельно!!! По крутил бы.shtange Автор
02.04.2019 01:19Анимация вполне корректно отрабатывает, выглядит примерно так: www.useloom.com/share/8c6419693c3c46fdb1f75b72ee5e7fc8
Ползунок чуть более проблемное место — в ближашее время исправлю.
qnok
02.04.2019 14:34Шутка в том, что axisZ Ваше собственное ноухау, больше нигде в природе не встречающееся? Вы, кстати, и в своём демо забыли свой axisZ вставить.
Идея забавная, но фигуры не воспринимаются объемными, наверное потому что нет перспективы.shtange Автор
02.04.2019 15:01Пост от 1-го апреля с тэгом юмор, но был воспринят как-то уж слишком серьезно. Мне уже и в личные сообщения пишут, интересуются этими дивными возможностями svg :) И axisZ, и остальные «незадокументированные» методы — это не более чем просто фикция. Совершенно неудивительно, что этого функционала нет в моих исходниках. Демка должна была придать этому фарсу большей убедительности. SVG не подходящий инструмент для работы с 3d графикой и вряд ли когда-либо будет таковым.
qnok
02.04.2019 16:42+1Ох, прошу прощения. Мне почему-то показалось, что это сегодняшняя статья.
Полностью моя ошибка — смотрел только на даты последних комментариев.
ivan386
В чём юмор? Неожиданная краткость статьи или демо тормозит жутко?
Добавьте пожалуйста ссылку на исходники.
shtange Автор
Юмор тут на самом деле «толстый» для тех, кто имел дело с отрисовкой графики в svg. Не хотелось бы так сразу «раскрывать все карты», может кто-нибудь попробует выяснить это самостоятельно — оставим пока интригу, если вы не против.
А насчет демо… у вас оно действительно сильно тормозит? Если да — подскажите пожалуйста на каком устройстве/браузере вы просматривали демо графики.
ivan386
SM-T310/Firefox/Android
shtange Автор
Спасибо за подсказку, исправлю
ivan386
Кстати если нажать на play несколько раз интересный эффект получается.
shtange Автор
Да, есть такое. Добавил блокировку элементов управления (кнопка плэй и ползунок) на время отработки анимации.
k12th
У меня не то чтобы тормозит, но ползунки подлагивают — Ryzen 7 1700, 16gb, GTX1080. Вероятно, отрисовку надо сделать асинхронной, или добавить ей throttle/debounce.
shtange Автор
Спасибо за совет, буду пробовать исправить этот недочет
shtange Автор
Внес правки, теперь должно корректно работать.
k12th
Да, стало отлично!
qnok
У меня лаги ползунка остались, хотя сама по себе анимация без лагов.