Hello Everyone !! Now this is one of the most useful yet uniques tutorial for ios apps. This tutorial is about adding animations to IOS applications. You can either create animations or use the default that will be provided in the given article.

Nice UI animations is always recommended and increases user experience in apps. Animations are of great usage for better understanding of an icon or image. Makes the app more dynamic looking than before. Enhance User experience from static and potential to make an eye catching activity. So without wasting much of our time lets begin.

 

 

So we need to know about some things to begin:

  • Whats LOTTIE?
  • Installing LOTTIE Framework
  • Adding json files as animationViews
  • How to enhance the added animations and effects?

About Lottie

Some years before, building complex animations for Android, IOS and React Native apps was a difficult and lengthy process. You had to add bulky images and keep them switching to render an animating effect which is a bit clumpsy.

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin.

Installing Lottie Framework

My recommendation is to install Lottie using the cocoapods. For doing so,

  1. Create an ordinary Xcode project as you used to earlier.
  2. Create a podfile in the project and add the following pod:
pod 'lottie-ios'

3. Now save the podfile and quit Xcode.

4. Run pod install

4. Open the ProjectName.workspace file

5. Now import Lottie framework to you ViewController.swift class

import Lottie

Getting Lottie Animation Files

You can use BodyMovin Extension to create the file or the easier option and to use some predesigned LotteFiles.

Download any of the file and Drag and drop into your project under the project name. These files will be copies as JSON.

Using LOTAnimation

Now is the fun part to use this LOTAnimation. For doing so, go to the viewDidLoad() function in ViewController.swift class

  override func viewDidLoad() {
        super.viewDidLoad()
     
        if let animationView = LOTAnimationView(name: "fish") {
            animationView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
            animationView.center = self.view.center
            animationView.contentMode = .scaleAspectFill
            animationView.loopAnimation = true
                animationView.animationSpeed = 0.8
            
            view.addSubview(animationView)
            
            animationView.play()
        }
        
    }

 

In the above code,

Creating LOTAnimationView

let animationView = LOTAnimationView(name: "fish")

For Selecting Animation Speed

animationView.animationSpeed = 0.8

 

For Looping the Animation

animationView.loopAnimation = true

Rest of the code is easy and enhancabe.

Reading Documentation of Lottie

For studying of the predefined functions associated with Lottie framework, follow the below Lotte guide:

Supported After Effects Features

Keyframe Interpolation


  • Linear Interpolation
  • Bezier Interpolation
  • Hold Interpolation
  • Rove Across Time
  • Spatial Bezier

Solids


  • Transform Anchor Point
  • Transform Position
  • Transform Scale
  • Transform Rotation
  • Transform Opacity

Masks


  • Path
  • Opacity
  • Multiple Masks (additive)

Track Mattes


  • Alpha Matte

Parenting


  • Multiple Parenting
  • Nulls

Shape Layers


  • Anchor Point
  • Position
  • Scale
  • Rotation
  • Opacity
  • Path
  • Group Transforms (Anchor point, position, scale etc)
  • Rectangle (All properties)
  • Elipse (All properties)
  • Multiple paths in one group

Stroke (shape layer)


  • Stroke Color
  • Stroke Opacity
  • Stroke Width
  • Line Cap
  • Dashes

Fill (shape layer)


  • Fill Color
  • Fill Opacity

Trim Paths (shape layer)


  • Trim Paths Start
  • Trim Paths End
  • Trim Paths Offset

Layer Features


  • Precomps
  • Image Layers
  • Shape Layers
  • Null Layers
  • Solid Layers
  • Parenting Layers
  • Alpha Matte Layers

Currently Unsupport After Effects Features

  • Even-Odd winding paths
  • Merge Shapes
  • Trim Shapes Individually feature of Trim Paths
  • Expressions
  • 3d Layer support
  • Gradients
  • Polystar shapes (Can convert to vector path as a workaround)
  • Alpha inverted mask

Sample Project

Also you can download the sample project here

Install the pods in the directory of your system and you can use the above project.

 

 

If you really liked the article, please subscribe to our YouTube Channel for videos related to this article.Please find us on Twitter and Facebook.

Related Posts

Categories: