UNT-T11872 progress view animation

Author: mansi-prajapati-simformsolutions

SSSwiftUIAnimations/SSSwiftUIAnimations/ProgressAnimation/ArrowView.swift

@@ -0,0 +1,70 @@
+//
+//  ArrowView.swift
+//  SSSwiftUIAnimations
+//
+//  Created by Mansi Prajapati on 15/05/24.
+//
+
+import SwiftUI
+
+struct Arrow: View {
+    
+    // MARK: - Variables
+    var arrowStyle: ArrowViewParams
+    var style: SSProgressViewStyle
+    @Binding var progress: Float
+    
+    var body: some View {
+        VStack(spacing: 0) {
+            
+            // Vertical line of arrow
+            RoundedRectangle(cornerRadius: style.circleStrokeWidth/2)
+                .frame(
+                    width: arrowStyle.isAnimating ? style.circleStrokeWidth : style.arrowStrokeWidth + 1,
+                    height: arrowStyle.isAnimating ? (!arrowStyle.animationStarted ? style.circleStrokeWidth : style.circleStrokeWidth ) : style.circleSize * 0.40
+                )
+                .opacity(arrowStyle.showVerticalLine ? 1 : 0)
+                .foregroundColor(style.arrowColor)
+                .offset(y: arrowStyle.isAnimating ? (!arrowStyle.animationStarted ? -5 : -(style.circleSize/2)) : 0)
+                .animation(Animation.linear.speed(!arrowStyle.animationStarted ? 100 : .zero), value: 0)
+            
+            if progress < 0.1 {
+                
+                // if progress is less than 0.1 then showing down arrow animation
+                DownArrow(
+                    initialAnim: arrowStyle.initialAnim,
+                    isDownward: arrowStyle.isDownward,
+                    progress: Float(progress),
+                    circleSize: style.circleSize,
+                    isAnimating: arrowStyle.isAnimating
+                )
+                .stroke(style: StrokeStyle(lineWidth: style.arrowStrokeWidth, lineCap: .round))
+                .frame(width: 10, height: 50)
+                .padding(.top, -50)
+                .offset(y: arrowStyle.isAnimating ? 22 : .zero)
+                .foregroundColor(style.arrowColor)
+                .scaleEffect(CGSize(width:  1, height: arrowStyle.isAnimating ? 1 : style.circleSize * 0.005))
+            } else if progress >= 0.1 && progress < 1.0 {
+                
+                // if progress is between >= 0.1 and < 1.0 starting wave animation
+                WaveView(
+                    progress: $progress,
+                    arrowStrokeWidth: style.arrowStrokeWidth,
+                    width: style.circleSize
+                )
+                .frame(width: 10, height: 30)
+                .foregroundColor(style.arrowColor)
+            } else if progress >= 1.0 {
+                
+                // if progress completed showing check mark
+                CheckView(
+                    width: style.circleSize,
+                    arrowStrokeWidth: style.arrowStrokeWidth
+                )
+                .padding(.top, -11)
+                .offset(y: 22)
+                .foregroundColor(style.arrowColor)
+            }
+        }
+    }
+}

SSSwiftUIAnimations/SSSwiftUIAnimations/ProgressAnimation/CheckView.swift

