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

Сегодня в вашем распоряжении красивые анимации с использованием 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 помогут создавать уникальные анимации загрузки, полностью соответствующие дизайну ваших приложений, в считанные минуты. Пользователям понравится профессионально выглядящий, приятный глазу индикатор эффективной работы приложения.