-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #11 from SimformSolutionsPvtLtd/feature/UNT-T26889…
…-Water_effect_animation UNT-T26889 - Add Water Effect Progress Animation View
- Loading branch information
Showing
10 changed files
with
547 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
SSSwiftUIAnimations/Examples/ExampleWaterProgressView.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| // | ||
| // ExampleWaterProgressView.swift | ||
| // SSSwiftUIAnimations | ||
| // | ||
| // Created by Rahul Yadav on 09/07/24. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct ExampleWaterProgressView: View { | ||
|
|
||
| // MARK: - Variables | ||
| @State private var progress: Double = 0.0 | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| SSWaterProgressView(progress: $progress, | ||
| showPercent: true, | ||
| style: SSWaterProgressViewStyle( | ||
| circleSize: 200, | ||
| circleStrokeWidth: 10, | ||
| progressFont: .system(size: 16, weight: .bold), | ||
| progressTextColor: .black, | ||
| emptyStrokeColor: .cyan.opacity(0.2), | ||
| fillStrokeColor: .cyan, | ||
| waterColor: .mint, | ||
| showBubbles: true, | ||
| bubbleColor: .white, | ||
| checkMarkImg: "checkmark", | ||
| checkMarkImgColor: .white | ||
| ), | ||
| onProgressCompletion: { print("Progress Completed") }) | ||
| Spacer() | ||
| .frame(height: 40) | ||
| Slider(value: $progress) { | ||
| Text("Slide to manage progress") | ||
| } | ||
| .frame(width: 150, alignment: .bottom) | ||
| } | ||
| .customToolbar(title: "Water ProgressView Example", fontSize: 17) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| ExampleWaterProgressView() | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
SSSwiftUIAnimations/Sources/WaterProgressAnimation/BubbleView.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| // | ||
| // BubbleView.swift | ||
| // SSSwiftUIAnimations | ||
| // | ||
| // Created by Rahul Yadav on 15/07/24. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| /// Create a view with Bubbles used in animation | ||
| struct BubbleView: View { | ||
|
|
||
| // MARK: Variables | ||
|
|
||
| /// Used for styling the view | ||
| @State var style: SSWaterProgressViewStyle = SSWaterProgressViewStyle() | ||
|
|
||
| /// Initial Bubble Scale | ||
| @State private var scale : CGFloat = 1 | ||
|
|
||
| var body: some View { | ||
| if style.showBubbles { | ||
| ZStack { | ||
| // Number of bubbles | ||
| ForEach (1...10, id:\.self) { _ in | ||
| Circle() | ||
| .foregroundColor(style.bubbleColor.opacity(Double.random(in: 0.15...0.25))) | ||
| .scaleEffect(self.scale * .random(in: 0.5...1)) | ||
| .frame(width: .random(in: 1...25), | ||
| height: CGFloat.random (in: 20...25), | ||
| alignment: .center) | ||
| .position( | ||
| CGPoint( | ||
| x: .random(in: style.circleSize/4...style.circleSize/1.3), | ||
| y: .random (in: style.circleSize/5...style.circleSize/1.2) | ||
| ) | ||
| ) | ||
| } | ||
| } | ||
| .task { | ||
| withAnimation( | ||
| .spring (dampingFraction: 0.5) | ||
| .repeatForever() | ||
| .speed(.random(in: 0.1...0.15)) | ||
| .delay(.random(in: 0.01...0.1)) | ||
| ) { | ||
| self.scale = 1.2 // default circle scale | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| BubbleView() | ||
| } |
41 changes: 41 additions & 0 deletions
41
SSSwiftUIAnimations/Sources/WaterProgressAnimation/CheckmarkView.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| // | ||
| // CheckmarkView.swift | ||
| // SSSwiftUIAnimations | ||
| // | ||
| // Created by Rahul Yadav on 15/07/24. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct CheckmarkView: View { | ||
|
|
||
| // MARK: Variables | ||
|
|
||
| /// Decide weather to make checkmark visible or not | ||
| @State var displayCheckmark: Bool = false | ||
|
|
||
| /// Initial Zoom of Checkmark | ||
| @State private var zoom = 0.1 | ||
|
|
||
| /// Style for SSWaterProgress View | ||
| var style: SSWaterProgressViewStyle | ||
|
|
||
| var body: some View { | ||
| checkMarkImg | ||
| } | ||
|
|
||
| private var checkMarkImg: some View { | ||
| Image(systemName: style.checkMarkImg) | ||
| .resizable() | ||
| .frame(width: style.circleSize/3, height: style.circleSize/3) | ||
| .opacity(displayCheckmark ? 1 : 0) | ||
| .foregroundStyle(style.checkMarkImgColor) | ||
| .scaleEffect(zoom, anchor: .center) | ||
| .foregroundColor(.white) | ||
| .animation(.spring(dampingFraction: 0.4), value: displayCheckmark) | ||
| .onAppear() { | ||
| displayCheckmark.toggle() | ||
| zoom = 1.0 | ||
| } | ||
| } | ||
| } |
34 changes: 34 additions & 0 deletions
34
SSSwiftUIAnimations/Sources/WaterProgressAnimation/WaterCircleOutlineView.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| // | ||
| // WaterCircleOutlineView.swift | ||
| // SSSwiftUIAnimations | ||
| // | ||
| // Created by Rahul Yadav on 09/07/24. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct WaterCircleOutlineView: View { | ||
|
|
||
| // MARK: - Variables | ||
|
|
||
| /// Outline Progress value | ||
| @Binding var progress: Double | ||
|
|
||
| /// Used for styling the view | ||
| var style: SSWaterProgressViewStyle | ||
|
|
||
| var body: some View { | ||
| ZStack { | ||
| Circle() | ||
| .stroke(style.emptyStrokeColor, style: StrokeStyle(lineWidth: style.circleStrokeWidth, lineCap: .round)) | ||
| .frame(width: style.circleSize, | ||
| height: style.circleSize) | ||
| Circle() | ||
| .trim(from: 0.0, to: CGFloat(progress)) | ||
| .stroke(style.fillStrokeColor, style: StrokeStyle(lineWidth: style.circleStrokeWidth, lineCap: .round)) | ||
| .frame(width: style.circleSize, height: style.circleSize) | ||
| .rotationEffect(.degrees(-90)) | ||
| .transition(.slide) | ||
| } | ||
| } | ||
| } |
75 changes: 75 additions & 0 deletions
75
SSSwiftUIAnimations/Sources/WaterProgressAnimation/WaterCircleView.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| // | ||
| // WaterCircleView.swift | ||
| // SSSwiftUIAnimations | ||
| // | ||
| // Created by Rahul Yadav on 09/07/24. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct WaterCircleView: Shape { | ||
|
|
||
| // MARK: - Variables | ||
|
|
||
| /// Progress Value used to determine the height of water | ||
| var progress: Double | ||
|
|
||
| /// Initial Animation Start | ||
| var offset: Angle | ||
|
|
||
| /// Enabling Animation | ||
| var animatableData: Double { | ||
| get { offset.degrees } | ||
| set { offset = Angle(degrees: newValue) } | ||
| } | ||
|
|
||
| /** | ||
| Creates a path that represents a wave or a solid background, depending on the provided progress value. | ||
| - Parameters: | ||
| - rect: A CGRect object defining the rectangle within which the path will be created. | ||
| - Returns: | ||
| A Path object representing the wave or solid background. | ||
| This function generates a path suitable for drawing a wave or a solid rectangle within the given rectangle. It calculates the wave height and position based on the `progress` value (assumed to be a variable outside the function). | ||
| The path creation process involves the following steps: | ||
| 1. **Wave Parameters:** It defines the lowest and highest possible wave heights (`lowestWave` and `highestWave`). | ||
| 2. **Wave Height Calculation:** Calculates the normalized wave height (`newPercent`) based on `progress`, and then determines the wave's amplitude (`waveHeight`) and vertical position (`yOffSet`) within the rectangle. The Animation is of Wave style until progress is not 100% else it will be solid background. | ||
| 3. **Path Creation:** | ||
| - **Starting Point:** Sets the starting point on the top of the wave based on `yOffSet` and the initial sine value. | ||
| - **Wave Segments:** Iterates through angles to create line segments that represent the wave's shape. | ||
| - **Connecting Lines:** Connects the last wave point to the bottom-right corner and then to the bottom-left corner, completing the shape. | ||
| - **Closing the Path:** Closes the path by connecting the bottom-left corner back to the starting point. | ||
| - Note: This function relies on external variables `progress` and `offset`. | ||
| */ | ||
| func path(in rect: CGRect) -> Path { | ||
| var wavePath = Path() | ||
| let lowestWave = 0.02 | ||
| let highestWave = 1.00 | ||
|
|
||
| let newPercent = lowestWave + (highestWave - lowestWave) * (progress/100) | ||
|
|
||
| let waveHeight = progress == 100 ? 0 : 0.03 * rect.height | ||
| let yOffSet = CGFloat(1 - newPercent) * | ||
| (rect.height - 4 * waveHeight) + 2 * waveHeight | ||
| let startAngle = offset | ||
| let endAngle = offset + Angle(degrees: 360 + 10) | ||
|
|
||
| wavePath.move(to: CGPoint(x: 0, y: yOffSet + waveHeight * | ||
| CGFloat(sin(offset.radians)))) | ||
|
|
||
| for angle in stride(from: startAngle.degrees, through: endAngle.degrees, by: 5) { | ||
| let x = CGFloat((angle - startAngle.degrees) / 360) * rect.width | ||
| wavePath.addLine(to: CGPoint(x: x, y: yOffSet + waveHeight * CGFloat(sin(Angle(degrees: angle).radians)))) | ||
| } | ||
|
|
||
| wavePath.addLine(to: CGPoint(x: rect.width, y: rect.height)) | ||
| wavePath.addLine(to: CGPoint(x: 0, y: rect.height)) | ||
| wavePath.closeSubpath() | ||
| return wavePath | ||
| } | ||
| } |
30 changes: 30 additions & 0 deletions
30
SSSwiftUIAnimations/Sources/WaterProgressAnimation/WaterProgressTextView.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| // | ||
| // WaterProgressTextView.swift | ||
| // SSSwiftUIAnimations | ||
| // | ||
| // Created by Rahul Yadav on 16/07/24. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct WaterProgressTextView: View { | ||
|
|
||
| // MARK: - Variable | ||
|
|
||
| /// Decide weather to show percentage text or not | ||
| var showPercentage: Bool | ||
|
|
||
| /// Progress percent value | ||
| @Binding var progress: Double | ||
|
|
||
| /// For Styling text | ||
| var style: SSWaterProgressViewStyle | ||
|
|
||
| var body: some View { | ||
| if showPercentage { | ||
| Text("\(Int(progress * 100))%") | ||
| .font(style.progressFont) | ||
| .foregroundStyle(style.progressTextColor) | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.