Зачастую возникает желание добавить немного креатива в Ваш продукт в виде приятных глазу анимаций, интересных иконок или изображений. Так сказать, совместить точные (или не очень) науки и искусство в одном флаконе. Если речь идет про веб-проект, то мало того, чтоб ароматы в этом флаконе получились нежные и завораживающие, ВАЖНО чтобы флакон не стал огромной трехлитровой банкой, которая сведет на нет все старания.
Т.е. изображения и анимации должны быть оптимизированы для веб, и, как Вы догадались размер имеет значение для веб-проектов.
Как ни странно, но возьмемся мерить у кого размер больше, сравним растровые анимации, поймем, что же для Вашего продукта подойдет больше и посмотрим это все на примере незамысловатой анимации для карусели eTime системы управления проектами.
Подготовим составляющие для нашей анимации. Для нее фоном будет растровое изображение с прозрачной основой, а объект, который как раз и будем анимировать - векторное изображение. Растровое изображение предварительно подготавливаем при помощи Adobe Photoshop и сохраняем в формате .png, оптимизировав параметры для web. Векторное изображение отрисовываем в Adobe Illustrator, разбивая по отдельным слоям те контура, которые будут анимироваться и сохраняем на выходе в формате svg.
Наши подготовленные ресурсы имеют следующие размеры:
Фон анимации - файл .png - 640х480px – 107кб
Объект анимации – файл .svg – 22кб
Подготовка закончена, искомого результата попробуем добиться при помощи Adobe Animate и сохраним его в виде
- .gif анимации
- видео файла .mp4
- Canvas
SVG-анимацию в данном контексте не будем рассматривать, т.к. фоном для анимации является растровое изображение и нам придется работать в таком формате.
Итак, путем незамысловатых операций изображение оживает и по доске начинают перемещаться стикеры и менять свой цвет – прекрасно!
Сохраним полученный результат в различных форматах с учетом одинаковых параметров: 24 кадра в секунду, разрешение 640х480px, длительность 7 сек.
Результаты
.mp4 – 1.81мб
.gif – 22.4мб
canvas – 244кб
Кандидат с наименьшим размером – canvas. Аплодисменты!
Но что же это такое, как его интегрировать в веб-проект и почему его размер получился существенно меньше остальных испытуемых.
Сanvas — это элемент HTML 5, который предназначен для создания растрового изображения и анимаций при помощи JavaScript. Т.е. вместо покадрового набора изображений мы имеем исходные ресурсы и js-функции, которые и творят магию создания анимации.
Посмотрим на примере того, как выглядит итоговый набор файлов canvas.
Спрайт изображений, состоящий из наших двух исходных ресурсов, файлы js и html, где и отображается получившаяся анимация.
Соответственно самый простой способ для интеграции в Ваш проект – встраивание через iFrame.
Второй способ, встроить содержимое с тэгом <canvas> + js непосредственно в страницы вашего проекта. Но будьте готовы, что вероятно потребуется подкручивать адаптив (в случае если анимация располагается не на всю страницу), а для этого понадобится разобраться со сгенерированным .js файлом.
В Adobe Animate не так много, но присутствует вариативность настройки адаптива анимации, в зависимости от которых итоговый js файл генерируется с различными параметрами, это тоже стоит учесть.
Подводя итог, Canvas – довольно удобный и легковесный по сравнению со своими испытуемыми собратьями (видео файл и .gif анимация) способ интеграции растровой анимации в веб проект. Так что смело творите и вдохновляйте других на творческие и не только подвиги!
...Продолжение следует...