loop pulse

mountrcg · May 16, 2024 · 9e28ebf · 9e28ebf
1 parent 231ceb8
commit 9e28ebf
Showing 1 changed file with 48 additions and 40 deletions.
diff --git a/FreeAPS/Sources/Modules/Home/View/Header/LoopView.swift b/FreeAPS/Sources/Modules/Home/View/Header/LoopView.swift
@@ -37,17 +37,19 @@ struct LoopView: View {
         return formatter
     }
 
+    let rect = CGRect(x: 0, y: 0, width: 27, height: 27)
+
     var body: some View {
         VStack(alignment: .center) {
             ZStack {
                 if isLooping {
-                    PulsatingCircleView(color: color)
-                    /* ProgressView() */
+                    CircleProgress()
                 } else {
                     Circle()
-                        .strokeBorder(color, lineWidth: 4.5)
-                        .frame(width: 27, height: 27)
+                        .strokeBorder(color, lineWidth: 5)
+                        .frame(width: rect.width, height: rect.height, alignment: .center)
                         .scaleEffect(1)
+                        .mask(mask(in: rect).fill(style: FillStyle(eoFill: true)))
                 }
             }
             if isLooping {
@@ -111,48 +113,54 @@ struct LoopView: View {
     }
 }
 
-/* extension View {
-     func animateForever(
-         using animation: Animation = Animation.easeInOut(duration: 1),
-         autoreverses: Bool = false,
-         _ action: @escaping () -> Void
-     ) -> some View {
-         let repeated = animation.repeatForever(autoreverses: autoreverses)
-
-         return onAppear {
-             withAnimation(repeated) {
-                 action()
-             }
-         }
-     }
- } */
-
-struct PulsatingCircleView: View {
-    var color: Color
-    var size: CGFloat = 20.0
-    @State private var animate = false
+struct CircleProgress: View {
+    @State private var rotationAngle = 0.0
+    @State private var pulse = false
+
+    private var backgroundGradient: AngularGradient {
+        AngularGradient(
+            gradient: Gradient(colors: [
+                Color(red: 0.262745098, green: 0.7333333333, blue: 0.9137254902),
+                Color(red: 0.3411764706, green: 0.6666666667, blue: 0.9254901961),
+                Color(red: 0.4862745098, green: 0.5450980392, blue: 0.9529411765),
+                Color(red: 0.6235294118, green: 0.4235294118, blue: 0.9803921569),
+                Color(red: 0.7215686275, green: 0.3411764706, blue: 1),
+                Color(red: 0.6235294118, green: 0.4235294118, blue: 0.9803921569),
+                Color(red: 0.4862745098, green: 0.5450980392, blue: 0.9529411765),
+                Color(red: 0.3411764706, green: 0.6666666667, blue: 0.9254901961),
+                Color(red: 0.262745098, green: 0.7333333333, blue: 0.9137254902)
+            ]),
+            center: .center,
+            startAngle: .degrees(rotationAngle),
+            endAngle: .degrees(rotationAngle + 360)
+        )
+    }
+
+    let timer = Timer.publish(every: 0.03, on: .main, in: .common).autoconnect()
 
     var body: some View {
         ZStack {
-//            Circle()
-//                .fill(color)
-//                .frame(width: 27, height: 27)
-//                .scaleEffect(animate ? 0.6 : 1.2)
-//                .animation(
-//                    Animation.easeInOut(duration: 1).repeatForever(autoreverses: true),
-//                    value: animate
-//                )
             Circle()
-                .fill(backgroundGradient)
-                .frame(width: 27, height: 27)
-                .scaleEffect(animate ? 0.0 : 1.2)
+                .trim(from: 0, to: 1)
+                .stroke(backgroundGradient, style: StrokeStyle(lineWidth: pulse ? 13 : 5))
+                .scaleEffect(pulse ? 0.6 : 1)
                 .animation(
-                    Animation.easeInOut(duration: 2).repeatForever(autoreverses: true),
-                    value: animate
+                    Animation.easeInOut(duration: 2.5).repeatForever(autoreverses: true),
+                    value: pulse
                 )
+                .onReceive(timer) { _ in
+                    rotationAngle = (rotationAngle + 10).truncatingRemainder(dividingBy: 360)
+                }
+                .onAppear {
+                    self.pulse = true
+                }
         }
-        .onAppear {
-            self.animate = true
-        }
+        .frame(width: 27, height: 27)
+    }
+}
+
+struct CircleProgress_Previews: PreviewProvider {
+    static var previews: some View {
+        CircleProgress()
     }
 }