How can I play my lottie animation with an OnTapGesture event? - swift

Question

I followed MengTo's example of how to get a Lottie animation to play within SwiftUI. (https://www.youtube.com/watch?v=fVehE3Jf7K0) However, I was wondering if anyone could help me understand how to initially present the first frame of the animation, but only have the animation play once a user taps on it in a button format.
My current LottieButton file is as follows:
import SwiftUI
import Lottie
struct LottieButton: UIViewRepresentable {
/// Create a button.
let animationButton = AnimatedButton()
var filename = "LottieLogo2"
func makeUIView(context: UIViewRepresentableContext<LottieButton>) -> UIView {
let view = UIView()
let animation = Animation.named(filename)
animationButton.animation = animation
animationButton.contentMode = .scaleAspectFit
animationButton.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(animationButton)
animationButton.clipsToBounds = false
/// Set animation play ranges for touch states
animationButton.setPlayRange(fromMarker: "touchDownStart", toMarker: "touchDownEnd", event: .touchUpInside)
animationButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpCancel", event: .touchUpOutside)
animationButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpEnd", event: .touchUpInside)
NSLayoutConstraint.activate([
animationButton.heightAnchor.constraint(equalTo: view.heightAnchor),
animationButton.widthAnchor.constraint(equalTo: view.widthAnchor),
])
return view
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieButton>) {
}
}
And then I just have a simple view that is displaying the animation:
struct InboxView: View {
var body: some View {
VStack {
Button(action: {}) {
LottieButton(filename: "inbox-notification")
.frame(width: 100)
}
}
}
}

Answer 1

If you want to show lottie file only when button pressed, you can set #State toggle and show your Lottie when the variable in toggled.
Sample code:
#State var toggleValue = false
var body: some View {
VStack {
Button(action: {
self.toggleValue.toggle()
}) {
VStack {
if toggleValue {
LottieView(filename: "inbox-notification")
.frame(width: 100)
}
Text("Button")
}
}
}
}

Answer 2

After digging deeper into the Lottie documentation, I saw that there was commented code that showed how to implement an animated button. I edited the code above in LottieButton to set up the button and then I was able to place it into a view and get it to animate on tap. Here is the working code:
struct InboxView: View {
var body: some View {
VStack {
LottieButton(filename: "inbox-notification")
.frame(width: 100)
}
}
}