Pull to refresh

SVG 3D: создание, вращение по оси и анимация

Reading time 1 min
Views 9.1K


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

Демо


https://shtange.github.io/svg-3d/ (Исходники)

Tags:
Hubs:
+10
Comments 17
Comments Comments 17

Articles