“Enhancing User Interface with Lottie Animations in SwiftUI”

An Engaging and Intuitive Animation can give life to your App.

Animation can play a key role in creating an enjoyable and memorable user experience, which can help to increase user retention and reduce churn. It is an extra layer of visual appeal to an app, for creating modern and effective app designs, which can help to improve usability, engagement, overall user satisfaction, making it more attractive and memorable to users.

One of the easiest way to add complex animation in any mobile App is through integrating Lottie Animation inside the App.

Lottie Animations:

Lottie is developed by Airbnb, it’s a JSON-based animation file format that allows you to ship animations on any platform. Lottie Animation is available in JSON, Zip Archive, GIF and in MP4 formats and can be easily integrated in website, iOS ,macOS, Android, React Native, Flutter etc.

One of the very useful feature is we can easily customise the animation by changing colours of items, speed of animation, frame rate, dimension etc all possible in free version.

Lottie editor section- https://editor.lottiefiles.com/

Lottie in SwiftUI App:

Lottie animation can be easily integrated as Swift Packages or as pod files.

For Apple Swift Packages go to Xcode Menu and choose File-> Add Packages…type https://github.com/airbnb/lottie-ios

Once added you can verify it in Project -> Package Dependencies.

Another way to add is by adding it in pod file.

pod 'lottie-ios'

And then run

pod install

To add Lottie animation in SwiftUI app, we need to wrap it in UIKit view with UIViewRepresentable protocol. Check below code to add it in SwiftUI app.

import Lottie
import SwiftUI


struct LottieView: UIViewRepresentable {
    var lottieFile = "fav" // lottiefile
    var loopMode: LottieLoopMode = .playOnce
    
    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)
        
        let animationView = LottieAnimationView(name: lottieFile)
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = loopMode
        animationView.play{ (finished) in
        }
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)
        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])
        
        return view
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
}

Now use it in SwiftUI view to display animation.

LottieView(lottieFile: "searchproduct")
.frame(width: 80, height: : 80)

Note: “searchproduct” is the JSON file downloaded from Lottie site and saved in the project.

Add animation on Image Click :

Adding a animation on add to favourite image click, simply add LottieView in place of image

 if !favClicked {
   Image("FavWhiteImage")
   .resizable()
   .frame(width:  28, height: 28)
   .aspectRatio(contentMode: .fit)
    .onTapGesture {
     self.favClicked.toggle()
     self.showFavAnimation.toggle()
     }
 }else {
   LottieView(lottieFile: "favAnimation")
   .frame(width: 80, height: 80)
   .padding(.init(top: -15, leading: -5, bottom: -5, trailing: -15))
  } 
}

LottieButton Implementation:

Adding Lottie Animation to the button with the help of below class

import SwiftUI
import Lottie

struct LottieButton: UIViewRepresentable {

    typealias UIViewType = UIView
    let animationView = AnimatedButton()
    let filename: String  //lottie file name
    let action: () -> Void

    func makeUIView(context: UIViewRepresentableContext<LottieButton>) -> UIView {
        let view = UIView()

        let animationView = LottieAnimationView(name: filename)
        animationView.contentMode = .scaleAspectFit

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
        ])

        return view
    }

    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieButton>) {

    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }


    class Coordinator: NSObject {
        let parent: LottieButton

        init(_ parent: LottieButton) {
            self.parent = parent
            super.init()
            parent.animationView.addTarget(self, action: #selector(touchUpInside), for: .touchUpInside)
        }

        @objc func touchUpInside() {
            parent.action()
        }
    }
}

and use the LottieButton as below;

 LottieButton(filename: "inbox", action: {
 //click action
 })
 .frame(width: 200, height: 200)

Thank you for reading.🙏 If this post helped you, do clap for me 😃

HaPpY CoDiNg….