iOS animation rendering outside bounds

[rextremotabaresDtt]

I am currently struggling with an issue in some animations our designer is creating for me with Lottie (she is using After Effects with BodyMovin plugin, the result of the animation is provided in the zip file). In Android and LottiePreview the animation plays fine, rendering only the part inside the colored rectangle and some text above but in iOS, the animation is drawing itself outside the bounding rectangle and there is an extra padding above the animation. What are we doing wrong? I assume this is something that needs to be done in AE but my designer doesn't know what to do to fix it.

Check these before submitting:

• [x] The issue doesn't involve an Unsupported Feature
• [x] This issue isn't related to another open issue

This issue is a:

• [x] Non-Crashing Bug (Visual or otherwise)
• [ ] Crashing Bug
• [ ] Feature Request
• [ ] Regression (Something that once worked, but doesn't work anymore)

Which Version of Lottie are you using?

Lottie 3.0

What Platform are you on?

• [ ] MacOS
• [x] iOS

What Language are you in?

• [x] Swift
• [ ] Objective-C

Expected Behavior

Actual Behavior

Code Example

let animation: Animation?
        switch Locale.current.languageCode {
        case "es":
            animation = Animation.named("DNI_ES_VECTORES")
        default:
            animation = Animation.named("DNI_EN_VECTORES")
        }
        animationView.animation = animation
        animationView.contentMode = .scaleAspectFit
        self.ivDiagram.addSubview(animationView)
        animationView.backgroundBehavior = .pauseAndRestore
        animationView.animationSpeed = 2.5
        animationView.isUserInteractionEnabled = true
        animationView.clipsToBounds = true
        animationView.translatesAutoresizingMaskIntoConstraints = false
        animationView.topAnchor.constraint(equalTo: self.ivDiagram.topAnchor).isActive = true
        animationView.leadingAnchor.constraint(equalTo: self.ivDiagram.leadingAnchor).isActive = true

        animationView.bottomAnchor.constraint(equalTo: self.ivDiagram.bottomAnchor).isActive = true
        animationView.trailingAnchor.constraint(equalTo: self.ivDiagram.trailingAnchor).isActive = true
        animationView.setContentCompressionResistancePriority(.fittingSizeLevel, for: .horizontal)
        animationView.setContentCompressionResistancePriority(.fittingSizeLevel, for: .vertical)
        animationView.alpha = 1.0
        animationView.play(fromProgress: 0,
                           toProgress: 1,
                           loopMode: LottieLoopMode.loop,
                           completion: { (finished) in
                            if finished {
                                print("Animation Complete")
                            } else {
                                print("Animation cancelled")
                            }
        })

Animation JSON

animation.zip

[ferico55]

Hi @buba447 I've looked into this issue and found that within the AnimationContainer and the layers does not care about the bounds stated in the animation json file. (I'm talking about AnimationContainer.swift:117)

We are setting the bounds for this CALayer but does not set the layer to mask itself to the bounds therefore the images and other layers can be rendered outside the stated bounds. Is this intentional? or would you like me to send a PR for this?

[ferico55]

@rextremotabaresDtt the work around for your current issue is to explicitly state the width and height of the animationView as per your requirement.

example:

animationView.topAnchor.constraint(equalTo: self.ivDiagram.topAnchor).isActive = true
animationView.leadingAnchor.constraint(equalTo: self.ivDiagram.leadingAnchor).isActive = true

animationView.heightAnchor.constraint(equalToConstant: 332).isActive = true
animationView.trailingAnchor.constraint(equalTo: self.ivDiagram.trailingAnchor).isActive = true

(no need for bottom anchor, set the height explicitly) and then add

animationView.clipsToBounds = true

I have tried this and it works

[rextremotabaresDtt]

Thank you @ferico55 I've tried setting the height specifically and it works! As a work around works perfect, thank you!