Question

我遵循了MengTo的示例，该示例说明了如何在LottUI中播放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>) {

    }
}

然后我有一个显示动画的简单视图：

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

Answer 1

如果只想在按下按钮时显示lottie文件，则可以设置@State切换并在切换变量时显示彩票。

示例代码：


 @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

深入研究Lottie文档之后，我看到有注释的代码展示了如何实现动画按钮。我在LottieButton中编辑了上面的代码以设置按钮，然后将其放置到视图中并使其在点击时进行动画处理。我在上面编辑了代码，以显示其工作原理。

SwiftUI + Lottie iOS-播放动画OnTapGesture

2 个答案: