如何用SwiftUI实现圆形无限旋转?

snz8szmq  于 2022-10-23  发布在  Swift
关注(0)|答案(1)|浏览(317)

我不能在环形路径上旋转绿色部分。我想动态设置无限时间。我为ProgressView创建了一个结构,并希望在我的项目中将其设置为ProgressView。

如何在旋转路径中实现红黑颜色曲线的设计

struct CircularProgressView: View {
        @State var progressValue: Float = 0.0

        var body: some View {
            ZStack {

                    ProgressBar(progress: self.$progressValue)
                        .frame(width: 150.0, height: 150.0)
                        .padding(40.0)

                }.onAppear{
                    self.incrementProgress()

                }

        }
        func incrementProgress() {
            let randomValue = Float([0.012, 0.022, 0.034, 0.016, 0.11, 0.012].randomElement()!)
            self.progressValue += randomValue
        }

    }
    struct ProgressBar: View {
        @Binding var progress: Float

        var body: some View {
            ZStack {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(Color.red)

                Circle()
                    .trim(from: 0.0, to: CGFloat(min(self.progress, 2.0)))
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(Color.green)
                    .rotationEffect(Angle(degrees: 270))    
                    .animation(.linear)

            }
        }
    }

这是预览结构。

struct CircularProgressView_Previews: PreviewProvider {
        static var previews: some View {
            CircularProgressView()
        }
    }

先谢谢你帮了我。

14ifxucb

14ifxucb1#

struct CircularProgressView: View {
    @State var progressValue: Float = 0.0
    @State private var isLoaderVisible: Bool = false
    var degree = 90

    var body: some View {
        ZStack {

                ProgressBar(progress: self.$progressValue)
                    .frame(width: 150.0, height: 150.0)
                    .padding(40.0)

        }.overlay(LoaderView(showLoader: isLoaderVisible))
            .onAppear {
                isLoaderVisible.toggle()
            }

    }

}
struct ProgressBar: View {
    @Binding var progress: Float
     @State var degree:Double = 90
    var body: some View {
        ZStack {
            Circle()
                .stroke(lineWidth: 20.0)
                .foregroundColor(Color.green)
        }
    }
}
struct CircularProgressView_Previews: PreviewProvider {
    static var previews: some View {
        CircularProgressView()
    }
}

//LoaderView的枚举

public enum LoaderAnimation {
    case low, medium, high

    var animationSpeed: Double {
        switch self {
            case .low: return 1.0
            case .medium: return 0.8
            case .high: return 10.2
        }
    }
}

这是我们在叠加和动画上设置的LoaderView

public struct LoaderView: View {

    var loaderAnimationSpeed: LoaderAnimation? = .high
    var showLoader: Bool = false

    public var body: some View {
        GeometryReader { reader in
            ZStack {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(Color.yellow)

                Circle()
                    .trim(from: 0.6, to: 1)
                    .stroke(.green, lineWidth: 20)
                    .rotationEffect(.degrees(showLoader ? 360 : 0))
                    .animation(Animation.easeInOut(duration: showLoader ? loaderAnimationSpeed?.animationSpeed ?? 0.0 : 1).repeatForever(autoreverses: false), value: showLoader)
            }
        }
    }

    public init( loaderAnimationSpeed: LoaderAnimation? = .medium, showLoader: Bool) {
        self.loaderAnimationSpeed = loaderAnimationSpeed
        self.showLoader = showLoader
    }
}

相关问题