Lottie Advance Animation Playback

✅ Updated for Lottie 4.2.0

In this article, I would like to talk about how you can utilize some of the more advanced Lottie library’s playback APIs to manipulate an animation based on your needs.

If you are not familiar with Lottie in iOS, make sure to check out my previous article where I cover some fundamental knowledge about Lottie.

🔗 Getting Started with Lottie Animations in iOS

With all that said, let’s begin!

---

Understanding Animation Playback Time

Lottie describes playback time in three ways:

• Frame time — This represents the frame of the animation playback. If an animation has 50 frames, it will have a frame time range from 0 to 50.
• Progress time — This describes the progress of the animation playback. 0 represents the beginning of an animation, likewise, 1 represents the end of an animation.
• Time — The actual animation playback timestamp in seconds.

This might sound a bit confusing at first, thus I have created an example to help you understand the concept of time in Lottie.

The following example is showing an animation (Watermelon.json) which contains a total of 563 frames that runs in 60 frames per second.

Pro tip:

You can obtain the animation’s total number of frames using animation.endFrame and the animation’s frame rate using animation.framerate.

---

Getting Realtime Playback Information

In this section, let’s look into how you can retrieve the animation’s real-time playback information like what was shown in the previous example.

First, let’s create an CADisplayLink instance and set animationCallback as a selector to be called when the screen is updated. Make sure to add the CADisplayLink instance to the current run loop.

var displayLink: CADisplayLink?

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Create CADisplayLink to display frame, progress and time
    displayLink = CADisplayLink(target: self, selector: #selector(animationCallback))
    displayLink?.add(to: .current, forMode: RunLoop.Mode.default)
    
    // ...
    // ...
}

Next, implement the animationCallback selector to display the real-time playback information (frame, progress, and timestamp) on screen.

@objc func animationCallback() {
    if animationView.isAnimationPlaying {
        // Display animation frame, time and progress in realtime
        progressLabel.text = "\(animationView.realtimeAnimationProgress)"
        frameLabel.text = "\(animationView.realtimeAnimationFrame)"
        timeLabel.text = "\(animationView.realtimeAnimationFrame / CGFloat(animation.framerate) / animationView.animationSpeed)"
    }
}

Note that from the above code snippet, you can obtain the animation’s real-time progress & frame using realtimeAnimationProgress and realtimeAnimationFrame.

Unfortunately, the Lottie iOS library does not provide a way to retrieve the animation’s real-time timestamp. However, you can easily calculate it by using the following formula:

time = (frame / framerate) / animation_speed

With that, you have successfully displayed the animation’s real-time playback information on screen.

In the following section, I will show you how you can leverage the playback information to create multiple interesting variants of an animation.

---

Utilizing the Advance Playback Methods

As you may know by now, you can start an animation by calling the play() method. However, Lottie iOS library does provide some other play() methods that allow developers to have more control over the animation’s playback behavior.

For example, the following 2 methods allow developers to play a certain portion of the animation with a specific loop mode.

// Play from progress point A to progress point B
play(fromProgress:toProgress:loopMode:completion:)

// Play from frame A to frame B
play(fromFrame:toFrame:loopMode:completion:)

By using the real-time playback information that we obtained from the previous section, and combining it with a specific loop mode, we can create some interesting variants of the Watermelon animation.

Let’s try to create a jumping watermelon animation using the play(fromFrame:toFrame:loopMode:completion:) method.

animationView.play(fromFrame: 190,
                   toFrame: 240,
                   loopMode: .loop)

Hence, by using the same concept, we can create a winking watermelon animation using the play(fromProgress:toProgress:loopMode:completion:) method.

animationView.play(fromProgress: 0.5,
                   toProgress: 0.75,
                   loopMode: .loop)

Pro tip:

If you find it hard to pinpoint the exact frame or progress of the animation. You can slow down the animation by changing its speed. animationView.animationSpeed = 0.5

---

Wrapping Up

As you can see from the above example, the Lottie library is extremely flexible and powerful, therefore the animation variants that you can generate using it are endless.

Feel free to get the sample project of this article on GitHub.

If you are interested in knowing how to create a beautifully animated custom button using markers in Lottie, check out the following article.

🔗 Controlling Lottie Animation with Markers

I will be covering some other topics related to Lottie animation in my future articles. If you would like to get notified when a new article comes out, you can follow me on Twitter and subscribe to my monthly newsletter.

Thanks for reading. 🧑🏻‍💻

---

👋🏻 Hey!

While you’re still here, why not check out some of my favorite Mac tools on Setapp? They will definitely help improve your day-to-day productivity. Additionally, doing so will also help support my work.

• ✨ Bartender: Superpower your menu bar and take full control over your menu bar items.
• ✨ CleanShot X: The best screen capture app I’ve ever used.
• ✨ PixelSnap: Measure on-screen elements with ease and precision.
• ✨ iStat Menus: Track CPU, GPU, sensors, and more, all in one convenient tool.

---