How to Scale LottieFile in SwiftUI

Question

kaoko OP

Created Nov ’21

Replies 1

Boosts 0

Views 3.2k

Participants 2

hello all, is my first question.

I try to scale LottieFile animation I would like to shrink a Lottie animation because it takes up the whole screen, I would like to be able to place it in a specific place and a specific size, I tested several solutions, I can't do it.

here is my code


    @Binding var animationInProgress: Bool

    func makeUIView(context: Context) -> some AnimationView {
        let lottieAnimationView = AnimationView(name:"31626-e-mail")
        lottieAnimationView.frame = CGRect(x: 1, y: 1, width: 50, height: 50)
        lottieAnimationView.contentMode = .scaleAspectFit
        lottieAnimationView.loopMode = .loop
        lottieAnimationView.play { complete in
            if complete {
                animationInProgress = false
            }
        }
        return lottieAnimationView
    }
    func updateUIView(_ uiView: UIViewType, context : Context){
    }
}

and my contentView


    @State var animationInProgress = false

    var body: some View {
        VStack{
           Text("My fruit Shop").font(.title).bold()
            Image("Fruit")
                .resizable()
                .cornerRadius(8)
                .frame(width: 300, height: 200)
            if animationInProgress {
                TestLottieView(animationInProgress: $animationInProgress)
                    .frame(width: 50, height: 50)
            }
            Spacer()
            Button("Like this product", action: {
                animationInProgress.toggle()
            })
                .foregroundColor(.white)
                .padding()
                .background(Color.accentColor)
                .cornerRadius(8)
                .padding(.top, 50)
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Thank you very much in advance for your help

Boost

Answer 1

Mailliwi OP

Sep ’22

Hey @kaoko,

I don't know if you've found a solution to your problem, but the code below should be the solution to your problem.

import SwiftUI
import Lottie

struct LottieEmptyStateView: UIViewRepresentable {
  var fileName: String
   
  func makeUIView(context: UIViewRepresentableContext<LottieEmptyStateView>) -> some UIView {
     
    let view = UIView(frame: .zero)
     
    let lottieAnimationView = AnimationView()
    let animation = Animation.named(fileName)
     
    lottieAnimationView.animation = animation
    lottieAnimationView.contentMode = .scaleAspectFit
    lottieAnimationView.loopMode = .loop
    lottieAnimationView.play()
     
    lottieAnimationView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(lottieAnimationView)
     
    NSLayoutConstraint.activate([
      lottieAnimationView.widthAnchor.constraint(equalTo: view.widthAnchor),
      lottieAnimationView.heightAnchor.constraint(equalTo: view.heightAnchor)
    ])
     
    return view
  }
   
  func updateUIView(_ uiView: UIViewType, context: UIViewRepresentableContext<LottieEmptyStateView>) {
     
  }
}

Hope that helped!
Kind regards, William

0