[Swift5] How to implement animation using "lottie-ios"

What is lottie-ios?

** Lottie ** is an animation library for iOS, Android, and React Native that appeared on Airbnb. Rendering the animations that can be displayed in Adobe After Effects in real time makes it as easy as creating static content in a native app to create an animation that makes interesting movements.

▼ Click here for details https://ferret-plus.com/6214

▼ Click here for official page https://airbnb.design/lottie/

Implementation environment

macOS Catalina 10.15.7 Xcode 12.1 Apple Swift version 5.3

This time, we will implement it in a project called ** TestApp **.

Introduction flow

① Install and import CocoaPods ② Download JSON file ③ Read the downloaded file and write the code

① Install and import CocoaPods

The Pods you need are pod'lottie-ios'.

Podfile.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'TestApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

pod 'IBMWatsonToneAnalyzerV3', '~> 3.6.0'

  # Pods for TestApp

  target 'TestAppTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'TestAppUITests' do
    # Pods for testing
  end
  
  //Install here
  pod 'lottie-ios'

end

When pod install is complete, import it into your project.

② Download JSON file

Now go to Lottie's animation search page and download your favorite animations.

▼ Search page https://lottiefiles.com/featured?page=1

Once you have decided on your favorite animation, click it to open a page like the one below. Select ** Download JSON ** in the upper right corner and select ** Lottie JSON ** to download the JSON file. When the download is complete, drag and drop it to add the project file. The place to drag is OK around the top of info.plist.

③ Read the downloaded file and write the code

Then it is finally implemented.

ViewController.swift

import UIKit
import Lottie //Imported in ①

class ViewController: UIViewController {
    
    //AnimationView declaration
    var animationView = AnimationView()

    override func viewDidLoad() {
        super.viewDidLoad()

        //Call animation
        addAnimationView()
    }
    
    //Animation preparation
    func addAnimationView() {
        
        //Specifying an animation file
        animationView = AnimationView(name: "38280-man-chilling-on-electric-scooter") //Enter the name of the file you downloaded earlier here (no extension required)
        
        //Animation position specification (center of screen)
        animationView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
        
        //Specify animation aspect ratio & start with loop
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.play()
        
        //Placed in ViewController
        view.addSubview(animationView)
    }

Operation check

After writing the code, check the operation. If the animation is displayed in the center of the screen as shown in the image below, it is successful!

Finally

As we did this time, Lottie allows you to implement high quality animations in short code. There are many other fashionable animations, so you might want to try them once!

Thank you for watching until the end! I hope you will find it helpful.