@@ -0,0 +1,103 @@
+//
+//  CheckView.swift
+//  SSSwiftUIAnimations
+//
+//  Created by Mansi Prajapati on 16/04/24.
+//
+
+import SwiftUI
+
+struct CheckView: View {
+    
+    // MARK: - Variables
+    
+    // For drawing straight line before check mark
+    @State private var x = 0.92
+    @State private var y = 2.5
+    
+    // Width of line and check mark
+    @State var width: CGFloat = 0
+
+    // For scale and offset of check mark
+    @State private var size: CGFloat = 0
+    @State private var isAnimating = false
+    @State private var straight: CGFloat = 0
+    @State private var offset = 0
+    
+    var arrowStrokeWidth: CGFloat
+    
+    var body: some View {
+        ZStack(alignment:.center) {
+            VStack {
+                Check(endPoint: CGPoint(
+                    x: isAnimating ? 0.3 : x,
+                    y: isAnimating ? 4.5 : y),
+                    height: size,
+                    stright: straight)
+                .stroke(style: StrokeStyle(lineWidth: isAnimating ? arrowStrokeWidth / (size * 0.01) : arrowStrokeWidth, lineCap: .round))
+                .frame(width: width * 0.57, height: 105)
+                .offset(CGSize(width: 0, height: isAnimating ? offset : 0))
+            }.scaleEffect(
+                CGSize(
+                    width: isAnimating ? size * 0.01 : 1,
+                    height: isAnimating ? size * 0.01 : 1
+                ), anchor: .center
+            )
+        }.onAppear() {
+            size = width
+            offset = size <= 150 ? -10 : -1
+            
+            // For changing width once it turns from line to check mark
+            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
+                withAnimation(.linear(duration: 0.5)) {
+                    isAnimating = true
+                    width = 65
+                }
+            }
+            
+            // For increasing the Y of check mark
+            DispatchQueue.main.asyncAfter(deadline: .now() + 1.1) {
+                straight = 18.0
+            }
+        }
+    }
+}
+
+struct Check: Shape {
+    
+    // MARK: - Variables
+    var endPoint: CGPoint
+    var height: CGFloat
+    var stright: CGFloat
+    
+    // MARK: - Animatable data
+    var animatableData: AnimatablePair<CGFloat, CGFloat> {
+        get { AnimatablePair(endPoint.x, endPoint.y) }
+        set {
+            endPoint.x = newValue.first
+            endPoint.y = newValue.second
+        }
+    }
+    
+    func path(in rect: CGRect) -> Path {
+        let rightLine = height < 150 ? 1.07 : 1.10
+        let start = CGPoint(
+            x: rect.midX * 0.23,
+            y: rect.midY - 21 * endPoint.x - 0.2
+        )
+        let end = CGPoint(
+            x: rect.maxX/2,
+            y: rect.maxY * endPoint.y / 8
+        )
+        let start2 = CGPoint(
+            x: rect.maxX/rightLine,
+            y: rect.midY - 21 * endPoint.x - stright
+        )
+        var path = Path()
+        path.move(to: start)
+        path.addLine(to: end)
+        path.move(to: start2)
+        path.addLine(to: end)
+        return path
+    }
+}

SSSwiftUIAnimations/SSSwiftUIAnimations/ProgressAnimation/DownArrow.swift

@@ -0,0 +1,69 @@
+//
+//  DownArrow.swift
+//  SSSwiftUIAnimations
+//
+//  Created by Mansi Prajapati on 06/05/24.
+//
+
+import SwiftUI
+
+struct DownArrow: Shape {
+    
+    // MARK: - Variables
+    var initialAnim: CGFloat
+    var isDownward: Bool
+    var progress: Float
+    var circleSize: CGFloat
+    var isAnimating: Bool
+    
+    // MARK: - Animatable Data
+    var animatableData: CGFloat {
+        get { initialAnim }
+        set { initialAnim = newValue }
+    }
+    
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        let startX = rect.midX - circleSize * (isAnimating ? 0.12 : 0.13)
+        let endX = rect.midX + circleSize *  (isAnimating ? 0.12 : 0.12)
+        let centerY = rect.midY
+        var controlY: CGFloat
+        
+        if isDownward {
+            controlY = centerY + (initialAnim * (rect.height / 2))
+        } else {
+            let bounceProgress = bounce(initialAnim)
+            controlY = centerY - (bounceProgress * (rect.height / 4))
+        }
+        
+        let controlX = rect.midX
+        path.move(to: CGPoint(x: startX, y: centerY))
+        
+        if !isDownward {
+            // Curve for bounce effect
+            path.move(to: CGPoint(x: startX - circleSize * 0.1, y: centerY))
+            path.addQuadCurve(
+                to: CGPoint(x: rect.maxX + circleSize * 0.21, y: centerY),
+                control: CGPoint(x: controlX, y: controlY)
+            )
+        } else if initialAnim <= 1.0 {
+            // Down arrow
+            path.addLine(to: CGPoint(x: rect.midX, y: controlY))
+            path.addLine(to: CGPoint(x: endX, y: centerY))
+        } else if progress < 0.1 {
+            // Straight line
+            path.move(to: CGPoint(x: startX - circleSize * 0.1, y: centerY))
+            path.addLine(to: CGPoint(x: rect.maxX + circleSize * 0.21, y: centerY))
+        }
+        return path
+    }
+    
+    // MARK: - Private functions
+    
+    // Function to apply bounce effect
+    private func bounce(_ progress: CGFloat) -> CGFloat {
+        let numberOfBounces = 2
+        let bounces = CGFloat(numberOfBounces)
+        return abs((circleSize * 0.01 - progress) * sin(progress * .pi * bounces))
+    }
+}

SSSwiftUIAnimations/SSSwiftUIAnimations/ProgressAnimation/ExampleProgressView.swift

