Почти в каждом приложении есть индикатор загрузки, но никто не хотел бы их видеть слишком часто. Несмотря на это, индикатор прогресса – один из фундаментальных элементов дизайна продукта, в котором имеет место загрузка контента. Эти небольшие анимации во время загрузки контента служат для убеждения пользователя, что процесс идет, приложение работает, как положено, и то, что нам нужно, скоро появится на экране. Почти все свои задачи по прототипированию я делаю в Principle. Он работает очень хорошо в паре со Sketch, быстро выполняя, что мне нужно. Можно тестировать свои идеи, итерировать версии или быстро реализовывать новые задумки. Это неоценимый инструмент для тестирования динамических элементов в современном дизайне приложений. Для моего нынешнего проекта понадобился круговой индикатор прогресса, который будет заливаться от 0 до 100% своей площади по мере получения данных. Principle - отличный инструмент для линкования экранов и анимирования разницы между ними, но вот для такого типа элементов возможности могут показаться ограниченными.Я покажу, как с помощью несложных трюков создать эффект кругового индикатора прогресса, который будет выглядеть примерно как на картинке выше.
Рисуем фигуру
Создадим нужные фигуры. В Principle есть неплохие инструменты для рисования, чтобы реализовать все необходимые эффекты для результата, показанного выше. Так что на этот раз мы обойдемся без Sketch или Photoshop. Сначала мы нарисуем прямоугольник, настроим радиус закругления углов так, чтобы он выглядел кругом. Для этого демо я настрою коэффициент масштаба 2, чтобы были видны детали, но обычно я делаю дизайн в Principle и Sketch в 1х для iOS-приложений. Прямоугольник должен иметь размер 24pt x 24 pt, с прозрачной заливкой и 10% черным контуром 2pt.
Заливка и настройка первой маски
Затем мы скопируем эту фигуру и заменим цвет на заливку будущего индикатора прогресса. Также поместим фигуру в прямоугольник, который будет выступать маской. Убедитесь, что на прямоугольной маске выбрана опция ‘Clip Sublayers’, задайте 24 pt в высоту и 24 pt в ширину в масштабе 2х. Как только маска готова, продублируйте ее и переверните (flip) на 180°.
Анимация масок
Перед созданием кучи артбордов в Principle для анимирования этого эффекта надо изменить ширину и высоту каждой маски на 0. Так как левая маска - это 180° дубликат правой, наши начальные точки для роста ширины и высоты маски выбраны идеально. Далее создадим дополнительный артборд для анимации индикатора до конечного состояния. Ниже показаны настройки. Сначала круг, заливка и маски помещаются в группу контейнера под названием Spinner - позже вы поймете удобство этого решения. Я настроил время переходов, чтобы левая сторона маски анимировалась после завершения анимации правой. Помните, что переходы X и Y должны совпадать с соответствующими переходами по ширине и высоте. Я настроил их линейно для более плавного перехода. 
Финальные штрихи
Давайте поиграемся с вращением, масштабом и непрозрачностью, чтобы добавить динамики. Так как это масштаб 2х, на первом артборде мы заменим настройки группы spinner на 1x и непрозрачность 0%. Угол для группы зададим -45°. Второй артборд оставим как есть, только зададим угол группы spinner 135°. Наконец, продублируйте второй артборд, чтобы создать третий. Он будет использоваться для анимации выхода. На последнем артборде настроим угол группы spinner на 45° и сделаем масштаб и непрозрачность, как на первом - 1х и 0%. Помните, если вы создавали все в 1х, то просто разделите на 2 или используйте .5 множитель масштаба. Получится интересный эффект, как будто колесо загрузки просто покидает сцену. Мы почти у финиша. Я предпочитаю использовать пружинную анимацию (spring) для большей части эффектов масштабирования, так что и в этот раз поступим также. Давайте сделаем автопереход из арборда 3 назад в артборд 1, чтобы был эффект бесконечного вращения.
Конечный результат
Вы можете легко скопировать его в более сложные прототипы, и Principle сохранит переходы и тайминг. Есть множество вариаций, как можно реализовать этот прием, манипулиря элементами разными способами. Мне кажется, для более мелких элементов интерфейса будет удобно проработать их отдельно и затем добавить их в прототип приложения, после всех необходимых настроек. Скачайте исходник с конечным результатом: https://www.dropbox.com/s/dj5gf0i2k48bvbb/circular_loading_tutorial.prd?dl=0
Топ коментарі (0)