От JPEG до GIF и PNG – веб-графика существует уже несколько десятилетий. Хотя эти форматы за прошедшие годы подарили нам множество вирусных анимированных и неподвижных изображений, очень часто они не отличаются высоким качеством. чем оно отличается от других.

Что такое анимация Лотти?

Проще говоря, это формат файла анимации JSON, который можно использовать на веб- и мобильных платформах, а также в электронных книгах, играх и других формах цифровых медиа. Интересно, что анимации Lottie были созданы командой инженеров и аниматоров из Airbnb – возможно, это не первая компания, которая приходит вам на ум, когда вы думаете о дизайне и технологиях. К счастью для нас, они осознали необходимость более простого и эффективного способа создания анимации и решили эту проблему.

Файлы Lottie отличаются от других форматов файлов изображений по многим параметрам. Это крошечные интерактивные файлы, которые можно масштабировать или уменьшать без искажений, экспортировать на любую платформу или устройство и манипулировать ими во время выполнения. Что выделяет файлы Lottie из толпы, так это их способность сохранять высокое качество независимо от платформы или устройства, на которое вы их экспортируете. Их можно использовать на Android, iOS, в Интернете и React Native без каких-либо изменений. Кроме того, они легко настраиваются. И что самое интересное? Несмотря на то, что они полностью состоят из кода, вам не нужно обладать какими-либо знаниями в области кодирования, чтобы самостоятельно создавать анимации Lottie.

Анимация Lottie, как новичок в этом деле, как она смотрится в сравнении с другими форматами графических файлов, например, GIF? Давайте начнем с более подробного анализа GIF.

Что не так с GIF-файлами?

GIF-файлы стали вездесущей частью интернет-культуры и мемов, хотя они не были такими изначально. Они были созданы 35 лет назад во времена зарождения Интернета как способ сжатия изображений без потери большого количества данных, а также качества. Из-за технологических ограничений того времени GIF были и остались простыми 8-битными файлами, ограниченными только 256 цветами.

Хотя GIF-файлы продолжают создаваться и распространяться бесчисленным количеством людей по всему миру с поразительной скоростью, это устаревший формат, использующий устаревшие методы сжатия. При попытке масштабирования GIF-файлов они часто становятся размытыми или зернистыми и теряют свой первоначальный вид. Это происходит потому, что файлы GIF – это растровые файлы, то есть в них используются пиксели и кадры. Поэтому при увеличении масштаба GIF-файлов они выглядят более пиксельными или искаженными.

Еще один большой недостаток GIF-файлов заключается в том, что их нельзя настраивать, поскольку они все еще используют тот же 8-битный формат, что и при их создании в 1987 году. С тех пор технологии прошли долгий путь, и то, что выглядело свежо и революционно в 90-х годах, сегодня уже не актуально. Поэтому GIF-файлы по-прежнему представляют собой изображения низкого качества или видео, которые вечно зацикливаются, и не более того.

GIF-файлы также имеют большой размер файла. Они используют чрезмерную пропускную способность и могут долго загружаться, что затрудняет размещение более крупных анимаций на вашем сайте, мобильном приложении или платформе социальных сетей. Что касается пользовательского опыта, это определенно негативно скажется на показателях удовлетворенности.

Lottie vs. GIFs

Итак, чем же файлы Lottie отличаются от GIF? Для начала, они на 600% меньше, чем GIF, и в 10 раз быстрее отправляются. Поскольку это крошечные файлы, они не занимают столько места на диске и увеличивают скорость загрузки, что лучше для коэффициентов конверсии. Но самое главное, файлы Lottie можно увеличивать или уменьшать без ущерба для качества. Вы можете увеличить масштаб анимации Lottie, и графика будет выглядеть четкой и гладкой независимо от размера или скорости увеличения. Это потому, что, в отличие от GIF, анимация Lottie создается с использованием векторов (смешанных с некоторыми растровыми элементами), которые гораздо лучше подходят для безграничного масштабирования и частоты кадров.

Кроме того, файлы анимации Lottie можно настраивать, что является еще одним огромным преимуществом. Вы можете увеличить или уменьшить скорость анимации, изменить цвет фона или отредактировать цвета в каждом слое. Самое интересное, что вы можете делать это даже после того, как ваша анимация Lottie закончена и экспортирована в файл JSON. В случае с GIF-файлами после завершения создания анимации вы не сможете вернуться и отредактировать ее.

