Пошаговое руководство по добавлению анимации в ваше приложение Swift

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

Импорт Лотти

Перво-наперво нам нужно импортировать Lottie. Мы можем сделать это через терминал; Если вы еще не настроили Pods, сделайте это, набрав следующую команду:

pod init

После завершения этой команды вы можете открыть Podfile с помощью Vim или TextEdit. Как только он откроется, скопируйте следующий код в свой подфайл:

После того, как вы закончите сохранение Podfile, установите платформу Lottie с помощью следующей команды:

pod install

Теперь мы готовы использовать Lottie в нашем приложении. С этого момента, когда вы откроете свое приложение, вам нужно будет открыть файл xcworkspace.

Добавление анимации

Приступим к настройке раскадровки в Xcode.

  1. Перетащите вид на холст.
  2. Введите AnimationView для настраиваемого класса представления.
  3. Удерживая нажатой клавишу Control, перетащите представление в ViewController файл, установите соединение IBOutlet и назовите его AVView.

Теперь вы можете использовать существующую анимацию с https://lottiefiles.com (которую я буду использовать для этого фрагмента) или создать свою собственную с помощью After Effects. Найдя желаемую анимацию, загрузите ее и перетащите файл JSON в свой проект из средства поиска. Теперь нам нужно перейти к нашему ViewController файлу и импортировать Lottie в верхней части файла. В ViewDidLoad() вам нужно будет ввести следующий код:

В приведенном выше коде мы, по сути, делаем ссылку на наш файл Lottie JSON и устанавливаем для него режим содержимого, какой захотим. Оттуда он добавляет анимацию в качестве подпредставления к нашему представлению, которое мы создали в раскадровке, затем мы устанавливаем его режим цикла, чтобы либо непрерывно зацикливать анимацию, либо воспроизводить ее только один раз. Теперь вы можете запустить приложение и увидеть, как оживает ваша анимация Lottie!