Чуть более недели назад, в рамках конкурса от Телеграм, пришлось окунуться в "волшебный мир" 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);
