Известные как тробберы, анимации загрузки используются для индикации прогресса сбора данных или рендеринга интерфейса. Прошли те времена, когда единственной опцией была стандартная, скучная полоса загрузки. Сегодня в вашем распоряжении красивые анимации с использованием CSS, jQuery или обычные GIF-ки - с их помощью вы можете оживить интерфейс и добавить индивидуальности своему продукту. Продуманные анимации помогают развлечь пользователей, пока они ждут загрузки нужного контента. Хорошая анимация загрузки помогает управлять ожиданиями и улучшает опыт пользователя, удерживая его интерес. В этом уроке мы будем использовать Sketch для создания базовых фигур и Principle для быстрой генерации кастомных анимаций загрузки. (Оба эти приложения работают на Mac.). Вы научитесь создавать яркие анимации загрузки, используемые в Trello, Flickr, Slack и др.
Приступим.
Анимация загрузки в Slack
В Sketch нарисуйте закругленные квадраты со стороной 50px или радиусом 100px каждый. Они должны выглядеть как идеальные круги, но мы используем именно квадраты с закругленными углами, чтобы создать эффект растягивания в анимации. Поместите четыре фигуры таким образом, чтобы создать воображаемый квадрат с промежутком в 150px между каждым углом. Задайте разные цвета (#35BA90 зеленый, #69CADD синий, #EBA900 желтый и #E20661 розовый). Импортируйте фигуры в Principle, сгруппируйте и кликните на опции “Create Component” (создать компонент). Войдите во вложенную группу и поверните артборд на 15 градусов. Затем выделите каждый отдельный круг и поверните его назад до первоначальной позиции (назад на 15 градусов). Это создаст эффект растягивания в линию. Примените триггер “Auto” к артборду, затем растяните каждый закругленный квадрат до противоположной стороны артборда до длины 295px. Задайте непрозрачность 75% для каждой фигуры на обоих артбордах. Примените еще один триггер “Auto” ко второму артборду. На новом артборде сократите каждую линию до начальной ширины 50px, но с обратной стороны от начальной позиции. Прилинкуйте последний артборд к первому с помощью триггера “Auto”. Нажмите кнопку “Back to Parent” для превью конечного результата. Совет: Когда вы жмете “Back to Parent”, можно повернуть главную группу на -30 градусов, чтобы было больше похоже на Slack. Также можете изменить темп анимации внутри панели “Animate” и применить эффект “Ease Both” для сглаживания переходов.
Анимация загрузки Trello
В Sketch нарисуйте синий квадрат со стороной 100px. Нарисуйте белый прямоугольник 60px в ширину и 140px в высоту. Выровняйте его по верхнему левому углу предыдущего квадрата с верхней и левой границей 30 px. Продублируйте белый прямоугольник, выровняйте его по правому краю квадрата с границей 30px и сократите его высоту до 70px. Импортируйте артборд в Principle и примените триггер “Auto” для создания нового ключевого кадра. На новом артборде поменяйте высоты белых прямоугольников (левый должен стать 70px, правый - 140 px в высоту). Примените эффект “Ease-Both” в панели “Animate” для сглаживания перехода.
Вращающийся круг
Нарисуйте круг в Sketch. Задайте контур в 10px со значениями “Dash” (штрих) и“Gap” (промежуток) и без заливки. Используйте цвет “Angular Gradient” для контура, он поможет четче выразить эффект вращения, который вы создадите позже. Откройте новый файл Principle и перенесите круг из Sketch с помощью кнопки “Import”. Примените два триггера “Auto” в ряд. Чтобы создать эффект вращения, выделите круг в среднем артборде и замените его значение “Angle” на 360 градусов. Затем выделите третий круг и задайте ему другое название (например, “copy”) внутри панели слева. Это поможет сымитировать эффект бесконечного вращения. Наконец, прилинкуйте третий артборд к первому с помощью еще одного триггера Auto. Примените переход “Linear” ко временной линии между артбордами 1 и 2. Просмотрите только что созданную анимацию в окне превью.
Анимация загрузки Flickr
Нарисуйте синий и розовый круги, чтобы они касались друг друга. Импортируйте их в Principle и примените триггер “Auto” для создания нового артборда. Поменяйте местами положения кругов и примените новый триггер “Auto” для создания третьего артборда. На третьем артборде поменяйте местами порядок слоев с кругами в панели слева. Примените третий триггер “Auto”, чтобы создать четвертый артборд. На нем еще раз поменяйте местами положение кругов, и вставьте последний триггер “Auto” c последнего артборда на первый.
Текстовый загрузчик
Создайте новый проект в Principle, и с помощью инструмента Text напечатайте “LOADING.” Выровняйте текст по левому краю и по вертикальному центру артборда. Примените триггер “Auto” пять раз в ряд. Пятый триггер протяните с последнего артборда на первый, чтобы создать петлю кадров. Начиная с первого артборда и двигаясь вправо, редактируйте каждый артборд, добавляя ноль, одну, две, три, две и одну точку к исходному тексту “LOADING”. Прогрессия артбордов должна выглядеть так: LOADING LOADING. LOADING.. LOADING… LOADING.. LOADING. Теперь проверьте результат в превью.
Пульсирующие точки
Нарисуйте точку диаметром 60px. Скопируйте и вставьте еще одну точку, поместите ее на расстоянии 60px от первой справа. Убедитесь, что обе точки и интервал в 60px отцентрированы на артборде. Вставьте триггер “Auto” четырежды в ряд. На втором артборде уменьшите вторую точку до 30px. На третьем артборде уменьшите вторую точку до 0px, а первую до 30px. На четвертом артборде увеличьте вторую точку до 30px и сократите первую до 0px. На пятом артборде увеличьте первую точку опять до 30px, и прилинкуйте артборд к первому с помощью триггера “Auto”.
Вращающиеся точки
Поместите пять точек, как на игральном кубике. Импортируйте артборд в Principle и отцентрируйте его. Примените триггер “Auto” на артборде. На новом артборде поверните группу точек на 360 градусов. Прилинкуйте второй артборд к первому с помощью триггера “Auto”.
Пульсирующий круг
Начните с круга размером 50px, выровненного по центру и круга 150px с границей 5px, но без заливки. Примените триггер “Auto” трижды в ряд. На первом артборде уменьшите второй круг (контур без заливки) до 50px, а внутренний круг до 10px. На третьем артборде увеличьте круг-контур до 200px и задайте 0% непрозрачность. Увеличьте внутренний круг до 150px и задайте непрозрачность 50%. На последнем артборде увеличьте внутренний круг до 200px и задайте 0% непрозрачность. Уменьшите круг-контур до 50px и задайте 25% непрозрачность. Примените триггер “Auto” к последнему артборду. Уменьшите внутренний круг до 10px с 50% непрозрачностью. Прилинкуйте последний артборд к первому с помощью триггера “Auto”.
Прыгающие точки
Нарисуйте в линию три круга размером 50px и интервалом 50px. Примените триггер “Auto”. На втором артборде переместите первый круг вверх на 50px. Примените триггер “Auto” на втором артборде. На третьем выделите первых два круга и передвиньте вверх на 50px. Три круга должны расположиться по диагонали. Примените триггер “Auto” к третьему артборду. На четвертом подвиньте первый круг вниз на 50px. Выделите последние два круга и подвиньте их вверх на 50px. Примените триггер “Auto” на четвертом артборде. На пятом подвиньте первые два круга вниз на 50px. Выделите последний круг и подвиньте на 50px вверх. Примените триггер Auto на пятом артборде. На шестом подвиньте последние два круга вниз на 50px. И, наконец, вернитесь на самый первый артборд, подвиньте первый круг вверх на 50px и прилинкуйте последний артборд к первому с помощью триггера “Auto”. Можете оценить результат в превью.
Классический загрузчик
Нарисуйте круг в Sketch, задайте серую границу 20px без заливки. Вставьте копию того же круга поверх первого и измените заливку на другой цвет. Я для примера использую синий. Нарисуйте квадрат поверх четверти синего круга. Передвиньте слой с квадратом под слой круга, и примените “Mask” к слою прямоугольника. Перейдите в Principle и проимпортируйте графику из Sketch с помощью кнопки “Import”. Примените триггер “Auto” к первому артборду и поверните синий круг на 360 градусов. Вставьте второй триггер “Auto” на втором артборде. Переименуйте сгенерированный третий слой с кругом на “copy” и прилинкуйте его назад к первому артборду с помощью триггера “Auto”.
Заключение
Как только вы попрактиковались с созданием нескольких этих проверенных, вы почувствуете уверенность в своих возможностях по созданию уникальной анимации для собственных приложений - нужные знания у вас есть. Немного воображения и эффективные инструменты Sketch и Principle помогут создавать уникальные анимации загрузки, полностью соответствующие дизайну ваших приложений, в считанные минуты. Пользователям понравится профессионально выглядящий, приятный глазу индикатор эффективной работы приложения.
Топ коментарі (0)