Lottie-ios: Lottie animation freezes, and stops repeating

Created on 22 Sep 2017 · 9Comments · Source: airbnb/lottie-ios

Lottie-ios Issue

Hello! Sorry you are having an Issue! Please help us make Lottie better by filling everything below out with as much information as you can so we can try to reproduce and fix the issue!

Check these before submitting:

[x] Updated to the latest (2.1.3) version of Lottie - Carthage.resolved: github "airbnb/lottie-ios" "10568b55d86c42f4ab374888ffd38605411ea7ed"
[x] The issue doesnt involve and Unsupported Feature
[x] This issue isnt related to another open issue

This issue is a

[x] Non-Crashing (Visual or otherwise) Bug

What Platform are you on?

[x] iOS (10.3, 11)

Expected Behavior

If you have a looping animation, like inside of a refresh control, whenever you leave the current screen you are on and then come back to it (and the first screen is not deinitialized - like navigating tabs on a tab bar or navigation push, then pop) the animation should continue to loop.

Actual Behavior

Code Example

I created a test project here duplicating my results: https://github.com/kylelol/Lottie-Animation-Bug

The code below is used to add a looping Lottie animation to my UIRefreshControl that appears in my table view's throughout my app.

final class NameRetrieavableLOTAnimationView: LOTAnimationView {

    var name: String

    init(name: String, bundle: Bundle = .main) {
        self.name = name

        let filename = (name as NSString).deletingPathExtension
        var pathExtension = (name as NSString).pathExtension
        if pathExtension.isEmpty {
            pathExtension = "json"
        }
        let resourcePath = bundle.path(forResource: filename, ofType: pathExtension) ?? ""

        let url = URL(fileURLWithPath: resourcePath)

        super.init(contentsOf: url)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

extension UIView {
  // MARK: Loading Animation (loading.json)

  func halogenAddLoadingAnimation(style: LoadingAnimationStyle) {
        DispatchQueue.main.async {
            let animationView = self.halogenAddLoopingLottieAnimation(named: style.name)

            // if the loader is smaller than the bounds, change its size to the loader size, else keep it the bound size
            if (style.size.width <= self.bounds.size.width && style.size.height <= self.bounds.size.width) {
                animationView.frame.size = style.size
            }

            animationView.contentMode = .scaleAspectFit
            animationView.center = CGPoint(x: self.bounds.midX, y: self.bounds.midY)
        }
    }

 func halogenAddLoopingLottieAnimation(named animationName: String) -> LOTAnimationView {
        let animationView = halogenAddLottieAnimation(named: animationName)

        animationView.loopAnimation = true
        animationView.play()

        return animationView
    }

    // MARK: Helpers

    private func halogenAddLottieAnimation(named animationName: String) -> LOTAnimationView {
        let animationView = NameRetrieavableLOTAnimationView(name: animationName)

        animationView.frame = bounds
        animationView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        animationView.contentMode = .scaleAspectFill

        addSubview(animationView)

        return animationView
    }
}

Animation JSON

{"v":"4.7.0","fr":60,"ip":0,"op":80,"w":130,"h":130,"nm":"Loader v 3","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"inner 2","ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p833_1_0p333_0"],"t":0,"s":[0],"e":[370.8]},{"t":80}]},"p":{"a":0,"k":[64,64,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[40,40,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[120,120]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.654],"y":[-2.724]},"o":{"x":[0.298],"y":[0]},"n":["0p654_-2p724_0p298_0"],"t":0,"s":[0],"e":[0]},{"i":{"x":[0.82],"y":[1]},"o":{"x":[0.419],"y":[0.06]},"n":["0p82_1_0p419_0p06"],"t":35,"s":[0],"e":[97]},{"t":80}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.609],"y":[0]},"n":["0p833_1_0p609_0"],"t":0,"s":[4],"e":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"n":["0p833_1_0p167_0"],"t":35,"s":[100],"e":[100]},{"t":80}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim"},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-24,"s":[0,0.6784314,0.9490196,1],"e":[0,0.6784314,0.9490196,1]},{"t":80}]},"o":{"a":0,"k":100},"w":{"a":0,"k":14},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[0.047,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":4,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":80,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"outter","ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[-20.956]},"o":{"x":[0.333],"y":[0]},"n":["0p667_-20p956_0p333_0"],"t":-40,"s":[0],"e":[0]},{"i":{"x":[0.667],"y":[0.939]},"o":{"x":[0.333],"y":[0.059]},"n":["0p667_0p939_0p333_0p059"],"t":0,"s":[0],"e":[366]},{"t":80}]},"p":{"a":0,"k":[65,64.5,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[120,120]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.4],"y":[-5.515]},"o":{"x":[0.333],"y":[0]},"n":["0p4_-5p515_0p333_0"],"t":-40,"s":[0],"e":[0]},{"i":{"x":[0.8],"y":[0.966]},"o":{"x":[0.6],"y":[0.065]},"n":["0p8_0p966_0p6_0p065"],"t":0,"s":[0],"e":[100]},{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.2],"y":[3.385]},"n":["0p4_1_0p2_3p385"],"t":40,"s":[100],"e":[100]},{"t":80}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.397],"y":[1]},"o":{"x":[0.609],"y":[0]},"n":["0p397_1_0p609_0"],"t":-40,"s":[2],"e":[2]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"n":["0p833_1_0p167_0"],"t":0,"s":[2],"e":[98]},{"t":80}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim"},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":-40,"s":[1,1,1,1],"e":[0,0.6784314,0.9490196,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":0,"s":[0,0.6784314,0.9490196,1],"e":[1,1,1,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"n":["0p667_1_0p167_0"],"t":40,"s":[1,1,1,1],"e":[0,0.6784314,0.9490196,1]},{"t":80}]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[0.047,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":4,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":80,"st":-40,"bm":0,"sr":1}]}

Source

kylelol

Most helpful comment

Same issue happened to me, any update?

liuqingtong on 28 Nov 2017

👍5 😄3 👀2 🚀2 ❤2 😕2 🎉2

All 9 comments

Same issue happened to me, any update?

rcgary on 27 Sep 2017

@rcgary I've created a workaround, if you just check if the animation view isAnimating, and restart it every time your screen appears it fixes it. Its annoying to do, but it fixes it until a real solution is found.

kylelol on 28 Sep 2017

I've created a patch for a possible fix to this issue, would be great if someone is able to help to verify it.

I had encountered the same issue where the animation freezes and not resuming after presenting a modal view controller and dismissing it - this patch fixes this particular case.

I have not tested it on other cases reported here: navigating tabs and push-pop navigation.