让我们创建一个简单的自定义"无限"微调器。
SwiftUI提供ProgressView
作为原型容器,ProgressViewStyle
作为定制进度表示方式的一种方法。
要使微调器无限旋转,我们将使用线性动画,永远重复它,从旋转效果0开始,并在微调器出现后立即将其移动到360度。
简单!
现在让我们把它放在一个NavigationView
中:🔥:
我们看到微调器在旋转时上下跳动。有什么线索吗?或者如何解决这个问题(同时保持对基本原理的尊重,例如ProgressView
显示进度,ProgressViewStyle
自定义它)?
struct SimplePreview: PreviewProvider, View {
static var previews = Self()
@State
private var isAnimating = false
var body: some View {
NavigationView {
ProgressView().progressViewStyle(SymbolicStyle())
}
}
public struct SymbolicStyle: ProgressViewStyle {
@State
private var isAnimating = false
public func makeBody(configuration: Configuration) -> some View {
Image(systemName: "circle.hexagonpath.fill")
.rotationEffect(self.isAnimating ? .degrees(360) : .zero)
.onAppear {
withAnimation(.linear(duration: 1).repeatForever(autoreverses: false)) {
self.isAnimating = true
}
}
}
}
}
1条答案
按热度按时间iklwldmw1#
可以将
.onAppear
替换为.task
,以便在单独的上下文中启动动画,而不会与其它未关联的布局事件混淆。