@@ -0,0 +1,39 @@
+//
+//  ExampleProgressView.swift
+//  SSSwiftUIAnimations
+//
+//  Created by Mansi Prajapati on 17/05/24.
+//
+
+import SwiftUI
+
+struct ExampleProgressView: View {
+    
+    // MARK: - Variables
+    @State private var progress: Float = 0.0
+    @State var timer: Timer?
+    
+    var body: some View {
+            VStack {
+                SSProgressView(progress: $progress, style: SSProgressViewStyle(circleSize: 200, circleStrokeWidth: 5, arrowStrokeWidth: 5, progressTextColor: .pink, fillStrokeColor: .blue, arrowColor: .blue, allowCancelProgress: true), onProgressViewClick: {
+                    simulateDownloadProgress()
+                }, onProgressCompletion: {
+                    timer?.invalidate()
+                }, onCancelProgress: {
+                    progress = 0.0
+                    timer?.invalidate()
+                })
+        }.navigationBarTitle("ProgressView Example", displayMode: .inline)
+    }
+    
+    // MARK: - Private functions
+    private func simulateDownloadProgress() {
+        timer = Timer.scheduledTimer(withTimeInterval: 0.2, repeats: true) { timer in
+            if progress >= 1.0 {
+                timer.invalidate()
+            } else {
+                progress += 0.01
+            }
+        }
+    }
+}

SSSwiftUIAnimations/SSSwiftUIAnimations/ProgressAnimation/ModelClass.swift

@@ -0,0 +1,93 @@
+//
+//  ModelClass.swift
+//  SSSwiftUIAnimations
+//
+//  Created by Mansi Prajapati on 14/05/24.
+//
+
+import SwiftUI
+
+struct SSProgressViewStyle {
+    var circleSize: CGFloat
+    var circleStrokeWidth: CGFloat
+    var arrowStrokeWidth: CGFloat
+    var fontSize: CGFloat
+    var fontWeight: Font.Weight
+    var progressTextColor: Color
+    var emptyStrokeColor: Color
+    var fillStrokeColor: Color
+    var arrowColor: Color
+    var allowCancelProgress: Bool
+    
+    init(
+         circleSize: CGFloat = 200.0,
+         circleStrokeWidth: CGFloat = 5.0,
+         arrowStrokeWidth: CGFloat = 5.0,
+         fontSize: CGFloat = 15.0,
+         fontWeight: Font.Weight = .regular,
+         progressTextColor: Color = Color.blue,
+         emptyStrokeColor: Color = Color.blue.opacity(0.2),
+         fillStrokeColor: Color = Color.blue,
+         arrowColor: Color = Color.blue,
+         allowCancelProgress: Bool = false
+    ) {
+        
+        // Circle size
+        self.circleSize =  max(circleSize, 100)
+        
+        // Circle stroke width
+        self.circleStrokeWidth = circleStrokeWidth
+        
+        // Arrow stroke width
+        self.arrowStrokeWidth = arrowStrokeWidth
+        
+        // Progress text font size
+        self.fontSize = fontSize
+        
+        // Progress text fontWeight
+        self.fontWeight = fontWeight
+        
+        // Color of progress text percentage
+        self.progressTextColor = progressTextColor
+        
+        // Circle's empty stroke's color
+        self.emptyStrokeColor = emptyStrokeColor
+        
+        // Circle's fill stroke's color
+        self.fillStrokeColor = fillStrokeColor
+        
+        // Arrow color
+        self.arrowColor = arrowColor
+        
+        // want to allow cancellation of progress or not
+        self.allowCancelProgress = allowCancelProgress
+    }
+}
+
+struct ArrowViewParams {
+    var isAnimating: Bool
+    var initialAnim: CGFloat
+    var isDownward: Bool
+    var animationStarted: Bool
+    var showVerticalLine: Bool
+    var showPercent: Bool
+    
+    init(
+         isAnimating: Bool = false,
+         progress: Double = 0.0,
+         doneAnimating: Bool = false,
+         initialAnim: CGFloat = 1.0,
+         isDownward: Bool = true,
+         animationStarted: Bool = true,
+         showVerticalLine: Bool = true,
+         showPercent: Bool = false
+    ) {
+        self.isAnimating = isAnimating
+        self.initialAnim = initialAnim
+        self.isDownward = isDownward
+        self.animationStarted = animationStarted
+        self.showVerticalLine = showVerticalLine
+        self.showPercent = showPercent
+    }
+}
+