Как создать анимацию Лотти

Хотите сделать собственную анимацию Лотти? Вы будете рады обнаружить, что это довольно просто, независимо от ваших технических навыков. Есть два способа сделать это:

Получайте их бесплатно онлайн

Это, безусловно, самый простой и быстрый способ, поскольку он не предполагает, что вам придется засучить рукава и самостоятельно создавать анимации Lottie. Если вы не являетесь дизайнером или разработчиком, или у вас мало времени, существует множество онлайн-ресурсов Lottie, где вы можете получить доступ к сотням уникальных анимаций, созданных креативными и моушн-дизайнерами со всего мира. Некоторые известные ресурсы включают LottieFiles и Iconscout. Удобно, что анимации Lottie представлены в различных стилях и подходят для социальных сетей, веб- и мобильных приложений и многого другого.

Используйте Adobe After Effects

Если вы дизайнер или человек с опытом работы с программами Adobe и хотите создавать собственные иллюстрации и анимации с нуля, то этот вариант для вас.

Прежде чем приступить к работе, вам нужно будет загрузить плагин Bodymovin, который является расширением After Effects. Этот плагин поможет вам экспортировать вашу анимацию в файл JSON, когда вы закончите работу. Вы также можете использовать плагин LottieFiles. Он похож на Bodymovin, но включает некоторые дополнительные функции. Существует также приложение LottieFiles, которое позволяет быстро поделиться анимацией с заинтересованными сторонами, протестировать анимацию для мобильных устройств и многое другое.

Шаг 1: Создайте дизайн в Adobe Illustrator (или Sketch, если вам так удобнее).

Шаг 2: Анимируйте иллюстрацию в After Effects так, как вам нравится. Важно отметить, что некоторые функции в After Effects использовать нельзя, поскольку они не поддерживаются в настоящее время. Ознакомьтесь со списком здесь.

Если вы ищете более подробное руководство по After Effects, быстрый поиск в Google позволит найти множество уроков от разных авторов.

Шаг 3: Экспортируйте анимацию Lottie. Вы можете сделать это с помощью плагина Bodymovin или расширения LottieFiles. Перед экспортом анимации пройдитесь по выпадающему меню, чтобы убедиться, что вы выбрали нужные параметры для конкретного файла.

*Примечание: Вы не можете создать анимацию Lottie без использования плагина или расширения. У вас уже должна быть анимированная графика, которую вы хотите экспортировать в файл JSON, он же файл Lottie. Если вы не экспортируете анимацию с помощью какого-либо плагина или расширения Lottie, вы не создадите анимацию Lottie: в итоге у вас получится обычная анимированная графика.

“Если фотография стоит 1000 слов, то чего стоит анимация Лотти?”.

Почему стоит перейти на Lottie Files?

В недалеком прошлом создание любого вида анимации было громоздким процессом. Дизайнеры старой школы передавали свои анимации разработчикам программного обеспечения, которые, в свою очередь, проходили через трудоемкий процесс воплощения их в жизнь вручную.

Обычный человек, создающий и/или потребляющий GIF, может и не задумываться об этом, но профессиональные дизайнеры, разработчики и цифровые маркетологи всегда находятся в поиске новых способов создания высококачественных, масштабируемых, интерактивных анимаций без ущерба для пользовательского опыта. Это не означает, что мы должны автоматически навсегда отказаться от GIF, но мы должны признать необходимость более четкой и плавной анимации, которая отражает текущий технологический и пользовательский ландшафт. Мы знаем, что использование изображений, видео и анимации лучше резонирует с аудиторией. Почему же мы до сих пор используем устаревшие форматы анимации, если для создания цифрового опыта для наших пользователей приоритетны современные методы и формулы дизайна?

Где использовать анимацию Лотти

Хотя другие формы веб-графической анимации могут работать в определенных контекстах, анимированное изображение низкого качества выглядит неуместно на большинстве современных веб-сайтов, мобильных приложений и цифрового контента в целом. Файлы Lottie имеют массу преимуществ перед другими форматами графических файлов, и их можно использовать в любой ситуации, которую только можно себе представить.

Пришло время мыслить немного нестандартно. Почему бы не попробовать добавить анимацию Lottie в статью, рассылку по электронной почте, презентацию, новое мобильное приложение или интерактивную инфографику? Как насчет всех интерактивных средств массовой информации, с которыми вы сталкивались (не только мемов)?