iOS Swift animation with Lottie

In swift there are lots of way to do UI animation. The designer create complex animation using Adobe After Effect of any other animation software. As a developer, we have to deal with those animation design principle. Imagine if we have a way to export the design from the software and like After Effect and use it directly in your application. It would save you lots of time and effort. You can do that by using one library call Lottie. It give you the capability to bring animation as json format and reuse it in your application. Let's how easy it is by using Lottie for animation.

Project Setup

Create new project in Xcode and install Lottie using either Cocoa Pod or Cathage. As of now I use Cocoa Pod, so I assume you have Cocoa Pod install on your local computer. If you don't have let's go quickly checkout the installation process here.
Run

pod init

and add lottie-ios in your pod file:

target 'LottieSample' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!
  pod 'lottie-ios'

  # Pods for LottieSample

end

Run

pod install

Sample Code

First, download the sample animation json file from this website. and drag it into your Xcode project.
add this line right after the UIKit import

import Lottie

create and initialize your animation view using LOTAnimationView class. Add this block of code to the bottom of your viewDidLoad()

let animationView = LOTAnimationView(name: "favourite_app_icon")
animationView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
animationView.center = self.view.center
animationView.contentMode = .scaleAspectFill

After that add this animation view as subview of your ViewController and call play() to start the animation.

view.addSubview(animationView)
animationView.play()

You can also control the animation looping and speed using this code:

animationView.loopAnimation = true
animationView.animationSpeed = 0.5

Now let's go ahead and run the application to see the result.
Since Lottie animation is also a subview of the ViewController you can also apply the view animation with it as well:

let timing = UICubicTimingParameters(animationCurve: .easeInOut)
let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timing)

animator.addAnimations {
    animationView.transform = CGAffineTransform(scaleX: 0.5, y: 0.5)
}

animator.addCompletion {_ in
    animationView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
}

animator.startAnimation(afterDelay: 0.3)

I also put my code in my Github repo so that you can clone and test it out right after reading this.

IOS Swift Animation using Lottie

iOS Swift animation with Lottie

Project Setup

Sample Code