Lottie-ios: LOTAnimation not centering in view

Created on 1 May 2017  路  9Comments  路  Source: airbnb/lottie-ios

Hi, I'm trying to load animation which i take from Lottie library.
The animation load successfully, but it did not placed correctly inside my view.
let animationView = LOTAnimationView(name: "servishero_loading")
animationView?.loopAnimation = true
animationView?.contentMode = .scaleAspectFit
self.loadingAnimationView.addSubview(animationView!)

My view are the red square.
The animation rendered outside from the red square.
How do i placed the animation centered inside red square?
screen shot 2017-05-02 at 1 17 31 am

Most helpful comment

self.loadingAnimationView.addSubview(animationView!)
if you want animationView 's frame == loadingAnimationView 's bounds.
please insert animationView.frame = loadingView.bounds above code

All 9 comments

+1 i'm seeing similar issues with .scaleAspectFit. for us, the animation is sometimes bottom aligned and sometimes has part of its bottom clipped. it doesn't always seem to be scaling to _fit_ (neither the height nor width are max of its container)

self.loadingAnimationView.addSubview(animationView!)
if you want animationView 's frame == loadingAnimationView 's bounds.
please insert animationView.frame = loadingView.bounds above code

Should be fixed in Lottie 2.0! If you still have a problem please create a new issue!

I fixed this by moving LOTAnimationView code from ViewDidLayoutSubviews to the ViewDidAppear. Strange bug.

i want to save someone else's time, make sure you set the contentmode first to .scaletofit before actually adding the view as subview, that is 3 hours of my time wasted that you should not :)

I fixed this by moving LOTAnimationView code from ViewDidLayoutSubviews to the ViewDidAppear. Strange bug.

I would give u 100 thumbs up for this lol tried every which way to center and some worked on certain screen sizes, but this fix worked across multiple screen sizes. Tip my hat to u.

@ahusic17 it is not worked in view did appear either. I could not solve that problem too

i want to save someone else's time, make sure you set the contentmode first to .scaletofit before actually adding the view as subview, that is 3 hours of my time wasted that you should not :)

@AmplifiedDev2

None of this seems to work. Would you be able to tell what am I missing? :(

let hat = AnimationView(name: "hataqua") hat.contentMode = .scaleAspectFit let hatSubview = AnimationSubview() hatSubview.contentMode = .scaleAspectFit hatSubview.addSubview(hat) let hatKeyPath = AnimationKeypath(keypath: "face") self.mainCharacterAnimationView.contentMode = .scaleAspectFit self.mainCharacterAnimationView.addSubview(hatSubview, forLayerAt: hatKeyPath)

i solution this problem with this code
@IBOutlet weak var animationView: UIView!

override func viewDidLoad(){
super.viewDidLoad()
let animation = AnimationView(name: "animationName")
animation.frame = animationView.bounds
animation.center.x = self.animationView.frame.width/2
animationView.contentMode = .scaleAspectFit
self.animationView.addSubview(animation)
}
and the animation is centered with respect to the view

you can do the same with the Y axis only with a few small changes
animation.center.x = self.animationView.frame.width/2
animation.center.y = self.animationView.frame.height/2

Was this page helpful?
0 / 5 - 0 ratings

Related issues

CentrumGuy picture CentrumGuy  路  4Comments

Ushaka picture Ushaka  路  5Comments

webdale picture webdale  路  5Comments

ricardohochman picture ricardohochman  路  4Comments

albertoNovo picture albertoNovo  路  3Comments