Lottie Advance Animation Playback

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.

:link: 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

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(fromProgress:toProgress:loopMode:completion:) method.

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

The jumping watermelon animation

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

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

The winking watermelon animation

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.

For more detailed information about the library’s APIs, feel free to check out the official documentation .

Last but not least, you can get the sample project of this article on Github .

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. ‍:computer: