We are delighted to introduce our new dotLottie player for iOS! dotlottie-ios joins the expanding family of new players powered by ThorVG rendering engine, enabling feature parity across the board.
In this blog post, we’ll explore the benefits of using this new rendering engine and then see how you can get started using the dotLottie player.
A New Renderer - ThorVG
ThorVG will serve as the new powerful rendering engine for your dotLottie (.lottie) animations. ThorVG is a cross-platform high-performance vector graphics library that now supports Lottie animations.
ThorVG's cross-platform capability ensures consistent animation quality across all devices, guaranteeing that animations look the same no matter where they are viewed. Whether you view them on mobile or within your favorite frameworks, the animations will maintain consistency in appearance. With the release of new players across different platforms, your animations will perform across the board, maintaining quality and visual consistency without any compromise.
Learn more about ThorVG in our detailed blog post, or visit our GitHub page for an in-depth exploration.
Getting started with dotLottie-ios
dotlottie-ios currently supports SwiftUI and UIKit pragmatically. Here is a quick guide to get you started:
Installation
1) Using the Swift package manager, we can quickly get up and running:
2) Paste the GitHub repo URL: https://github.com/LottieFiles/dotlottie-ios
3) Use our code wherever we want to add an animation:
import DotLottie
With this, you can start with the fun part, adding animation to your project! You can choose from thousands of free animations on LottieFiles or explore our collection of Premium Lottie animations to enhance your designs.
Basic Usage
The main class is DotLottieAnimation.By keeping a reference to our DotLottieAnimation we can later on control things like its playback and events.
SwiftUI:
struct YourView: View {
var animation = DotLottieAnimation(webURL: "<https://lottie.host/b2d44b82-fd7e-401f-a4fa-77999147c0be/vqNwJryGBp.lottie>",
config: AnimationConfig(autoplay: true, loop: true)
var body: some View {
animation.view()
}
}
UIKit:
class AnimationViewController: UIViewController {
var simpleVM = DotLottieAnimation(webURL: "<https://lottie.host/link.lottie>", config: AnimationConfig(autoplay: true, loop: false))
override func viewWillAppear(_ animated: Bool) {
let dotLottieView = simpleVM.createDotLottieView()
view.addSubview(dotLottieView)
}
}
Usage Scenarios
Let’s take a more in-depth look at the different playback settings, interacting with our animation and listening for events.
Playback settings
When initializing our animation, we can pass an AnimationConfig that can change the way our animation behaves:
public var autoplay: Bool? = false
public var loop: Bool? = false
public var mode: Mode? = .forward
public var speed: Float? = 1
public var useFrameInterpolation: Bool? = false
public var segments: (Float, Float)? = nil
public var backgroundColor: CIImage? = .clear
public var width: Int?
public var height: Int?
The most notable ones we’ll cover are mode, segments and useFrameInterpolation.
Mode
Mode can either be .forward, .reverse, .bounce and .reverseBounce.
.forward:
- Plays the animation from the start frame to the end frame
.reverse:
- Plays the animation from the end frame to the start frame
.bounce:
- Plays the animation from the start to end frame, then in reverse.
.reverseBounce:
- Plays from the end frame to the start frame and then from start to end.
Segments
Play part of an animation.
AnimationConfig(segments: (startFrame, endFrame)
useFrameInterpolation
Determines if the player should interpolate values in between frames. This will make your animation look silky smooth even at a low playback speed. By default, this is set to true.
Controlling Animation Playback
Your animation is controllable outside of the AnimationConfig object too. Let’s see how we can call methods on the animation to change its playback state.
- Create a reference to your
DotLottieAnimationas well as aDotLottieView
struct YourView: View {
var animation = DotLottieAnimation(webURL: "<https://lottie.host/b2d44b82-fd7e-401f-a4fa-77999147c0be/vqNwJryGBp.lottie>",
config: AnimationConfig(autoplay: true, loop: true)
var animationView: DotLottieView?
init() {
animationView = DotLottieView(dotLottie: animation)
}
var body: some View {
animationView
}
}
- Use the
DotLottieAnimationto change playback settings on the fly
struct YourView: View {
...
var body: some View {
animationView
Button("Toggle speed") {
animation.setSpeed(speed: 3)
}
Button("Play") {
animation.play()
}
Button("Pause") {
animation.pause()
}
Button("Set background color") {
animation.setBackgroundColor(bgColor: .cyan)
}
Button("Stop") {
animation.stop()
}
Button("Set segments") {
animation.setSegments(0, 20)
}
Button("Play in reverse") {
animation.setMode(mode: .reverse)
}
}
}
Listening for events
Events are emitted from your animation, which you can listen to. First of all, set up your animation as we did in the previous example:
struct YourView: View {
var animation = DotLottieAnimation(webURL: "<https://lottie.host/b2d44b82-fd7e-401f-a4fa-77999147c0be/vqNwJryGBp.lottie>",
config: AnimationConfig(autoplay: true, loop: true)
var animationView: DotLottieView?
init() {
animationView = DotLottieView(dotLottie: animation)
}
var body: some View {
animationView
}
}
We now need to create a class that implements Observer :
class DotLottieObserver: Observer {
func onLoadError() {
print("On load error!")
}
func onComplete() {
print("on complete")
}
func onFrame(frameNo: Float) {
print("on frame \\(frameNo)")
}
func onLoad() {
print("on load")
}
func onLoop(loopCount: UInt32) {
print("on loop \\(loopCount)")
}
func onPause() {
print("on pause")
}
func onPlay() {
print("on play")
}
func onRender(frameNo: Float) {
print("on render \\(frameNo)")
}
func onStop() {
print("on stop")
}
}
struct YourView: View {
...
}
And finally, we attach it to our animation View:
class DotLottieObserver: Observer {
...
}
struct YourView: View {
var animation = DotLottieAnimation(webURL: "<https://lottie.host/b2d44b82-fd7e-401f-a4fa-77999147c0be/vqNwJryGBp.lottie>",
config: AnimationConfig(autoplay: true, loop: true)
var animationView: DotLottieView?
var dlo = DotLottieObserver()
init() {
animationView = DotLottieView(dotLottie: animation)
animationView.subscribe(observer: dlo)
}
var body: some View {
animationView
}
}
Future Plans
We are committed to continuously refining and enhancing the dotLottie players and aim to introduce more advanced features such as theming and state machines in future updates.
Follow our GitHub repository to stay on top of the latest developments.
Happy coding!
