Change Lottie AnimationView size in Swift 5

Question

I am trying to implement a Lottie AnimationView inside my app but I am having trouble resizing the view.

This is how I setup/constrain the AnimationView:

@objc func showAnimationTapped(){



    let logoAnimation = AnimationView(name: "StrokeAnimation")
    logoAnimation.contentMode = .scaleAspectFit
    self.view.addSubview(logoAnimation)

    logoAnimation.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    logoAnimation.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    logoAnimation.heightAnchor.constraint(equalToConstant: 200).isActive = true
    logoAnimation.widthAnchor.constraint(equalToConstant: 200).isActive = true

    logoAnimation.play()

}

The problem is that XCode is breaking all the constraints and the AnimationView is wrongly placed/scaled. I also checked the View Hirarchy and the AnimationView is actually covering the whole screen... Also tried it with CGRect but that doesn't change anything.

How can I resize/constrain the animation in Swift 5?

I couldn't find anything on this topic.. I am grateful for every help!

Maybe something is wrong with my AE-file, because when I previewed it on Lottiefiles.com the "Stroke" is not the same animation as in me AE-file.

However I also tested it with a file directly from Lottie and that caused the same problem...

So maybe there is a Swift/Lottie/AfterEffects expert who can help me out here :)

Here is my AE-File + JSON-file for a better understanding. If there is anything unclear, just let me know.

Disputation

Check this. Already answered. https://mcmap.net/q/1453688/-lottieanimationview-size-won-39-t-change-is-too-small-ios-swift – Dodson

Answer 1

Since you are giving its own constraint manually, you forgot to disable (set it to false) translatesAutoresizingMaskIntoConstraints, try with this:

@objc func showAnimationTapped(){
    let logoAnimation = AnimationView(name: "StrokeAnimation")
    logoAnimation.contentMode = .scaleAspectFit
    logoAnimation.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(logoAnimation)

    logoAnimation.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    logoAnimation.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    logoAnimation.heightAnchor.constraint(equalToConstant: 200).isActive = true
    logoAnimation.widthAnchor.constraint(equalToConstant: 200).isActive = true

    logoAnimation.play()
}

Remember, if translatesAutoresizingMaskIntoConstraints is set to true (which is by default), the system automatically creates a set of constraints based on the view’s frame and its autoresizing mask, but you don't want that, you clearly want to set your own constraints as you did in code.

Side note: be aware of the fact that showAnimationTapped() might be called many times, and you don't want to keep adding a logoAnimation view each time, otherwise it will make your UI performance worst. Maybe you can put it in a computed var, add it and show/hide it or just put it in a computed var and add/remove it.

Halfbreed

oh my god.. that was actually it. I was stuck on this for a couple of hours yesterday just because I forgot to set that to false, aaah. Thanks! However, the animation is not showing, it is just showing "Wishlist" with standart font and the "Stroke" is missing as well. Do you maybe know how to fix this as well? – Disputation

@Disputation your After Effect animation might be the problem, I tried with another animation I found on Lottie website and it does work the code, it plays the animation. Instead your json, doesn't seem to play, so looks to me like an issue with the animation file. Try to check on Lottie Github issues.. – Halfbreed

@Disputation please check again my answer with the "Side note:..." part, it might be helpful for you to know! – Halfbreed