Как создать топовую анимацию для любого интерфейса


21.03.2021 Время чтения - 7 минут 1735

Почему вообще стоит использовать анимацию в своём интерфейсе?

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


Читайте нас в Telegram.


Главный фаворит – ITG illustrations

Анимацию были добавлены повсюду. Начиная от интерактивных баннеров и заканчивая небольшими гифками лающих собак в футере.

Приложение для тренировки глаз

В этом приложении есть главный герой, который помогает вам выполнять упражнения, а также поможет с процессом входа/регистрации. К тому же, для удобства были добавлены небольшие анимированные плитки.

Сайт Bluebird

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

Основа анимации

Во-первых, стоит продумать цель анимации. Что вы собираетесь оживить? Баннерная иллюстрация для веб-сайта, маленькие иконки или onboarding-иллюстрации для приложения?

Длительность

Анимация баннера – вам не нужно, чтобы анимация длилась более 10 секунд. Люди не тратят много времени на просмотр, и если у вас есть очень крутая, но долгая анимация, то, вероятно, никто на самом деле не досмотрит ее конца.

Кроме того, имейте в виду, что чем дольше будет ваша анимация, тем больше будет весить конечный файл. Скорее всего, у вас возникнут некоторые проблемы со скоростью его загрузки.

как используют анимацию на лендингах

Мелкие анимации на веб-сайтах сделайте их длинною максимум 4-6 секунд и зацикленными. Таким образом, они будут быстро загружаться и хорошо смотреться на сайте.

Тот же принцип работает и для анимации приложений. Они должны быть короткими и зацикленными, чтобы хорошо работать и гармонично выглядеть.

Привлечение внимания и иконки

как используют анимацию для показа контактных данных

Иконки – 3-4 секунды анимации будет более чем достаточно. Для большинства сайтов вам нужно делать короткие анимации для иконок, но иногда приходится использовать более сложные и циклические варианты.

Технические особенности

Частота смены кадров

Для хорошей анимации рекомендуется использовать 30 кадров в секунду. Несмотря на то, что стандартом для большинства сайтов является 60 кадров/сек, частота 30 кадров работает лучше – анимация выглядит более плавной и меньше весит.

Формат файла
Вы можете использовать 3 типа файлов для своих веб-сайтов и приложений: gif, mp4 и Lottie JSON.

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

сравнение разных форматов анимации

Gif

Нестатический формат изображения, который легко используется везде: на веб-сайте, в мобильном приложении или даже в виде стикера отправленому другому пользователю.

  • В этом формате у вас будет прозрачный фон, которого нет в mp4.
  • Этот формат подойдет вам с малогабаритными композициями или одиночными элементами.
  • Лучше не использовать его, потому что размер файла может быть слишком большим, а его качество не самое лучшее по сравнению с mp4 и Lottie.

MP4

Это самый распространенный видеоформат.

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

Lottie JSON

Lottie – это формат анимации на основе JSON, который очень просто и легко используется на разных платформах. Это небольшие файлы, которые работают на любом устройстве и могут масштабироваться без пикселизации.

  • JSON – самый гибкий формат. При выборе Lottie, возможно изменить скорость анимации, цвет фона, наведение на анимацию, луп и т.д. через веб-плеер Lottie.
  • Чтобы загрузить файл Lottie на свой ресурс, передайте его своему разработчику или используйте плеер Lottie для генерации кода.
  • Формат Lottie подходит для таких платформ, как Windows, iOS, Android, native script, xamarin, react native, angular, flutter, qt, skia и vue.js

Мы рекомендуем использовать именно этот формат. Таким образом, ваша анимация на 100% будет иметь достойное качество, у вас будет прозрачный фон и вы легко сможете загрузить её на множестве платформ.

Идеи и дизайн

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

