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


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

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 17

      +1
      В чём юмор? Неожиданная краткость статьи или демо тормозит жутко?
      Добавьте пожалуйста ссылку на исходники.
        0
        Юмор тут на самом деле «толстый» для тех, кто имел дело с отрисовкой графики в svg. Не хотелось бы так сразу «раскрывать все карты», может кто-нибудь попробует выяснить это самостоятельно — оставим пока интригу, если вы не против.
        А насчет демо… у вас оно действительно сильно тормозит? Если да — подскажите пожалуйста на каком устройстве/браузере вы просматривали демо графики.
          0
          SM-T310/Firefox/Android
            0
            Спасибо за подсказку, исправлю
              +1
              Кстати если нажать на play несколько раз интересный эффект получается.
                +1
                Да, есть такое. Добавил блокировку элементов управления (кнопка плэй и ползунок) на время отработки анимации.
            0

            У меня не то чтобы тормозит, но ползунки подлагивают — Ryzen 7 1700, 16gb, GTX1080. Вероятно, отрисовку надо сделать асинхронной, или добавить ей throttle/debounce.

              +1
              Спасибо за совет, буду пробовать исправить этот недочет
                +1
                Внес правки, теперь должно корректно работать.
                  +1

                  Да, стало отлично!

                    0
                    У меня лаги ползунка остались, хотя сама по себе анимация без лагов.
              0
              удалено
                +2
                Неее. ну красиво!
                Жаль не кликабельно!!! По крутил бы.
                  0
                  Анимация вполне корректно отрабатывает, выглядит примерно так: www.useloom.com/share/8c6419693c3c46fdb1f75b72ee5e7fc8
                  Ползунок чуть более проблемное место — в ближашее время исправлю.
                  0
                  Шутка в том, что axisZ Ваше собственное ноухау, больше нигде в природе не встречающееся? Вы, кстати, и в своём демо забыли свой axisZ вставить.

                  Идея забавная, но фигуры не воспринимаются объемными, наверное потому что нет перспективы.
                    +2
                    Пост от 1-го апреля с тэгом юмор, но был воспринят как-то уж слишком серьезно. Мне уже и в личные сообщения пишут, интересуются этими дивными возможностями svg :) И axisZ, и остальные «незадокументированные» методы — это не более чем просто фикция. Совершенно неудивительно, что этого функционала нет в моих исходниках. Демка должна была придать этому фарсу большей убедительности. SVG не подходящий инструмент для работы с 3d графикой и вряд ли когда-либо будет таковым.
                      +2
                      Ох, прошу прощения. Мне почему-то показалось, что это сегодняшняя статья.

                      Полностью моя ошибка — смотрел только на даты последних комментариев.

                  Only users with full accounts can post comments. Log in, please.