Possibility to bind animation name

[bastigerner]

Hey would it be possible to sort bind the animation name?

I want to use Lotties on my onboarding screen, where if the user presses next a new animation shows and starts playing center screen.

Hope to hear from you soon!

[tfmart]

Hey @itsLollo1000, thanks for your issue! Although it'd be possible to create a new initializer with a binding parameter, I believe that you can achieve this effect with the current version of LottieUI by making the source of your animation bindable.

Let me give you an example. Let's say you have an helper class that stores the content of an onboarding screen:

class OnboardingModel {
    var description: String
    var animation: String
}

You can observe this object and let it publish it values, so when the page changes on your onboarding flow, the current object will be updated and the view should update as well:

class OnboardingModel: ObservableObject {
    @Published var description: String
    @Published var animation: String
}

struct OnboardingView: View {
    var pages: [OnboardingModel]
    @ObservedObject var currentPage: OnboardingModel
    VStack {
        LottieView(currentPage.animation)
        Text(currentPage.description)
        Button("Next page") {
            currentPage = pages[index + 1]
        }
    }
}

Since currentPage has a @ObservedObject attribute, all changes to the object will cause the view to update, including the animation being displayed in LottieView. Let me know if this example has helped you or if in your scenario a binding initializer for LottieView would be more appropriate.

[bastigerner]

Tried something like this before but it didn't update the animation.
Made my own little LottieView and got it working. But I am still not happy with the outcome. Some Lotties are so cpu intense for the first time loading which causes the whole UI to shortly get unresponsive... But I'll still try your code and report back to you if it's a good solution for me!

Thanks so far!

[tfmart]

Hi @itsLollo1000! Just wanted to check if you managed to solve the binding issue in your end. Please let me know so we can check if it still makes sense to keep this issue open

[bastigerner]

Well sort of.
This is the function I use in my custom UIViewRepresentable.
Not really sure if it behaves perfectly

func updateName(name: String) {
            if self.name != name {
                DispatchQueue.main.async {
                    self.parent.animationView.pause()
                    self.name = name
                    self.parent.animationView.animation = Animation.named(self.name)
                    self.parent.animationView.play()
                }
            }
        }

[Mcrich23]

Some Lotties are so cpu intense for the first time loading which causes the whole UI to shortly get unresponsive

@bastigerner, this should be fixed in the Lottie 4.0.0+ and LottieUI 1.3.2 because the default rendering engine is now CoreAnimation

[bastigerner]

Will give it a shot soon hopefully!

Some Lotties are so cpu intense for the first time loading which causes the whole UI to shortly get unresponsive

@bastigerner, this should be fixed in the Lottie 4.0.0+ and LottieUI 1.3.2 because the default rendering engine is now CoreAnimation