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 second.

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.

Lottie animation progress, frame and time

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 realtime 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 realtime 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 realtime progress & frame using realtimeAnimationProgress and realtimeAnimationFrame .

Unfortunately, Lottie library does not provide a way to retrieve the animation’s realtime 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 realtime 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 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 realtime 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)

The jumping watermelon animation

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)

The winking watermelon animation

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. 🧑🏻‍💻