如何制作 Lottie 动画循环
How to make a Lottie animation loop
通过赋予 Lottie 自己的视图,我已经成功地将 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)
}
}
您可以为播放调用设置循环行为。在 makeUIView(context:)
中添加此代码
animationView.loopMode = .loop
通过赋予 Lottie 自己的视图,我已经成功地将 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)
}
}
您可以为播放调用设置循环行为。在 makeUIView(context:)
animationView.loopMode = .loop