Создавайте простые и многоразовые пользовательские представления загрузки

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

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

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

Вот о чем эта статья. Я хочу показать вам, как вы можете создать свою собственную кнопку загрузки с помощью нескольких строк кода, используя некоторые основы Core Animation.

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

Мы можем создать точки, создав три пользовательских UIViews и установив их угловой радиус на половину их ширины:

Следующее, что нужно сделать, - это настроить анимацию для точек, и тогда вступает в действие Core Animation. Подумайте, что на самом деле делает анимация: она масштабируется, а затем возвращается к исходному размеру. И это повторяется во время анимации.

Мы можем добиться этого, рекурсивно анимируя представления с помощью UIview.animate… API, но я всегда стараюсь избегать рекурсивных функций, если они действительно не нужны. С помощью Core Animation мы можем довольно легко настроить эту анимацию.

Сначала давайте определим три разных CABasicAnimation свойства (по одному для каждой точки), а затем выполним начальную настройку:

Наиболее важные свойства установки, на которые следует обратить внимание:

  • autoreverses: если для этого параметра установлено значение true, мы сообщаем, что анимация вернется к исходному размеру после ее завершения.
  • toValue: Это коэффициент масштабирования, которого мы хотим достичь с помощью анимации.
  • repeatCount: Поскольку мы хотим повторять анимацию до ее остановки, мы должны установить счетчик повторов на бесконечность.

Теперь, чтобы начать анимацию, нам нужно добавить наш CABasicAnimations к слою с точками. Чтобы все было по отдельности, давайте создадим две функции: startAnimation() и stopAnimation().

У нас есть все необходимое, чтобы добавить наш DotsAnimationView в представление ViewController и вызвать startAnimation(), чтобы посмотреть, что произойдет.

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

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

Нам нужно только создать настраиваемую кнопку и добавить только что созданный DotsAnimationView:

Вот и все! Нам просто нужно вызвать функции startAnimation() и stopAnimation() нашей кнопки.

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

Заключение

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

Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии. Буду рад помочь. Вы можете проверить полный код на GitHub.