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:

Using the Swift package manager

2) Paste the GitHub repo URL: https://github.com/LottieFiles/dotlottie-ios

Paste the GitHub repo URL

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.

  1. Create a reference to your DotLottieAnimation as well as a DotLottieView
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
    }
}
  1. Use the DotLottieAnimation to 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!