swift - 如何使用 OnTapGesture 事件播放我的乐透动画？

Question

我按照 MengTo 的示例说明了如何在 SwiftUI 中播放 Lottie 动画。 ( https://www.youtube.com/watch?v=fVehE3Jf7K0 ) 但是，我想知道是否有人可以帮助我理解如何最初呈现动画的第一帧，但只有在用户以按钮格式点击动画时才会播放动画。
我当前的 LottieButton 文件如下:

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>) {
    
    }
}

然后我只有一个显示动画的简单 View :

struct InboxView: View {
var body: some View {
    VStack {
        Button(action: {}) {
        LottieButton(filename: "inbox-notification")
        .frame(width: 100)
            }   
        }
    }
}

Answer 1

如果您想显示 lottie文件只有按下按钮时，您可以设置@State在切换变量时切换并显示您的 Lottie。

示例代码:

 @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")
                }
            }
        }
    }