is it possible to combine two animations in Lottie framwork

Question

swift version is 5 and lottie version is 3.1.1

I want to show two animations Json file with Lottie, that way fade in first animation and after it done it fades out and the another one fades in and I have to take a loop and do it on an infinity loop.

boardAnimationViewForSecondSlide = AnimationView(frame: CGRect(x: 0, y: 0, width: frame.width, height: frame.width * (690 / 750)))
boardAnimationViewForSecondSlide?.animation = Animation.named("Slidetwop1")
slide.addSubview(boardAnimationViewForSecondSlide)

and I define a closure for handle completion play's method

private var animationState: Int = 0 // 0 first slid, 1 second slide
private var changeStateInSlide2: (Bool) -> Void = { finish in
   if animationState == 0 {
        boardAnimationViewForSecondSlide.animation =  Animation.named("Slidetwop2.json")
        playSecondPage = true
   } else {
         boardAnimationViewForSecondSlide.animation =  Animation.named("Slidetwop1.json")
         playSecondPage = true
    }
}


fileprivate var playSecondPage: Bool {
        get {
            return false
        }
        set {
            if newValue {
               boardAnimationViewForSecondSlide.play(completion:changeStateInSlide2)
            }
        }
    }

metalnodeug · Answer 1 · 2019-09-04T19:43:13.853

1

I think the moste simple is to create a func to launch the animation.

example :

/// Start animation with Lottie
    func startAnimation(viewName: AnimationView, jsonName: String) {
        viewName.isHidden = false
        viewName.animation = Animation.named(jsonName)
        viewName.play { (_) in
            viewName.isHidden = true
        }

After this you can simply call the method one after one :

startAnimation(viewName: checkAnimation, jsonName: "Slidetwop1")
startAnimation(viewName: checkAnimation, jsonName: "Slidetwop2")

Or use the completion handler to call the second.

EDIT: For the loop you can use this solution:

/// Start animation with Lottie
func startAnimation() {
    animationLottieView.animation = Animation.named("Slidetwop1")
    animationLottieView.play { (finished) in
        // completion handler
        self.animationLottieView.animation = Animation.named("Slidetwop2")
        self.animationLottieView.play { (finishedAnimation) in
            self.startAnimation()}
    }
}

edited Sep 04 '19 at 19:43

answered Sep 04 '19 at 07:53

metalnodeug

23
4

I want to do it on a loop, how can I do it?? – mohsen Sep 04 '19 at 09:28
Can you use repeat {} while maybe ?! – metalnodeug Sep 04 '19 at 10:20
I know you are a junior in stackOverFlow, honestly your Answer doesn't related to my question, but I vote you up, because I think it helps you to feel energy for answer more in stackoverflow ;) – mohsen Sep 04 '19 at 12:07
Sorry if i have not answer to your question. Maybe i have not understand your request. However, if you will a loop animation, you can see this : var AnimationView.loopMode: LottieLoopMode { get set } – metalnodeug Sep 04 '19 at 16:13
Yes, I know , I want to loop two animations ,one after one and it just work for one animation – mohsen Sep 04 '19 at 17:07
Ok i have edit my answer. This code launch one after one animation and use a loop completion handler. Fork fine for me. You can change for your project to use fade in and out for each. – metalnodeug Sep 04 '19 at 19:44
It makes a memory leak :) – mohsen Sep 05 '19 at 10:09

is it possible to combine two animations in Lottie framwork

1 Answers1