Пошаговое руководство по добавлению анимации в ваше приложение Swift
Выпустив Lottie, Airbnb упростил внедрение анимации в ваши проекты на Swift. В этой статье я покажу вам шаг за шагом, как вы можете добавить красивую анимацию в свое следующее приложение.
Импорт Лотти
Перво-наперво нам нужно импортировать Lottie. Мы можем сделать это через терминал; Если вы еще не настроили Pods, сделайте это, набрав следующую команду:
pod init
После завершения этой команды вы можете открыть Podfile с помощью Vim или TextEdit. Как только он откроется, скопируйте следующий код в свой подфайл:
После того, как вы закончите сохранение Podfile, установите платформу Lottie с помощью следующей команды:
pod install
Теперь мы готовы использовать Lottie в нашем приложении. С этого момента, когда вы откроете свое приложение, вам нужно будет открыть файл xcworkspace
.
Добавление анимации
Приступим к настройке раскадровки в Xcode.
- Перетащите вид на холст.
- Введите
AnimationView
для настраиваемого класса представления. - Удерживая нажатой клавишу Control, перетащите представление в
ViewController
файл, установите соединение IBOutlet и назовите егоAVView
.
Теперь вы можете использовать существующую анимацию с https://lottiefiles.com (которую я буду использовать для этого фрагмента) или создать свою собственную с помощью After Effects. Найдя желаемую анимацию, загрузите ее и перетащите файл JSON в свой проект из средства поиска. Теперь нам нужно перейти к нашему ViewController
файлу и импортировать Lottie
в верхней части файла. В ViewDidLoad()
вам нужно будет ввести следующий код:
В приведенном выше коде мы, по сути, делаем ссылку на наш файл Lottie JSON и устанавливаем для него режим содержимого, какой захотим. Оттуда он добавляет анимацию в качестве подпредставления к нашему представлению, которое мы создали в раскадровке, затем мы устанавливаем его режим цикла, чтобы либо непрерывно зацикливать анимацию, либо воспроизводить ее только один раз. Теперь вы можете запустить приложение и увидеть, как оживает ваша анимация Lottie!