【问题标题】:How to make a Lottie animation loop如何制作 Lottie 动画循环
【发布时间】:2020-10-16 10:50:39
【问题描述】:

我已经成功地将 Lottie 应用到我的程序中,并赋予它自己的视图。虽然调用过一次,但动画只播放一次。我要怎么做才能让动画循环播放?

LottieView(用 Lottie 查看):

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    typealias UIViewType = UIView
    var filename: String
    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)
        
        let animationView = AnimationView()
        let animation = Animation.named(filename)
        animationView.animation = animation
        animationView.contentMode = .scaleAspectFit
        animationView.play()
        
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(animationView)
        
        NSLayoutConstraint.activate([
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor), animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
        ])
        
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
        
    }
    
    
    
    
}

ContentView 中的当前实现:

     HStack {
            
            if isScroll {
                LottieView(filename: "swipeLeft").frame(width: 200, height: 200)
                        .padding(.top, 500)
                        .padding(.leading, 100)
                       
                                 }
            Spacer()
        Button(action: {
           SCLAlertView().showInfo("How to use:", subTitle: "Scroll across the screen to view panels. Then press on a panel to view more information.")
        }) {
            Image(systemName: "info.circle")
            .padding(.trailing, 5)
                .padding(.top, 400)
                       
        }
        
    
        }

【问题讨论】:

  • 您需要一个修饰符,将loopMode 属性设置为.loop 以用于您的AnimationView 类型视图。

标签: swift swiftui lottie


【解决方案1】:

您可以为播放调用设置循环行为。在makeUIView(context:)中添加这段代码

animationView.loopMode = .loop

【讨论】:

    猜你喜欢
    • 2022-08-16
    • 1970-01-01
    • 2020-08-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-01
    • 2011-12-24
    • 1970-01-01
    相关资源
    最近更新 更多