# Introducing and Getting Started with dotLottie Player for iOS *By Sam Osborne · March 7, 2024* A Swift/UIKit tutorial on how to add Lottie animations using dotLottie player. --- We are delighted to introduce our new [dotLottie player for iOS](https://github.com/LottieFiles/dotlottie-ios)! dotlottie-ios joins the expanding family of new players powered by [ThorVG rendering engine](https://www.thorvg.org/), 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](https://lottiefiles.com/blog/working-with-lottie/introducing-thorvg-powerful-graphic-library-for-lottie-animations), or visit our [GitHub](https://github.com/thorvg/thorvg/) 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: ![Using the Swift package manager](https://blog-cdn.lottiefiles.com/2024/03/1--3-.png) 2) Paste the GitHub repo URL: [https://github.com/LottieFiles/dotlottie-ios](https://github.com/LottieFiles/dotlottie-ios) ![Paste the GitHub repo URL](https://blog-cdn.lottiefiles.com/2024/03/2--3-.png) 3) Use our code wherever we want to add an animation: ```swift 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](https://lottiefiles.com/popular) or explore our collection of [Premium Lottie animations](https://lottiefiles.com/features/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: ```swift struct YourView: View { var animation = DotLottieAnimation(webURL: "", config: AnimationConfig(autoplay: true, loop: true) var body: some View { animation.view() } } ``` UIKit: ```swift class AnimationViewController: UIViewController { var simpleVM = DotLottieAnimation(webURL: "", 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: ```swift 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`. ![](https://blog-cdn.lottiefiles.com/2024/03/3--2-.gif) **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. 1. Create a reference to your `DotLottieAnimation` as well as a `DotLottieView` ```swift struct YourView: View { var animation = DotLottieAnimation(webURL: "", config: AnimationConfig(autoplay: true, loop: true) var animationView: DotLottieView? init() { animationView = DotLottieView(dotLottie: animation) } var body: some View { animationView } } ``` 1. Use the `DotLottieAnimation` to change playback settings on the fly ```swift 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) } } } ``` ![](https://blog-cdn.lottiefiles.com/2024/03/4--1-.gif) **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: ```swift struct YourView: View { var animation = DotLottieAnimation(webURL: "", 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` : ```swift 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`: ```swift class DotLottieObserver: Observer { ... } struct YourView: View { var animation = DotLottieAnimation(webURL: "", 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](https://github.com/LottieFiles/dotlottie-ios) to stay on top of the latest developments. Happy coding! --- ## Related Articles - [Lottie/dotLottie vs. GIF: Choosing the Right Animation for You](/blog/working-with-lottie-animations/lottie-vs-gif) - [Introducing Motion Copilot 2.0 in Lottie Creator](/blog/working-with-lottie-animations/introducing-motion-copilot-on-lottie-creator) - [Lottie Creator 2.0: A Powerful Web-Based Lottie Animation Tool](/blog/working-with-lottie-animations/lottie-creator-a-powerful-web-based-lottie-animation-tool) - [Introducing Motion System: One Workflow for Animation That Actually Ships](/blog/working-with-lottie-animations/introducing-motion-system-one-workflow-for-animation-that-actually-ships)