Надеемся, эти советы помогут вам в будущем.

  1. Подумайте о главной цели анимации. Какую историю вам нужно рассказать с её помощью? Что должен чувствовать и думать пользователь во время просмотра?
  2. Представьте себе, как будут выглядеть основные элементы иллюстрации. Что будет представлять ваш сюжет — персонажей или абстрактные элементы?
  3. Мозговой штурм идей. Никогда не начинайте проектировать или анимировать, если у вас есть только одна идея. Запишите пару вариантов, перечислите их плюсы и минусы. Только после этого выбирайте тот, над которым будете работать.
  4. Запишите подробный план, если вам нужно оживить большую историю. Это поможет вам лучше распланировать свою работу, так, что вы не закончите её с длинной и запутанной анимацией.
  5. Работа над стилем. Вы можете сотрудничать с иллюстратором или заняться стилем самостоятельно. На этом этапе важно спрогнозировать окончательный формат анимации, потому что если вы будете использовать тяжелые текстуры или даже встроенные эффекты Adobe After Effects, они могут не сработать в Lottie.
  6. Займитесь домашней работой. Правильно назовите все слои, разделите все элементы, которые будут анимированы, на разные слои.

Рекомендации по процессу анимации

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

Например, мы возьмем этого парня в очках из библиотеки бесплатных анимаций Lottie.

1. Разделите части тела на разные слои и дайте им свои имена.

как создают анимацию в AE

2. Выставьте опорные точки

как создают анимацию в AE

3. Объедините слои

как создают анимацию в AE

Хитрости Lottie

Вот несколько лайфхаков по работе с Lottie:

  • Merge path
    Иногда работает, иногда нет. Так что в данном случае лучше не рисковать.
  • Маски
    Не создавайте маску с помощью track mate. Вероятно, она не сработает. Создайте маску на слое с помощью инструмента панорамирования или фигур для добавления масок.
как создают анимацию в AE
  • Инструменты привязки
    Они либо не будут работать, либо увеличат размер файла, что плохо повлияет на его загрузку. Советуем не полагаться на DuIK, Limber или Rubber Hose. Связывайте персонажей с помощью группирования. Таким образом, ваша анимация точно будет работать в формате Lottie.
  • Градиенты
как создают анимацию в AE

Вот несколько маленьких хитростей для использования градиентов в этом формате. Градиенты можно использовать, добавив их в качестве модификатора слоя.

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

  • Размер композиции
    Старайтесь не оставлять много свободного места на ваших анимациях. Кроме того, не забудьте центрировать и выровнять снизу для удобной загрузки файла.
  • Слои
    Старайтесь не создавать много слоев в ваших композициях. Чем меньше, тем лучше в данном случае. Если у вас много анимированных или даже статических слоев, конечный размер файла будет больше, и у вас наверняка возникнут проблемы с их загрузкой.

Подготовка к добавлению

  1. Убедитесь, что у вас нет лишних масок, эффектов или слияния слоев.
  2. Сделайте фон прозрачным и проверьте, что все работает правильно.
  3. Проверьте настройки перемещения тела. Снимите флажок “Glyphs”, если у вас нет никаких шрифтов. Выберите файл “Demo”, если вам нужен HTML-файл. Выберите “Добавить в JSON” в “Assets panel”, если в вашем файле есть изображения.
  4. Загрузите JSON-файл в веб-плеер и проверьте анимацию в режиме SVG и Canvas.

Вот и все! Теперь вы можете переслать свою анимацию разработчику или добавить ее самостоятельно.

Использование анимации Lottie в конструкторах веб-сайтов

А что, если вы не хотите анимировать самостоятельно, но зато нашли классные анимации в файлах ITG или Lottie. Что же вы можете с ними сделать?

Сразу же вставьте в Webflow или Elementor.

ИЛИ

Используйте Lottie web-player, чтобы изменить цвет фона, скорость анимации, заставить ее запускаться при наведении или сделайте цикличной. Затем сгенерируйте код одним щелчком мыши и вставьте его через Readymag или прямо на своем сайте.

Заключение

  • Лучше не торопится и хорошенько обдумать идею анимации. Всегда держите в голове основную цель анимации и технические требования
  • Используйте Lottie чтобы получить хорошее качество и маленький размер файла
  • Не используйте эффекты в дизайне или анимации, чтобы она анимация работала на 100% после деплоя
  • Не забудьте проверить анимацию на наличие ошибок, прежде чем тестировать ее на сайте Lottie web-player или Lottie files website

Оригинал статьи.

Читайте также: Анимации After Effects & Lottie без потери качества


Читайте нас в Telegram.