ios 在导航视图中制作进度视图样式的动画

lb3vh1jj  于 2023-01-18  发布在  iOS
关注(0)|答案(1)|浏览(120)

让我们创建一个简单的自定义"无限"微调器。
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
                    }
                }
        }
    }
}
iklwldmw

iklwldmw1#

可以将.onAppear替换为.task,以便在单独的上下文中启动动画,而不会与其它未关联的布局事件混淆。

相关问题