Практическое руководство по созданию пользовательской анимации загрузки

Загрузочная анимация, известная как троббер, отображает процесс загрузки данных. Раньше вы могли видеть прогресс-бары (индикаторы выполнения) вместо троббера, но эти времена давно позади.

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

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

Principle и Sketch — это довольно дорогостоящие продукты для macOS (для прохождения этого руководства можно скачать бесплатную пробную версию). Тем, у кого нет возможности или желания их использовать, мы предлагаем на выбор аналоги указанных выше программ, которые либо свободно распространяются, либо предлагают небольшой период бесплатного обслуживания.

Для macOS/Windows:

• Justinmind — создание анимаций и прототипов (аналог Principle);
• Inkscape — создание основных форм в формате SVG, есть импорт в PNG (аналог Sketch);
• atomic.io — создание анимаций и прототипов (30 дней бесплатно, облачный сервис, аналог Principle);
• loading.io — создание загрузочной анимации (web-приложение, которое позволяет создавать анимацию при помощи встроенных элементов. Присутствует возможность использования собственных файлов, аналог Principle).

Также для macOS есть Origami, с помощью которого можно создавать прототипы и анимации (аналог Principle).

Загрузочная анимация Slack

1. В Sketch создайте 4 квадрата со сторонами 50 px и округлите их края. Они должны выглядеть, как идеальные круги. В этом уроке будут использоваться именно квадраты с закруглёнными краями вместо кругов, так как только таким образом мы сможем создать эффект растяжения линии в анимации.
2. Разместите четыре фигуры таким образом, чтобы они образовали воображаемый квадрат со сторонами 150 px каждая. Примените к фигурам разные цвета (#35BA90 — зелёный, #69CADD — синий, #EBA900 — жёлтый, #E20661 — розовый).
3. Импортируйте фигуры в Principle, сгруппируйте их и нажмите «Create Component» (Создать компонент), таким образом будет создана группа.
4. Войдите во вложенную группу и поверните артборд на 15 градусов. Затем выберите каждый отдельный круг и верните его в исходное положение (назад на 15 градусов). Это создаст эффект растяжения по прямой линии.
5. Примените триггер «Auto» к артборду, а затем растяните каждый закруглённый прямоугольник на противоположную сторону артборда с длиной в 295 px. Поставьте уровень непрозрачности на отметку 75 % для каждой фигуры на обоих артбордах.
6. Примените ещё один триггер «Auto» для второго артборда. Создайте новый артборд и в нём уменьшьте каждую линию до её первоначальной ширины — 50 px.
7. Свяжите первую и последнюю рабочие области с помощью триггера «Auto». Нажмите кнопку «Back to Parent» (Вернуться к родительскому элементу), чтобы посмотреть конечный результат.

Подсказка: При возвращении к родительскому элементу можно повернуть основную группу на -30 градусов, чтобы увеличить сходство с анимацией Slack. Кроме того, вы можете изменить скорость анимации внутри панели «Animation» и применить эффект «Ease Both» (Смягчение), чтобы сгладить переходы.

Процесс целиком:

Загрузочная анимация Trello

1. Откройте Sketch и создайте синий квадрат со сторонами 200рх.
2. Вставьте внутрь этого квадрата прямоугольник с шириной 60рх и высотой 140рх.
3. Выровняете его сверху слева с отступом в 30рх от левой и верхней сторон квадрата.
4. Продублируйте белый прямоугольник и переместите вправо, оставив отступ в 30рх справа и сверху.
5. Уменьшьте высоту правого прямоугольника до 70рх.
6. Импортируйте артборд в Principle и примените триггер «Auto», чтобы создать новый ключевой кадр.
7. На новом артборде измените высоту белых прямоугольников, выставив для левого прямоугольника высоту в 70рх, а для правого — в 140рх.
8. Примените эффект «Ease both» (Сглаживание) на панели «Анимация», чтобы сгладить переход.

Процесс целиком:

Анимация «Вращающийся круг»

1. В Sketch создайте круг с пунктирной обводкой и сделайте дополнительные промежутки в ней (Dash и Gap), не применяйте заливку.
2. Для параметра ширины задайте 10 px. Примените к обводке угловой градиент (Angular Gradient), который подчеркнёт эффект вращения, к его созданию мы перейдём немного позже.
3. Откройте новый файл в Principle и импортируйте круг из Sketch, нажав кнопку «Import». Примените подряд два триггера «Auto».
4. Выберите круг на артборде посередине и измените его угол на 360 градусов.
5. Затем выберите третий круг, дайте ему другое имя внутри панели слева. Таким образом будет создана имитация бесконечного вращения.
6. Свяжите первый артборд с третьим с помощью триггера «Auto».
7. Примените линейный переход к временной шкале между первым и вторым артбордами.
8. Откройте окно предпросмотра, чтобы проверить, как работает анимация.

Процесс целиком:

Загрузочная анимация Flickr

1. Создайте рядом друг с другом, как на GIF-анимации, два круга — синий и розовый.
2. Импортируйте их в Principle, затем примените триггер «Auto», чтобы создать новый артборд.
3. Поменяйте круги местами, применив снова триггер «Auto», чтобы создать третий артборд. На третьем артборде измените порядок наложения кругов на панели слева.
4. Примените третий триггер «Auto», чтобы создать четвёртый артборд. На нём измените положение кругов, затем примените триггер «Auto», соединяя последний артборд с первым.

Процесс целиком:

Тип анимации «Loading…»

1. Создайте новый проект в Principle. Затем, используя инструмент «Text», напишите «LOADING». Выровняйте текст слева по горизонтали и справа по вертикали относительно артборда.
2. Примените триггер «Auto» пять раз подряд. Свяжите пятый артборд с первым при помощи того же триггера.
3. Начиная с первого артборда, измените текст на каждом. Первую надпись оставьте без точки, ко второй прибавьте одну точку, к третьей — 2 точки, к четвёртой — 3 точки, к пятой — 2 точки, к шестой — одну точку. Ваш результат должен выглядеть примерно так:
   LOADING LOADING. LOADING.. LOADING… LOADING.. LOADING.

Процесс целиком:

Анимация «Мигающие точки»

1. Создайте точку с диаметром в 60 px. Скопируйте и вставьте ещё одну точку и переместите её на 60 px вправо. Убедитесь, что оба объекта, включая промежуток, идеально отцентрированы на артборде.
2. Примените триггер «Auto» четыре раза подряд.
3. На втором артборде уменьшьте размер второй точки до 30 px.
4. На третьем артборде уменьшьте вторую точку до 0 px, а первую — до 30 px.
5. На четвёртом артборде увеличьте вторую точку до 30 px, а первую уменьшьте до 0 px.
6. На пятом артборде увеличьте первую точку до 30 px, соедините эту рабочую область с первой с помощью триггера «Auto».

Процесс целиком:

Анимация «Вращающиеся точки»

1. Расположите пять точек так же, как они выглядят на 6-сторонних игральных костях. Импортируйте рабочую область в Principle, затем отцентрируйте.
2. Примените триггер «Auto» к артборду.
3. На новом артборде поверните группу точек на 360 градусов.
4. Соедините второй артборд с первым, используя триггер «Auto».

Процесс целиком:

Анимация «Пульсирующий круг»

1. Создайте пустую окружность с диаметром 150 px, для ширины контура поставьте значение в 5 px. Затем создайте круг с диаметром 50 px и выровняйте его в центре окружности.
2. Примените триггер «Auto» три раза подряд.
3. На первом артборде уменьшьте внешний контурный круг до 50 px, а внутренний круг — до 10 px.
4. На третьем артборде увеличьте контурный круг до 200 px и поставьте 0 % для параметра непрозрачности. Затем увеличьте внутренний круг до 150 % и выставьте 50 % непрозрачности.
5. На последнем артборде увеличьте внутренний круг до 200 px с параметром непрозрачности в 0 %. Уменьшьте контурный круг до 50 px и выставьте 25 % непрозрачности.
6. Примените триггер «Auto» к последнему артборду. Уменьшьте внутренний круг до 10 px и выставьте параметр непрозрачности в 50 %
7. Соедините последний артборд с первым триггером «Auto».

Процесс целиком:

Анимация «Подпрыгивающие точки»

1. Создайте три идеально ровных круга с диаметром 50 px и выставьте их в один ряд с расстоянием между ними в 50 px.
2. Примените триггер «Auto». Затем на втором артборде переместите второй круг на 50 px вверх.
3. Примените триггер «Auto» ко второй рабочей области. На третьем артборде выберите первые два круга и поднимите их на 50 px. Все три объекта должны таким образом выстроиться в диагональную линию.
4. Примените триггер «Auto» к третьему артборду. На четвёртом — опустите первый круг на 50 px. Выделите последние два объекта, поднимите их на 50 px.
5. Примените триггер «Auto» к четвёртому артборду. На пятом — переместите первые два круга вниз на 50 px. Выделите последний круг и поднимите его на 50 px.
6. Примените триггер «Auto» к пятому артборду. На шестом — переместите последние два круга вниз на 50 px.
7. Наконец, вернитесь к первому артборду, затем поместите первую точку на 50 px выше. Соедините первый артборд с последним.

Процесс целиком:

Классическая анимация загрузки

1. Откройте Sketch, создайте круг без заполнителя. Для параметра ширины контура задайте 20 px и выберите серый цвет.
2. Скопируйте и вставьте тот же круг на том же месте (продублируйте круг) и измените его цвет, например, на голубой.
3. Создайте квадрат поверх четверти голубого круга. Переместите слой с квадратом под слой с кругом и примените «Mask» (Маска) к слою с квадратом.
4. Импортируйте файл в Principle с помощью кнопки «Import».
5. Примените триггер «Auto» к первому артборду и поверните голубой круг на 360 градусов.
6. Также примените триггер «Auto» ко второму артборду, измените название третьего слоя с кругом на «копию», соедините последнюю рабочую область с первой при помощи триггера «Auto».

Процесс целиком:

Заключение

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

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