Add a subview to your animation layer using lottie-ios

What is Lottie

Lottie is a well-known animation library that allows you to implement rich animations with just a few lines of code.

It is a library for reading JSON files generated from Adobe After Effects called Lottie files and displaying animations.

It acts like a so-called video player, and various rich animations can be realized by loading a Lottie file.

Introduction

This time I will use cocoapod. Add the following line to the podfile and run pod install

pod 'lottie-ios'

Download Lottie file

Please drop your favorite file from here. In this demo, we will use Skateboarding.

Basic implementation

First, import the Lottie file you downloaded earlier into your project.

Later, add the following code to ViewController.swift.

import UIKit
import Lottie

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    // play lottie file
    let animationView = AnimationView(name: "41256-skateboarding")
    animationView.frame = view.bounds
    animationView.loopMode = .loop
    animationView.contentMode = .scaleAspectFit
    view.addSubview(animationView)
    animationView.play()
  }
}

Add a subview to a layer

The great thing about Lottie is that you can not only play the animation, but also add a subview to the specified animation layer. Documentation

Lottie animation consists of multiple animation layers, and each layer moves to realize rich animation. You can animate a subview as part of a layer by adding a subview to that layer.

Let's read the DL file with Lottie Editor.

The layer is visible on the left. The layer name is required at the implementation stage.

Implementation

This time, let's replace the face of Skateboard. As the documentation says, you have to decide on which layer to add the subview. This time we're replacing the face, so we'll add a subview to layer *** “head” ***.

import UIKit
import Lottie

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    // play lottie file
    let animationView = AnimationView(name: "41256-skateboarding")
    animationView.frame = view.bounds
    animationView.loopMode = .loop
    animationView.contentMode = .scaleAspectFit
    view.addSubview(animationView)
    
    // add label to replace face
    let path = AnimationKeypath(keypath: "head")
    let faceSubview = AnimationSubview()
    let faceLabel = UILabel()
    faceLabel.backgroundColor = .white
    faceLabel.frame = CGRect(x: -50, y: -450, width: 200, height: 200)
    faceLabel.text = "(゜ ω ゜)"
    faceLabel.textAlignment = .center
    faceLabel.layer.cornerRadius = 100
    faceLabel.clipsToBounds = true
    faceLabel.font = UIFont.boldSystemFont(ofSize: 60)
    faceSubview.addSubview(faceLabel)
    animationView.addSubview(faceSubview, forLayerAt: path)
    
    animationView.play()
  }
}

The face has been replaced wonderfully, and the position and angle of the new face have changed according to the movement!

Some people may have wondered, "The x and y coordinates are fixed, but if the frame size of the animation changes, the position of the face may shift."

I was worried about that, but I didn't have to worry about it. The position of the face did not shift at any frame size.

I think that it can be applied to various things such as creating animations that incorporate user profile images.

Finally

I wrote a little more about Lottie in here, so if you are interested, please take a look.

Happy Coding!