A number of years in the past, I wrote a tutorial concerning the Lottie library. A reader requested if he might use the library in SwiftUI tasks. So, on this tutorial, let’s revisit this wonderful library and see how we are able to use it in SwiftUI tasks.
Lottie is a cellular library for Android and iOS that natively renders vector primarily based animations and artwork in realtime with minimal code.
If that is the very first time you heard of Lottie, Lottie is an iOS, macOS, Android, and React Native library, developed by Airbnb, that renders After Results animations in any native apps. Animations are exported as JSON recordsdata via an open-source After Results extension known as Bodymovin. Lottie masses the animation knowledge in JSON format, and renders the animation in actual time.
The cool factor about this library is you can import the Lottie animation straight into your Xcode venture. With just a few traces of code, you can also make the animation work in your apps. You’ll perceive what I imply shortly.
The place can you discover Lottie Animations?
You may create your individual animation utilizing After Results and export it as a JSON file. Nevertheless, if you’re like me and don’t have any concepts about After Results, you may try the next web sites to obtain some free / paid animations.
LottieFiles
Web site: https://lottiefiles.com
Drawer
Web site: https://drawer.design
Including the Lottie Library with Swift Package deal Supervisor
Lottie is an open-sourced venture obtainable on GitHub. You may obtain the library at https://github.com/airbnb/lottie-ios and add it to your Xcode venture manually. Having that mentioned, the best manner so as to add the library is through the use of Swift Package deal Supervisor.
Assuming you’ve already created a SwiftUI venture in Xcode, go as much as the Xcode menu and select File > Add Packages…. Then paste the repository URL (i.e. https://github.com/airbnb/lottie-ios) within the URL subject:
Click on the Add Package deal button. Xcode will then routinely obtain the Lottie library and add it to the venture.
Importing Lottie Information to the Xcode Mission
I’ve downloaded the following free animation on LottieFiles.com. The Lottie animation is offered in a number of file codecs. Please select the Lottie JSON choice.
As soon as downloaded, return to the Xcode venture. Drag the JSON file (i.e. contact-us.json) to the venture navigator.
Utilizing the Lottie File in SwiftUI
It now involves the coding half. In case you’ve learn my earlier Lottie tutorial, it is best to know that it takes lower than 10 traces of code to load the animation. Right here is the pattern code snippet for loading the Lottie animation:
|
let animationView = AnimationView() animationView.animation = Animation.named(lottieFile) animationView.play() |
Easy, proper? Nevertheless, because the Lottie library doesn’t assist SwiftUI natively, we have to wrap its UIKit view with the UIViewRepresentable protocol to make it work in SwiftUI tasks.
Now head again to your Xcode venture and create a brand new file utilizing the Swift file template. Title the file LottieView.swift and replace its content material like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import SwiftUI import Lottie
struct LottieView: UIViewRepresentable { let lottieFile: String
let animationView = AnimationView()
func makeUIView(context: Context) –> some UIView { let view = UIView(body: .zero)
animationView.animation = Animation.named(lottieFile) animationView.contentMode = .scaleAspectFit animationView.play()
view.addSubview(animationView)
animationView.translatesAutoresizingMaskIntoConstraints = false animationView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true animationView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
return view }
func updateUIView(_ uiView: UIViewType, context: Context) {
} } |
The LottieView struct has a property for holding the title of the lottie file. Within the makeUIView perform, it masses the JSON file and units the animation to the animation property of the animationView. Optionally, we set the content material mode to .scaleAspectFit.
To play the animation, we name the play methodology of the animation view. The remainder of the code is for configuring the format constraints of the view.
Now let’s head again to ContentView.swift to make use of the LottieView. Within the physique half, insert the next traces of code:
|
LottieView(lottieFile: “contact-us”) .body(width: 300, top: 300) |
You simply must move LottieView the title of the Lottie file with out the file extension. Right here, it’s contact-us. And, we set the body dimension to 300×300 factors.
That’s it! Within the preview pane, it is best to see a picture. In case you click on the Play button, it renders the animation.
Customizing the Animation
Did you discover that the animation solely performed as soon as? The AnimationView object supplies a few properties for builders to customise the playback of the animation. To maintain enjoying the animation, you may set the loopMode property to .loop like beneath:
|
animationView.loopMode = .loop |
If you wish to auto reverse the animation, you may set the worth to .autoReverse.
You may as well management the pace of the animation by altering the worth of the animationSpeed property:
|
animationView.animationSpeed = 3.0 |
This can triple the pace of the animation.
Loading the Animation Remotely
It’s not necessary to retailer the Lottie file domestically. The Animation object helps you to load a Lottie animation from a distant server. Right here is an instance:
|
Animation.loadedFrom(url: URL(string: “https://assets1.lottiefiles.com/packages/lf20_kd5rzej5.json”)!, closure: { animation in
animationView.animation = animation animationView.contentMode = .scaleAspectFit animationView.loopMode = .loop animationView.animationSpeed = 5.0 animationView.play()
}, animationCache: nil) |
As an alternative of utilizing the named methodology, you should use the loadedFrom methodology of Animation to load a distant URL. The Animation object will deal with the file obtain and allow you to know when the animation is prepared to be used within the closure.
Abstract
The SwiftUI framework already makes it simple to create wonderful view animations. With the Lottie library, it’s even simpler to include lovely animations in your apps. I hope you discover this tutorial useful. In case you’re concerned with studying extra about SwiftUI animations, you may try our Mastering SwiftUI ebook.
