Анимация приносит больше жизни в ваши приложения, они также могут положительно повлиять на пользовательский опыт. В этом уроке мы узнаем, как добавить анимацию Lottie в SwiftUI.
Что такое Lottie ?
Названная в честь Лотте Рейнигер и разработанная Airbnb, Lottie - это мобильная библиотека для iOS, macOS, Android и React Native, которая отображает анимацию After Effect в нативном приложении. Анимации экспортируются в формате JSON, а затем визуализируются в режиме реального времени. Он с открытым исходным кодом, и его можно найти на GitHub.
Прежде чем перейти к следующим шагам, которые включают в себя установку менеджера пакетов Lottie, а также добавление файла Lottie в наш проект SwiftUI, нам понадобится файл анимации в формате JSON. В After Effects файлы Lottie экспортируются через плагин Bodymovin. Что делать, если вы не используете After Effects? Вот где появляется Lottie Files! Это коллекция анимации, которая позволяет загружать любую анимацию прямо с веб-сайта.
Установка Lottie
Первым шагом является установка Lottie.
Клонируйте или загрузите репозиторий Lottie iOS на GitHub или скопируйте следующий URL-адрес: https://github.com/airbnb/lottie-ios
На панели инструментов нажмите File < 'Add Package...'. В поиске введите URL-адрес GitHub в поле ввода. Нажмите "Add Package" , а затем "Finish".
Теперь, когда мы установили библиотеку, давайте добавим ресурсы Lottie в наш проект.
- Убедитесь, что вы загрузили файлы анимации Lottie, которые хотите использовать. Здесь мы создали папку под названием Lottie, которая содержит оба файла анимации, которые мы будем использовать.
- Перетащите папку, содержащую файлы, в XCode
Создать файл LottieView
Пришло время создать файл LottieView прямо сейчас!
- Создайте новый файл SwiftUI View с именем LottieView
- Давайте сначала импортируем Лотти в этот файл, а затем создадим UIView, добавив следующий код
import SwiftUI
import Lottie
struct LottieView: UIViewRepresentable {
func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
let view = UIView(frame: .zero)
return view
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
}
}
AnimationView
На этом этапе мы создадим AnimationView из библиотеки.
- В функцию makeUIView добавьте следующее:
let animationView = AnimationView()
- Далее давайте установим имя файла анимации. Файл мы назвали "loading", так что мы установим это
let animation = Animation.named("loading")
animationView.animation = animation
- Чтобы убедиться, что анимация масштабируется правильно, добавьте следующее:
animationView.contentMode = .scaleAspectFit
- Наконец, чтобы убедиться, что анимация воспроизводится, добавьте следующий код
animationView.play()
Constraints
Теперь давайте добавим ограничения, чтобы они заняли всю ширину и высоту контейнера.
- Прежде чем добавлять ограничения, нам нужно будет вставить AnimationView в возвращаемый вид.
animationView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(animationView)
- Давайте добавим ограничения сейчас
NSLayoutConstraint.activate([
animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
])
LoadingView
Давайте создадим файл LoadingView сейчас, чтобы отобразить анимацию Lottie.
- Создайте новый файл SwiftUI View и назовите его LoadingView. Вы можете назвать это так, как хотите
- Замените текстовый модификатор в нем на:
LottieView()
.frame(width: 200, height: 200)
Заключение
Анимация Lottie придает вашему проекту больше индивидуальности и делает его более эстетично приятным. Хотя, пожалуйста, не используйте слишком много анимации в своем проекте, так как это может вызвать проблемы с производительностью.