[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'.


# 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

pod 'IBMWatsonToneAnalyzerV3', '~> 3.6.0'

  # Pods for TestApp

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

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


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. image.png Select ** Download JSON ** in the upper right corner and select ** Lottie JSON ** to download the JSON file. image.png 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.


import UIKit
import Lottie //Imported in ①

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

    override func viewDidLoad() {

        //Call animation
    //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
        //Placed in ViewController

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! image.png


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.

Recommended Posts

[Swift5] How to implement animation using "lottie-ios"
[Swift] How to implement the countdown function
[Swift5] How to implement standby screen using'PKHUD'
How to implement image posting using rails
[Swift] How to implement the Twitter login function using Firebase UI ①
[Swift] How to implement the Twitter login function using Firebase UI ②
[Swift] How to implement the LINE login function
[swift5] How to implement the Twitter share function
[Swift] How to implement the fade-in / out function
How to implement UICollectionView in Swift with code only
Add a subview to your animation layer using lottie-ios
[Swift] How to use UserDefaults
How to use Swift UIScrollView
[Rails] How to implement scraping
Rails learning How to implement search function using ActiveModel
[Java] How to implement multithreading
[Swift] Implement UITableView using xib
How to authorize using graphql-ruby
How to easily implement in-app purchase using itemstore <Implementation: Android>
How to implement infinite scrolling (page nate) in Swift TableView
[Swift] How to use SwiftLint (cocoapods)
[Swift] How to use Unwind segue
[Swift] How to send a notification
[Java] Try to implement using generics
[Rails] How to implement star rating
[Swift] How to replace multiple strings
How to build CloudStack using Docker
How to implement UI automated test using image comparison in Selenium
How to execute a contract using web3j
How to sort a List using Comparator
[swift5] How to specify color in hexadecimal
How to implement search functionality in Rails
How to implement date calculation in Java
How to implement Kalman filter in Java
[Rails] How to upload images using Carrierwave
[Java] How to calculate age using LocalDate
[Swift] How to fix Label in UIPickerView
[Swift] How to use Tab Bar Controller
How to call Swift 5.3 code from Objective-C
[Swift] Easy to implement modal with PanModal
How to implement coding conventions in Java
How to implement TextInputLayout with validation function
[Swift5] How to create a splash screen
How to implement ranking functionality in Rails
How to make asynchronous pagenations using Kaminari
How to implement asynchronous processing in Outsystems
How to overwrite Firebase data in Swift
[Swift] How to use one option alert
[Rails] How to handle data using enum
Swift beginners tried to implement microwave logic!
How to insert icons using Font awesome
How to return a value from Model to Controller using the [Swift5] protocol
How to implement a slideshow using slick in Rails (one by one & multiple by one)
[Swift] How to set an image in the background without using UIImageView.
How to output Excel and PDF using Excella
How to execute and mock methods using JUnit
[Rails] How to create a graph using lazy_high_charts
How to delete a controller etc. using a command
[Swift] How to generate an ID to uniquely identify a certain thing (using UUID)
How to play audio and music using javascript
Note how to use Swift super basic TableView