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

Вы когда-нибудь задумывались, почему некоторые приложения, такие как Airbnb, имеют потрясающую анимацию на экране загрузки. Использовать анимацию Lottie в приложении SwiftUI проще, чем кажется.

«SwiftUI — это инновационный и чрезвычайно простой способ создания пользовательских интерфейсов на всех платформах Apple с помощью Swift. Создавайте пользовательские интерфейсы для любого устройства Apple, используя только один набор инструментов и API. — Википедия. Самое приятное то, что вы можете интегрировать свои представления с компонентами из фреймворка UIKit, AppKit и WatchKit. SwiftUI упростил создание пользовательского интерфейса». — Apple Developer Xcode SwiftUI

Lottie – это формат файла анимации с открытым исходным кодом, миниатюрный, высококачественный, интерактивный, которым можно манипулировать во время выполнения. 500 лучших приложений в App Store теперь используют Lottie для привлечения пользователей и повышения конверсии. — lottiefiles.com

Впервые дизайнеры могут создавать и выпускать красивые анимации без необходимости кропотливого воссоздания их вручную инженером. Говорят, картинка стоит 1000 слов, поэтому вот 13000 — https://airbnb.io/lottie/ и https://airbnb.design/introduction-lottie/

Давайте рассмотрим, как мы можем использовать эти красивые анимации в нашем приложении SwiftUI. В Xcode встроен SPM (Swift Package Manager). SPM позволяет вам использовать сторонние библиотеки в вашем быстром коде. SPM интегрирован с системой сборки Swift для автоматизации загрузки, компиляции и связывания зависимостей. Все, что вам нужно сделать, это дать ему ссылку на git, и он получит все необходимые версии, зависимости и т. д. У Airbnb есть Lottie с открытым исходным кодом, который вы можете найти здесь. Чтобы добавить эту библиотеку в свой проект Xcode, вы можете выполнить следующие шаги.

  1. В вашем Xcode Файл › Пакеты Swift › Добавить зависимость пакета
  2. Вставьте Lottie Github URL
  3. Следуйте следующим кнопкам и завершите процесс. Вы можете оставить основную версию выбранной по умолчанию. Обычно это последняя доступная версия.
  4. Чтобы убедиться, что Lottie добавлена ​​в ваш проект, откройте файл .xcodeproj и убедитесь, что Lottie добавлена ​​как пакет.

В нашем проекте Xcode установлена ​​Lottie. Теперь войдите на сайт lottiefiles.com и загрузите любую анимацию по вашему выбору. Есть более 13000 потрясающих анимаций на выбор. Для этого урока я скачал анимацию езды на скутере Lottie JSON. Библиотека Lottie, которую мы только что добавили в наш проект Xcode, может легко декодировать загруженный JSON. Перетащите загруженный JSON, чтобы мы могли ссылаться на него позже в нашем коде.

Далее нам нужно написать представление для нашей анимации. Это представление представляет собой представление Lottie, в котором вы можете настроить свою анимацию, настроить loopMode анимации, contentMode, задержки и т. д. Вы можете сослаться на приведенный ниже код, чтобы увидеть, как будет выглядеть ваше представление Lottie. Я рекомендую поиграть со свойствами AnimationView и изучить новые.

Давайте посмотрим, что происходит в Lottie.swift:

  1. Добавленный нами пакет Lottie (Lottie) предоставляет Xcode доступ к AnimationView(). Поэтому вначале мы импортируем Лотти.
  2. Я добавил «lottieFile» в качестве параметра, чтобы использовать Lottie.swift в качестве компонента и передать имя файла из родительского представления.
  3. Далее мы вызываем Lottie в строке 10 и загружаем анимацию.
  4. Как только мы загрузили анимацию, я установил для contentMode значение .scaleAspectFit, чтобы управлять размером анимации из родительского представления.
  5. NSLayoutConstraint добавляется, чтобы гарантировать, что анимация занимает всю высоту и ширину контейнера.

Сделанный!! Наш компонент Lottie View готов к работе. Все, что нам нужно сделать, это отправить файл Lottie в это представление, и анимация будет отображаться в вашем приложении. В моем случае код для вызова LottieView.swift выглядит так:

LottieView(lottieFile: "52580-scooter-riding")
//You can also resize it from here. Our contentMode property set to "scaleAspectFit" will ensure that the animation always fits in the frame.
LottieView(lottieFile: "52580-scooter-riding").frame(width: 300, height: 300)

Вот и все! Конечный результат выглядит потрясающе, и забавный факт: Lottie работает на любом устройстве, и они создают фантастические загрузочные экраны.

Удачного взлома!! Не забывайте лайкать, подписываться и делиться. Пожалуйста, не стесняйтесь обращаться ко мне в Twitter, если у вас есть какие-либо вопросы.