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

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

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

В этом уроке мы будем использовать Sketch для создания базовых фигур и Principle для быстрой генерации кастомных анимаций загрузки. (Оба эти приложения работают на Mac.).
Вы научитесь создавать яркие анимации загрузки, используемые в Trello, Flickr, Slack и др.

Приступим.

Анимация загрузки в Slack

Как создавать кастомные анимации загрузки в Principle, Slack

Как создавать кастомные анимации загрузки в Principle, Sketch

В Sketch нарисуйте закругленные квадраты со стороной 50px или радиусом 100px каждый. Они должны выглядеть как идеальные круги, но мы используем именно квадраты с закругленными углами, чтобы создать эффект растягивания в анимации.

Поместите четыре фигуры таким образом, чтобы создать воображаемый квадрат с промежутком в 150px между каждым углом. Задайте разные цвета (#35BA90 зеленый, #69CADD синий, #EBA900 желтый и #E20661 розовый).

Как создавать кастомные анимации загрузки в Principle, Slack анимация

Импортируйте фигуры в Principle, сгруппируйте и кликните на опции «Create Component» (создать компонент).

Войдите во вложенную группу и поверните артборд на 15 градусов. Затем выделите каждый отдельный круг и поверните его назад до первоначальной позиции (назад на 15 градусов). Это создаст эффект растягивания в линию.

Как создавать кастомные анимации загрузки в Principle, Slack анимация

Примените триггер «Auto» к артборду, затем растяните каждый закругленный квадрат до противоположной стороны артборда до длины 295px. Задайте непрозрачность 75% для каждой фигуры на обоих артбордах.

Как создавать кастомные анимации загрузки в Principle, Slack - фото 2

Примените еще один триггер «Auto» ко второму артборду. На новом артборде сократите каждую линию до начальной ширины 50px, но с обратной стороны от начальной позиции.

Прилинкуйте последний артборд к первому с помощью триггера «Auto». Нажмите кнопку «Back to Parent» для превью конечного результата.

Совет: Когда вы жмете «Back to Parent», можно повернуть главную группу на -30 градусов, чтобы было больше похоже на Slack. Также можете изменить темп анимации внутри панели «Animate» и применить эффект «Ease Both» для сглаживания переходов.

Анимация загрузки Trello

Как создавать кастомные анимации загрузки в Principle, trello

Как создавать кастомные анимации загрузки в Principle, trello - sketch

В Sketch нарисуйте синий квадрат со стороной 100px. Нарисуйте белый прямоугольник 60px в ширину и 140px в высоту. Выровняйте его по верхнему левому углу предыдущего квадрата с верхней и левой границей 30 px. Продублируйте белый прямоугольник, выровняйте его по правому краю квадрата с границей 30px и сократите его высоту до 70px.

Как создавать кастомные анимации загрузки в Principle, trello - Principle

Импортируйте артборд в Principle и примените триггер «Auto» для создания нового ключевого кадра. На новом артборде поменяйте высоты белых прямоугольников (левый должен стать 70px, правый — 140 px в высоту). Примените эффект «Ease-Both» в панели «Animate» для сглаживания перехода.

Вращающийся круг

Как создавать кастомные анимации загрузки в Principle, вращающийся круг

Как создавать кастомные анимации загрузки в Principle, вращающийся круг в sketch

Нарисуйте круг в Sketch. Задайте контур в 10px со значениями «Dash» (штрих) и"Gap" (промежуток) и без заливки. Используйте цвет «Angular Gradient» для контура, он поможет четче выразить эффект вращения, который вы создадите позже.

Как создавать кастомные анимации загрузки в Principle, вращающийся круг - фото 2

Откройте новый файл Principle и перенесите круг из Sketch с помощью кнопки «Import». Примените два триггера «Auto» в ряд.

Как создавать кастомные анимации загрузки в Principle, вращающийся круг - фото 3

Чтобы создать эффект вращения, выделите круг в среднем артборде и замените его значение «Angle» на 360 градусов. Затем выделите третий круг и задайте ему другое название (например, «copy») внутри панели слева. Это поможет сымитировать эффект бесконечного вращения.

Наконец, прилинкуйте третий артборд к первому с помощью еще одного триггера Auto. Примените переход «Linear» ко временной линии между артбордами 1 и 2. Просмотрите только что созданную анимацию в окне превью.

Анимация загрузки Flickr

Как создавать кастомные анимации загрузки в Principle, Flickr

Как создавать кастомные анимации загрузки в Principle, Flickr анимация

Нарисуйте синий и розовый круги, чтобы они касались друг друга. Импортируйте их в Principle и примените триггер «Auto» для создания нового артборда.

Поменяйте местами положения кругов и примените новый триггер «Auto» для создания третьего артборда. На третьем артборде поменяйте местами порядок слоев с кругами в панели слева.

Как создавать кастомные анимации загрузки в Principle, Flickr анимация - фото 2

Примените третий триггер «Auto», чтобы создать четвертый артборд. На нем еще раз поменяйте местами положение кругов, и вставьте последний триггер «Auto» c последнего артборда на первый.

Текстовый загрузчик

Как создавать кастомные анимации загрузки в Principle, текстовый загрузчик

Как создавать кастомные анимации загрузки в Principle, текстовый загрузчик - фото 2

Создайте новый проект в Principle, и с помощью инструмента Text напечатайте «LOADING.» Выровняйте текст по левому краю и по вертикальному центру артборда.

Примените триггер «Auto» пять раз в ряд. Пятый триггер протяните с последнего артборда на первый, чтобы создать петлю кадров.

Как создавать кастомные анимации загрузки в Principle, текстовый загрузчик - фото 3

Начиная с первого артборда и двигаясь вправо, редактируйте каждый артборд, добавляя ноль, одну, две, три, две и одну точку к исходному тексту «LOADING». Прогрессия артбордов должна выглядеть так:

LOADING LOADING. LOADING. LOADING… LOADING. LOADING.

Теперь проверьте результат в превью.

Пульсирующие точки

Как создавать кастомные анимации загрузки в Principle, пульсирующие точки

Как создавать кастомные анимации загрузки в Principle, пульсирующие точки - фото 2

Нарисуйте точку диаметром 60px. Скопируйте и вставьте еще одну точку, поместите ее на расстоянии 60px от первой справа. Убедитесь, что обе точки и интервал в 60px отцентрированы на артборде.

Как создавать кастомные анимации загрузки в Principle, пульсирующие точки - фото 3

Вставьте триггер «Auto» четырежды в ряд.

На втором артборде уменьшите вторую точку до 30px.

На третьем артборде уменьшите вторую точку до 0px, а первую до 30px.

Как создавать кастомные анимации загрузки в Principle, пульсирующие точки - фото 4

На четвертом артборде увеличьте вторую точку до 30px и сократите первую до 0px.

На пятом артборде увеличьте первую точку опять до 30px, и прилинкуйте артборд к первому с помощью триггера «Auto».

Вращающиеся точки

Как создавать кастомные анимации загрузки в Principle, вращающиеся точки

Как создавать кастомные анимации загрузки в Principle, вращающиеся точки - фото 2

Поместите пять точек, как на игральном кубике. Импортируйте артборд в Principle и отцентрируйте его.

Как создавать кастомные анимации загрузки в Principle, вращающиеся точки - фото 3

Примените триггер «Auto» на артборде.

На новом артборде поверните группу точек на 360 градусов.

Прилинкуйте второй артборд к первому с помощью триггера «Auto».

Пульсирующий круг

Как создавать кастомные анимации загрузки в Principle, пульсирующий круг

Как создавать кастомные анимации загрузки в Principle, пульсирующий круг - фото 2

Начните с круга размером 50px, выровненного по центру и круга 150px с границей 5px, но без заливки.

Примените триггер «Auto» трижды в ряд.

Как создавать кастомные анимации загрузки в Principle, пульсирующий круг - фото 3

На первом артборде уменьшите второй круг (контур без заливки) до 50px, а внутренний круг до 10px.

На третьем артборде увеличьте круг-контур до 200px и задайте 0% непрозрачность. Увеличьте внутренний круг до 150px и задайте непрозрачность 50%.

На последнем артборде увеличьте внутренний круг до 200px и задайте 0% непрозрачность. Уменьшите круг-контур до 50px и задайте 25% непрозрачность.

Как создавать кастомные анимации загрузки в Principle, пульсирующий круг - фото 4

Примените триггер «Auto» к последнему артборду. Уменьшите внутренний круг до 10px с 50% непрозрачностью.

Прилинкуйте последний артборд к первому с помощью триггера «Auto».

Прыгающие точки

Как создавать кастомные анимации загрузки в Principle, прыгающие точки

Как создавать кастомные анимации загрузки в Principle, прыгающие точки - ото 1

Нарисуйте в линию три круга размером 50px и интервалом 50px.

Примените триггер «Auto». На втором артборде переместите первый круг вверх на 50px.

Примените триггер «Auto» на втором артборде. На третьем выделите первых два круга и передвиньте вверх на 50px. Три круга должны расположиться по диагонали.

Примените триггер «Auto» к третьему артборду. На четвертом подвиньте первый круг вниз на 50px. Выделите последние два круга и подвиньте их вверх на 50px.

Как создавать кастомные анимации загрузки в Principle, прыгающие точки - ото 2

Примените триггер «Auto» на четвертом артборде. На пятом подвиньте первые два круга вниз на 50px. Выделите последний круг и подвиньте на 50px вверх.

Примените триггер Auto на пятом артборде. На шестом подвиньте последние два круга вниз на 50px.

Как создавать кастомные анимации загрузки в Principle, прыгающие точки - фото 3

И, наконец, вернитесь на самый первый артборд, подвиньте первый круг вверх на 50px и прилинкуйте последний артборд к первому с помощью триггера «Auto». Можете оценить результат в превью.

Классический загрузчик

Как создавать кастомные анимации загрузки в Principle, классический загрузчик

Как создавать кастомные анимации загрузки в Principle, классический загрузчик - фото 1

Нарисуйте круг в Sketch, задайте серую границу 20px без заливки.

Вставьте копию того же круга поверх первого и измените заливку на другой цвет. Я для примера использую синий.

Нарисуйте квадрат поверх четверти синего круга. Передвиньте слой с квадратом под слой круга, и примените «Mask» к слою прямоугольника.

Как создавать кастомные анимации загрузки в Principle, классический загрузчик - фото 2

Перейдите в Principle и проимпортируйте графику из Sketch с помощью кнопки «Import».

Примените триггер «Auto» к первому артборду и поверните синий круг на 360 градусов.

Вставьте второй триггер «Auto» на втором артборде. Переименуйте сгенерированный третий слой с кругом на «copy» и прилинкуйте его назад к первому артборду с помощью триггера «Auto».

Заключение

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

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