LottieAnimationView size won't change/is too small (iOS/Swift)

Question

Whether the view I'm creating is a LOTAnimatedSwitch or View, the image of the animation always appears very small. The lottie animation doesn't take up the size of the view that I create. Is this an issue with downloading the animation from LottieFiles? The dimensions of the file are 600x600 pixels. I'm using Lottie version 2.5.0 and Swift 4. For example:

    let animatedSwitch = LOTAnimatedSwitch(named: "toggle_switch")
    animatedSwitch.frame.origin = CGPoint(x: 8, y: separatorLineView.frame.height + separatorLineView.frame.origin.y + 8)
    animatedSwitch.frame.size = CGSize(width: dialogViewWidth - 16, height: 40)
    animatedSwitch.setProgressRangeForOnState(fromProgress: 0.5, toProgress: 1)
    animatedSwitch.setProgressRangeForOffState(fromProgress: 0, toProgress: 0.5)
    animatedSwitch.contentMode = .scaleAspectFill
    animatedSwitch.clipsToBounds = true
    animatedSwitch.backgroundColor = .purple

Dancer

May be the frame you given is too small so this issue come. – Bottommost

Answer 1

The problem was with the file I downloaded from LottieFiles. To fix the animation/icon from being small, I scaled the composition size in adobe after effects to fit the preview frame. I exported the .aeb file to .json using the bodymovin plugin.

Hardik's answer was also helpful. The problem was simply that the file I downloaded had a lot of empty space around the actual icon until I scaled the picture up.

Dancer

For me this link works jasmine-elamblakatt.medium.com/… – Eugene

Answer 2

Try this code i am not sure this will help in your case

let animatedSwitch = LOTAnimatedSwitch(named: "toggle_switch")
animatedSwitch.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
animatedSwitch.center = self.view.center
animatedSwitch.setProgressRangeForOnState(fromProgress: 0.5, toProgress: 1)
animatedSwitch.setProgressRangeForOffState(fromProgress: 0, toProgress: 0.5)
animatedSwitch.contentMode = .scaleAspectFit
self.view.addSubview(animatedSwitch)
self.view.backgroundColor = UIColor.lightGray

Bottommost

I think it's a bug with the lottie library. When I set the frame to be bigger, it does make the picture bigger. But the picture/icon doesn't fill the frame. The frame is much bigger than the icon It does help a little, but I think it's a bug with the library or maybe my download. – Dancer

yes because it increase the frame of outer area not for swich. – Bottommost

This doesn't help at all. – Sparing

This is only for toggle_switch type LOTAnimatation. And above code is pasted after tested in device. – Bottommost

@Aakash. Today i cross checked above code and its working fine in swift 4.2, Please double cross check with your code. – Bottommost

@HardikThakkar Hey thanks for being prompt. I tried the same exact code in swift 4.2. There was no change in my animation. It still did have alot of padding in the side. Do you have any alternatives? – Sparing

padding in the side is depend on the animation file you used, you need to change accordingly. – Bottommost

Add the below line of code. "animatedSwitch.contentMode = .scaleAspectFit" – Synaeresis

Answer 3

    animationView = .init(name: "lf30_editor_fip4qqkq")
    animationView!.frame = CGRect(x: 0, y: 0, width: 150, height: 150)
    animationView!.center = self.view.center
    animationView!.contentMode = .scaleAspectFit
    animationView!.loopMode = .loop
    animationView!.animationSpeed = 1.0
    view.addSubview(animationView!)
    animationView!.play()

Synaeresis

Now just play with the width and height settings... – Synaeresis

Answer 4

I had this issue too. I modified the animation view's width and height to my desired size and changed the content mode to scale aspect fill. If you wanted to make the animation larger, just update your width and height. Here's example code.

animationView.animation = Animation.named("loading")
animationView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
animationView.contentMode = .scaleAspectFill
animationView.loopMode = .loop
animationView.play()

Merlenemerlin