SwiftUI + Lottie iOS - Воспроизведение анимации OnTapGesture

Я последовал примеру MengTo о том, как заставить анимацию Lottie воспроизводиться в SwiftUI. (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)
            }   
    }
}

swiftui lottie lottie-ios
person Jason Tremain    schedule 17.02.2020    source источник
comment
Как обрабатывать касания для запуска функции при использовании LottieButton? .onTapGesture работает, но при его использовании анимация не работает. Есть примеры?   -  person There Are Four Lights    schedule 16.05.2020

Ответы (2)


arrow_upward
1
arrow_downward

Если вы хотите, чтобы lottie файл отображался только при нажатии кнопки, вы можете установить @State toggle и показать свою 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")
                }
            }
        }
    }
person Mac3n    schedule 17.02.2020
comment
Ну, я хочу, чтобы начальный кадр анимации отображался изначально, но я хочу, чтобы он воспроизводился только при нажатии. Так что, если бы это был TwitterHeart, я бы хотел, чтобы сердце отображалось, а затем при касании воспроизводилось и показывалась анимация заливки + взрыва. - person Jason Tremain; 17.02.2020

arrow_upward
1
arrow_downward

Покопавшись глубже в документации Lottie, я увидел, что там был закомментированный код, показывающий, как реализовать анимированную кнопку. Я отредактировал приведенный выше код в LottieButton, чтобы настроить кнопку, а затем я смог разместить ее в представлении и заставить ее анимироваться при нажатии. Я отредактировал код вверху, чтобы показать, как он работает.

person Jason Tremain    schedule 17.02.2020