Creating Amazing Animations in IOS Apps using Lottie Framework

    0
    51

    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.

     

     

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here