"Оживающие" чертежи для сайта производителя грузоподъемных механизмов и конвейеров
ЗаказчикООО «ЗПТМ» — изготовитель подъемно–транспортных машин и оборудования. Производит подъемники промышленного и бытового назначения, инвалидные подъемники и конвейеры, в основном под заказ. ЗадачаСоздать сайт-каталог. Абстрагироваться от конкурентов за счет качественного визуала, подчеркивающего качество, надежность изготавливаемой продукции и наличие собственного конструкторского бюро.
Основные решения
Digital-агентство «Винтра» уже несколько лет сотрудничает с ООО «ЗПТМ», и zavod-ptm.ru — не первый наш сайт для этого заказчика. У нас есть отработанные хорошо зарекомендовавшие решения по реализации сайта-каталога с продукцией с ООО «ЗПТМ», которые мы применили и для нового проекта. В их число входят:
- CMS »1С-Битрикс: Управление сайтом» с шаблоном «Аспро: Корпоративный сайт 3.0»;
- структурированный каталог оборудования;
- текстовый контент, созданный с учетом базовых требований по SEO.
Поэтому непосредственно разработка потребовалась только в области дизайна. Чтобы подчеркнуть наличие у компании собственного производства, возможность изготовления оборудования под заказ, высокое качество и надежность продукции, сайт выполнили в стиле бумажных чертежей советского периода. А особенно интересным и трудным стало создание уникальных иллюстраций в виде «оживающих чертежей».
Выбор идеи
Основным источником вдохновения стало вот это анимированное SVG-изображение с отрисовкой машины времени из трилогии «Назад в будущее», размещенное на codepen.io.
В данном решении используется стандартная SVG-анимация. Нам показалось это очень интересным, так как у нас есть модели подъемников и конвейеров в файлах STEP, из которых ранее мы уже создавали изображения с 3D-моделями. Поэтому не составило бы труда конвертировать исходники и в SVG. И мы приступили…
Первые трудности и их преодоление
После проработки первых изображений и конвертации их в SVG-файл мы поняли, что нас ждут проблемы. Изначальный чертеж, который разработан отделом конструкторов заказчика, включает тысячи деталей. Например, двигатель состоит из 765 элементов, а еще есть разные гайки, шайбы и прочее.
«Вес» готового SVG-файла — просто кода — составил более 2 МБ. В то время как обычно изображения в этом формате занимают пару килобайт.
Тогда мы попробовали сгруппировать отдельные узлы в более крупные блоки и анимировать их появление целиком, а не штриховкой каждой из тысяч деталей. Так нам удалось снизить размер файла на выходе, но, забегая вперед, и это не стало финальным вариантом.
Правильная анимация
Главная особенность выбранной в качестве основы анимации — это последовательная отрисовка элементов, обеспечивающая последовательное, плавное, выстроенное по определенной логике появление частей рисунка.
Поэтому нам потребовалось разметить в файле все крупные блоки и выстроить их в нужной последовательности для правильного формирования изображения. На это ушло более двух недель. В результате мы получили постепенное логичное появление всех элементов, как на SVG с DeLorean, вдохновившем нас на эту работу.
Однако «вес» созданного html-кода составил 1,8 МБ. Такой размер простой анимации длительностью 10 секунд, нас, как и прежде, не устраивал.
Все дело было в сотнях деталей. Как бы мы ни старались их сгруппировать, все равно оставалось огромное количество элементов. Решением этой проблемы стал уход от первоначальной идеи SVG-файла и конвертация анимации в .mp4 и .webm. Видео на 10 секунд такого формата занимает всего 100 КБ.
Дополнения и совершенствование
При демонстрации созданных видео заказчику родилась идея использовать в качестве фона для анимированных 3D-моделей оборудования вместо сплошного синего цвета изображение миллиметровки. Той самой советской чертежной бумаги, по ГОСТ 334–73, кто ее еще помнит? ;)
Иллюстрация стала выглядеть так:
После демонстрации этого варианта в боевом режиме мы поняли, что получается очень неплохо и встал логичный вопрос: как защитить разработанные видео? Ведь кто угодно может скопировать его и использовать где-то у себя. Поэтому решили добавить водяной знак:
А также сократили время анимации до 4 секунд и увеличили размер готового видео, чтобы на сайте оно воспроизводилось с максимальной детализацией и не отвлекало своей красотой пользователя от его основной цели слишком долго)
Подобные видео размером 400 пикселей по ширине было принято разместить на страницах каталога вместо статичных изображений карточек товаров.
После демонстрации страницы с «живой» иллюстрацией появилось желание иметь возможность запускать анимацию повторно. Вариант воспроизводить непрерывно видео по кругу не устроил. Поэтому был написан скрипт, запускающий анимацию повторно при наведении курсора мыши.
Далее встал вопрос о необходимости разработки детального изображения для карточки товара. По уже отлаженной методике мы создали видео в другом разрешении и более длительное, а также добавили брендирование в конце анимации.
Еще больше анимации
Аппетит приходит во время еды! И с нами произошло тоже самое. После отработки крупных видео мы подумали, а что если заставить изображение не только отрисовываться, но и вращаться вокруг оси. Сказано — сделано. Но дальше — больше. Пришла идея показать движение кабины.
«Такое возможно?» — спросили мы у нашего 3D-шника. Он ответил: «Ну, в принципе, да», и это стало началом нового этапа.
Сначала добавили сведение переходов кадров и облет камеры вокруг оси. И это было уже очень интересно. Далее, мы решили не просто провести презентацию, а показать анимацией работу подъемника, и вышло это:
Аналогичное видео создали и для гидравлического стола:
Естественно, размер файла существенно увеличился — до 1,8 МБ в среднем. Но визуальный результат того стоил. Такие видеоролики было и разместили в карточки товаров, убрав появление и отрисовку элементов, которые присутствовали на первоначальных демо-видео.
Последние сложности
Когда мы завершили разработку всех роликов, разместили их на сайте и приступили к тестам на кроссбраузерность и адаптивность, выяснилось, что анимация работает везде, кроме как знаете где? Правильно! У директора «ЗПТМ», на абсолютно новеньком ноутбуке файлы .webm воспроизводились битыми, были видны пиксели, полосы, зависания, мерцания и прочие баги, как будто нет нужного кодека. Обновление Windows и установка кодеков не дали никаких результатов.
Выяснили, что только webm-формат дает такие сбои, и они наблюдаются во всех браузерах, но только при включенном аппаратном ускорении браузера. Решением казалось бы было отключить его. Но мы же не напишем для пользователей сайта, у которых аналогичные ноутбуки, инструкцию: если вы не видите здесь видео, то пройдите 7 кругов ада…
Тестирование ушло глубже, и прошло еще недели две, пока нам не пришло в голову просто перебрать все возможные кодеки при экспорте файла. Так мы получили почти 20 разных вариантов на первый взгляд стандартных видеороликов, не отличимых при просмотре взглядом. Отдали их директору и попросили запустить их все. Каково же было наше удивление, что один из них все же запустился нормально. Оказалось, что директорский компьютер дружит только с устаревшим кодеком VP8. Хотя, казалось бы, новый ноутбук должен уметь воспроизводить более современный и используемый сейчас по умолчанию VP9.
После почти полмесяца мучений с поиском проблемы, переконвертация всех видео с последующей перезаливкой уже на рабочем проекте растянулись еще на неделю. А в конце мы дополнительно сжали видео примерно на 20–30%, что позволило повысить скорость загрузки сайта.
Результат
Спустя всего полгода с начала разработки получили неплохой вариант оживления скучных изображений с чертежами, дав тем самым им новую жизнь. И теперь сайт zavod-ptm.ru вместо статичных иллюстраций украшают анимационные мини-ролики в .mp4 и .webm форматах. В общей сложности созданы:
- видео с отрисовкой шириной 400 пикселей для каталога товаров — для всех моделей оборудования;
- видео с отрисовкой шириной 650 пикселей для карточек товаров — для всех моделей, кроме избранных;
- видео с облетом камеры и анимацией работы оборудования — для карточек избранных товаров.
Мы прошли путь от простой анимации штрихов SVG до создания видеоролика с «ожившим» 3D чертежом, демонстрирующим работу оборудования. Оцените и вы результат нашей работы!
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
