SwiftUI + Lott ie iOS - Play Animation OnTapGesture - PullRequest
Новая
       60

SwiftUI + Lott ie iOS - Play Animation OnTapGesture

0 голосов
/ 17 февраля 2020

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

Ответы [ 2 ]

1 голос
/ 17 февраля 2020

Если вы хотите, чтобы файл lottie отображался только при нажатии кнопки, вы можете установить переключатель @State и показать свой лот ie при переключении переменной.

Пример кода: 


 @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")
                }
            }
        }
    }
0 голосов
/ 17 февраля 2020

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

...