Анимированный логотип

Я постоянно продолжаю совершенствовать свой интернет магазин (чего не скажешь о блоге, но ему это и не нужно), и сегодня я расскажу вам как я делал анимированный логотип – Крутящиеся шестеренки позади буквы R.

Пример вы можете посмотреть на моем сайте – https://robom.ru или на следующей гифке.

А теперь подробнее о том, как я это делал.

Так как постоянно крутящаяся штука на сайте очень напрягает (да что там на сайте – я пока статью пишу она мне уже надоела), то я решил сделать движение только по наведению курсора. В таком случае вариант с гифкой отпал сразу, и я решил сделать все это дело с помощью спрайтов. Но об это позже.

Логотип я сделал не особо заморачиваясь – нашел в интернете шестеренки, поиграл с цветами и нарисовал на их фоне огромную букву R.

Так как я не силен в создании анимации я решил сделать все это средствами браузера и после просто заснять и раскадрировать.

Получается что нам нужно 4 элемента – 3 шестерни и буква R

Исходник шестеренок вы можете увидеть здесь

Теперь из всех нам нужно вырезать только одну. Будем вырезать верхнюю, так как у нее все наиболее удаленные точки квадрата, в который будем ее вписывать находятся на виду.

Дальше просто дело техники.

Вписываем нашу шестеренку в квадрат.

 

Откадрируем ее в этот квадрат, скопируем и повернем на 180 градусов. После всех действий у нас получилась вот такая штука

 Как видите – уже очертания шестеренки вырисовываются очень даже хорошо. И остается только обрезать лишнее, чтобы получить . . .

 Теперь дело за малым – осталось все расположить в браузере и заставить вращаться.

Результат выполнения вы можете увидеть выше – не хочу опять вставлять эту гифку, чтобы она не мозолила глаза.

После того как нам удалось все это заставить вращаться в браузере записываем эту часть экрана с помощью программы

simplescreenrecorder

И обрабатываем до нужной длины/разбиваем на кадры с помощью программы

openshot 

 Обе программы находятся в стандартных репозиториях ubuntu, и достаточно просты. Так что разъяснять их работу не буду.

После того как у нас получилась нарезка кадров переведем все это дело в спрайт с помощью любого онлайн генератора. Я пользовался вот этим.

После перевода у меня получился достаточно большой спрайт – около 600 Кб против прежних 15. Меня это категорически не устраивало. Ну правда, что за дела? На главной странице картинка больше полу мегабайта. Так дела не делаются и я стал искать решение.

Решение нашлось достаточно быстро – так как на изображении только 2 цвета, да и формы не слишком сложные я решил использовать SVG. Перегнать изображение в SVG онлайн можно здесь – там правда на одну регистрацию дается всего 2 перевода изображения, но не беда – на помощь как обычно приходит 10minute-mail. Название говорит само за себя.

У vectormagic, кстати, есть отличная программа для перевода изображений. Правда только для винды, но под вайном запускается на ура.

После перевода у меня получился размер изображения в 180 Кб, что было, конечно, лучше, но не так хорошо как прежние 15.

Беглый поиск показал что SVG можно перевести в формат SVGZ – сжатый SVG

Для того чтобы ваш apache нормально отдавал SVGZ, в .htaccess нужно добавить следующие строки

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

 И после сжатия мы получаем следующую картину – Теперь SVGZ файл со спрайтами весит всего 67 Кб!

Ну вот и все – подготовительная работа завершена, и теперь приступим к анимации логотипа.

Я использовал данный плагин. Он достаточно богатый функционально и в тоже время простой и маленький (подробнее читайте по ссылке).

Вот и все – теперьп росто повесим запуск на событие onMouseOver и остановку на событие onMouseOut.

Посмотреть живой пример можно в моем магазине – https://robom.ru.

Как видите, все это достаточно просто реализуется и выглядит очень интересно.

[Всего голосов: 1    Средний: 5/5]

Добавить комментарий

Ваш e-mail не будет опубликован.