Когда-то давно мы разрабатывали еще одно мобильное приложение на Xamarin.Forms. Как обычно, мы собрали требования и наш дизайнер приступил к работе над UI / UX. В тот момент у меня было огромное впечатление, что Лотти может делать, поэтому я спросил его, что он думает об этом. Мы оба согласились, что это здорово, и мы должны его использовать. К сожалению, мы делали MVP, поэтому денег на это не было. Что касается Lottie, то очень легко реализовать это в Xamarin. Проблемы возникают на стороне дизайна - вам нужно создать анимацию, например. Adobe After Effects. Это требует времени, и иногда дизайнеры не знакомы с AE.
Я начал думать, какой загрузчик выбрать. Я подумал: «Я не буду использовать индикатор активности».

Ни хрена ... Меня тошнит от этого круга. Мля.

Я начал думать о том, чего можно легко достичь. Я пришел к следующему решению.

Давайте использовать значок приложения и повернуть его.

Значок приложения имел однотонный фон с небольшим кружком на нем. Я попросил нашего дизайнера прислать мне логотип с альфа-фоном. Он сделал это, и я начал работать.

Я создал CustomLoader, унаследованный от Image. Я знал, что у меня должно быть свойство IsRunning, поэтому добавил его. Логика этого была очень простой:

if(IsRunning)
{
   RotateImage();
}
else
{
   StopRotating();
}

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

Давайте обсудим это на секунду.

Как было сказано ранее, у нас есть 3 привязки. Что наиболее интересно, так это IsRunning, который отвечает за поворот нашего изображения. Затем у нас есть RotationLenght и Easing - эти два параметра позволяют нам настраивать анимацию.

Затем есть метод OnPropertyChanged. Если IsRunning изменяется, мы либо запускаем, либо останавливаем анимацию. Отмена производится с помощью cancellationToken.Token. Кроме того, я добавил методы FadeIn / FadeOut, чтобы изображение (дис) выглядело более плавным.

В конце у нас есть метод RotateElement, который просто вращает элемент. Вуаля! Если вы хотите проверить код, в конце этого поста есть ссылка на репозиторий Github. В репо есть образец использования.

Посмотрим на результаты.

Я не знаю, сколько времени мне потребовалось, чтобы это реализовать. Конечно, меньше, чем создание анимации Lottie в AE. Честно говоря, результатом я доволен. Что важнее: клиент тоже остался доволен. Это то что мне нравится!

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

Код

Код находится в моем репозитории Github здесь. Не стесняйтесь использовать это.

Как всегда, если у вас есть какие-либо вопросы или советы, не стесняйтесь писать комментарий, напишите мне электронное письмо, напишите что угодно. Я буду более чем счастлив поговорить с вами.

Если вам понравилась эта статья, покажите мне немного любви и 👏! Это действительно мотивирует меня писать больше. Спасибо!

Изначально размещен в моем блоге.