Feature motion animation

HikeApp.xcodeproj/project.pbxproj

@@ -16,6 +16,8 @@
 		F4A0A8842C1F800B003AFEA1 /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F4A0A8832C1F800B003AFEA1 /* ContentView.swift */; };
 		F4A0A8862C1F800D003AFEA1 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = F4A0A8852C1F800D003AFEA1 /* Assets.xcassets */; };
 		F4A0A8892C1F800D003AFEA1 /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = F4A0A8882C1F800D003AFEA1 /* Preview Assets.xcassets */; };
+		F4AEFF7B2C2CB68900331CAF /* CustomCircleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F4AEFF7A2C2CB68900331CAF /* CustomCircleView.swift */; };
+		F4AEFF7D2C2CB7E000331CAF /* MotionAnimationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F4AEFF7C2C2CB7E000331CAF /* MotionAnimationView.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -29,6 +31,8 @@
 		F4A0A8832C1F800B003AFEA1 /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
 		F4A0A8852C1F800D003AFEA1 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		F4A0A8882C1F800D003AFEA1 /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
+		F4AEFF7A2C2CB68900331CAF /* CustomCircleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomCircleView.swift; sourceTree = "<group>"; };
+		F4AEFF7C2C2CB7E000331CAF /* MotionAnimationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MotionAnimationView.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -48,6 +52,8 @@
 				F43259AE2C22279E00F258E5 /* CardView.swift */,
 				F4610AD32C28B67A0095D75F /* CustomBackgroundView.swift */,
 				F4610AD82C28BE7A0095D75F /* CustomButtonView.swift */,
+				F4AEFF7A2C2CB68900331CAF /* CustomCircleView.swift */,
+				F4AEFF7C2C2CB7E000331CAF /* MotionAnimationView.swift */,
 			);
 			path = Component;
 			sourceTree = "<group>";
@@ -169,10 +175,12 @@
 			buildActionMask = 2147483647;
 			files = (
 				F4A0A8842C1F800B003AFEA1 /* ContentView.swift in Sources */,
+				F4AEFF7B2C2CB68900331CAF /* CustomCircleView.swift in Sources */,
 				F43259AF2C22279E00F258E5 /* CardView.swift in Sources */,
 				F4A0A8822C1F800B003AFEA1 /* HikeApp.swift in Sources */,
 				F4610AD42C28B67A0095D75F /* CustomBackgroundView.swift in Sources */,
 				F4610ADB2C28CA730095D75F /* GradientButtonStyle.swift in Sources */,
+				F4AEFF7D2C2CB7E000331CAF /* MotionAnimationView.swift in Sources */,
 				F4610AD72C28B78C0095D75F /* ColorExtension.swift in Sources */,
 				F4610AD92C28BE7A0095D75F /* CustomButtonView.swift in Sources */,
 			);

HikeApp/Component/CardView.swift

@@ -80,18 +80,7 @@ struct CardView: View {
                 // MARK: - MAIN CONTENT
 
                 ZStack {
-                    Circle()
-                        .fill(
-                            LinearGradient(
-                                colors: [
-                                    .colorIndigoMedium,
-                                    .colorSalmonLight
-                                ],
-                                startPoint: .topLeading,
-                                endPoint: .bottomTrailing
-                            )
-                        )
-                        .frame(width: 256, height: 256)
+                    CustomCircleView()
 
                     Image("image-\(imageNumber)")
                         .resizable()

HikeApp/Component/CustomCircleView.swift

@@ -0,0 +1,41 @@
+//
+//  CustomCircleView.swift
+//  HikeApp
+//
+//  Created by Dorian Emenir on 26/06/2024.
+//
+
+import SwiftUI
+
+struct CustomCircleView: View {
+    @State private var isAnimateGradient: Bool = false
+
+    var body: some View {
+        ZStack {
+            Circle()
+                .fill(
+                    LinearGradient(
+                        colors: [
+                            .colorIndigoMedium,
+                            .colorSalmonLight
+                        ],
+                        startPoint: isAnimateGradient ? .topLeading : .bottomLeading,
+                        endPoint: isAnimateGradient ? .bottomTrailing : .topTrailing
+                    )
+                )
+                .onAppear {
+                    withAnimation(.linear(duration: 3.0).repeatForever(autoreverses: true)) {
+                        isAnimateGradient.toggle()
+                    }
+                }
+
+            MotionAnimationView()
+
+        } //: ZSTACK
+        .frame(width: 256, height: 256)
+    }
+}
+
+#Preview {
+    CustomCircleView()
+}

HikeApp/Component/MotionAnimationView.swift

@@ -0,0 +1,79 @@
+//
+//  MotionAnimationView.swift
+//  HikeApp
+//
+//  Created by Dorian Emenir on 26/06/2024.
+//
+
+import SwiftUI
+
+struct MotionAnimationView: View {
+    // MARK: PROPERTIES
+
+    @State private var randomCircle: Int = Int.random(in: 6...12)
+    @State private var isAnimating: Bool = false
+
+    // MARK: FUNCTIONS
+
+    // 1. RANDOM COORDINATE
+    func randomCoordinate() -> CGFloat {
+        return CGFloat.random(in: 0...256)
+    }
+
+    // 2. RANDOM SIZE
+    func randomSize() -> CGFloat {
+        return CGFloat(Int.random(in: 4...80))
+    }
+
+    // 3. RANDOM SCALE
+    func randomScale() -> CGFloat {
+        return CGFloat(Double.random(in: 0.1...2.0))
+    }
+
+    // 4. RANDOM SPEED
+    func randomSpeed() -> Double {
+        return Double.random(in: 0.05...1.0)
+    }
+
+    // 5. RANDOM DELAY
+    func randomDelay() -> Double {
+        return Double.random(in: 0...2)
+    }
+
+    var body: some View {
+        ZStack {
+            ForEach(0...randomCircle, id: \.self) { item in
+                Circle()
+                    .foregroundStyle(.white)
+                    .opacity(0.25)
+                    .frame(width: randomSize())
+                    .position(
+                        x: randomCoordinate(),
+                        y: randomCoordinate()
+                    )
+                    .scaleEffect(isAnimating ? randomScale() : 1)
+                    .onAppear(perform: {
+                        withAnimation(
+                            .interpolatingSpring(stiffness: 0.5, damping: 0.5)
+                            .repeatForever()
+                            .speed(randomSpeed())
+                            .delay(randomDelay())
+                        ) {
+                        isAnimating = true
+                        }
+                    })
+            }
+        } //: ZSTACK
+        .frame(width: 256, height: 256)
+        .mask(Circle())
+        .drawingGroup()
+    }
+}
+
+#Preview {
+    MotionAnimationView()
+        .background(
+            Circle()
+                .fill(.teal)
+        )
+}