From fb9da9209a09d0dc67a6ee0dfbd7c3cfbaeb20a8 Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Wed, 26 Jun 2024 22:58:15 +0200 Subject: [PATCH 01/12] =?UTF-8?q?Create:=20CustomCircleView=20&=20MotionAn?= =?UTF-8?q?imationView=20files=20=F0=9F=97=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp.xcodeproj/project.pbxproj | 8 ++++++++ HikeApp/Component/CustomCircleView.swift | 18 ++++++++++++++++++ HikeApp/Component/MotionAnimationView.swift | 18 ++++++++++++++++++ 3 files changed, 44 insertions(+) create mode 100644 HikeApp/Component/CustomCircleView.swift create mode 100644 HikeApp/Component/MotionAnimationView.swift diff --git a/HikeApp.xcodeproj/project.pbxproj b/HikeApp.xcodeproj/project.pbxproj index 5bd91de..905ef5e 100644 --- a/HikeApp.xcodeproj/project.pbxproj +++ b/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 = ""; }; F4A0A8852C1F800D003AFEA1 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; F4A0A8882C1F800D003AFEA1 /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = ""; }; + F4AEFF7A2C2CB68900331CAF /* CustomCircleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomCircleView.swift; sourceTree = ""; }; + F4AEFF7C2C2CB7E000331CAF /* MotionAnimationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MotionAnimationView.swift; sourceTree = ""; }; /* 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 = ""; @@ -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 */, ); diff --git a/HikeApp/Component/CustomCircleView.swift b/HikeApp/Component/CustomCircleView.swift new file mode 100644 index 0000000..3881c29 --- /dev/null +++ b/HikeApp/Component/CustomCircleView.swift @@ -0,0 +1,18 @@ +// +// CustomCircleView.swift +// HikeApp +// +// Created by Dorian Emenir on 26/06/2024. +// + +import SwiftUI + +struct CustomCircleView: View { + var body: some View { + Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/) + } +} + +#Preview { + CustomCircleView() +} diff --git a/HikeApp/Component/MotionAnimationView.swift b/HikeApp/Component/MotionAnimationView.swift new file mode 100644 index 0000000..9428e60 --- /dev/null +++ b/HikeApp/Component/MotionAnimationView.swift @@ -0,0 +1,18 @@ +// +// MotionAnimationView.swift +// HikeApp +// +// Created by Dorian Emenir on 26/06/2024. +// + +import SwiftUI + +struct MotionAnimationView: View { + var body: some View { + Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/) + } +} + +#Preview { + MotionAnimationView() +} From 817a5b98e9d6cc266a1c511e155fe586c2fca3fc Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Wed, 26 Jun 2024 22:58:45 +0200 Subject: [PATCH 02/12] =?UTF-8?q?Update:=20remove=20basic=20Circle()=20vie?= =?UTF-8?q?w=20=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/CardView.swift | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/HikeApp/Component/CardView.swift b/HikeApp/Component/CardView.swift index 46b4fbb..91b80d0 100644 --- a/HikeApp/Component/CardView.swift +++ b/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() From 5279b1cc50905880b3694caa7839c0fe9f3dd4e6 Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Wed, 26 Jun 2024 22:59:14 +0200 Subject: [PATCH 03/12] =?UTF-8?q?Create:=20a=20custom=20Circle()=20view=20?= =?UTF-8?q?with=20animation=20=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/CustomCircleView.swift | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/HikeApp/Component/CustomCircleView.swift b/HikeApp/Component/CustomCircleView.swift index 3881c29..39413fc 100644 --- a/HikeApp/Component/CustomCircleView.swift +++ b/HikeApp/Component/CustomCircleView.swift @@ -8,8 +8,26 @@ import SwiftUI struct CustomCircleView: View { + @State private var isAnimateGradient: Bool = false + var body: some View { - Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/) + 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() + } + } + .frame(width: 256, height: 256) } } From f99617c89e380b9c90120deb86f4a944f9fcc1f5 Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Wed, 26 Jun 2024 22:59:52 +0200 Subject: [PATCH 04/12] =?UTF-8?q?Create:=20MotionAnimationView=20file=20in?= =?UTF-8?q?=20order=20to=20add=20animation=20to=20the=20custom=20Circle()?= =?UTF-8?q?=20view=20=F0=9F=91=A8=F0=9F=8F=BB=E2=80=8D=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/MotionAnimationView.swift | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/HikeApp/Component/MotionAnimationView.swift b/HikeApp/Component/MotionAnimationView.swift index 9428e60..8999581 100644 --- a/HikeApp/Component/MotionAnimationView.swift +++ b/HikeApp/Component/MotionAnimationView.swift @@ -9,10 +9,19 @@ import SwiftUI struct MotionAnimationView: View { var body: some View { - Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/) + ZStack { + Circle() + .foregroundStyle(.white) + } //: ZSTACK + .frame(width: 256, height: 256) } } #Preview { - MotionAnimationView() + ZStack { + Color.teal + .ignoresSafeArea() + + MotionAnimationView() + } } From 9a58d5d91d47046dbd74c70a12d201f35909153e Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:04:35 +0200 Subject: [PATCH 05/12] =?UTF-8?q?Update:=20MotionAnimationView=20with=20mu?= =?UTF-8?q?ltiple=20steps=20to=20create=20randomly=20generated=20circles?= =?UTF-8?q?=20=F0=9F=91=B7=F0=9F=8F=BB=E2=80=8D=E2=99=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/MotionAnimationView.swift | 31 +++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/HikeApp/Component/MotionAnimationView.swift b/HikeApp/Component/MotionAnimationView.swift index 8999581..ccc2aca 100644 --- a/HikeApp/Component/MotionAnimationView.swift +++ b/HikeApp/Component/MotionAnimationView.swift @@ -8,10 +8,37 @@ import SwiftUI struct MotionAnimationView: View { + // MARK: PROPERTIES + + @State private var randomCircle: Int = Int.random(in: 6...12) + + // MARK: FUNCTIONS + + // 1. RANDOM COORDINATE + func randomCoordinate() -> CGFloat { + return CGFloat.random(in: 0...256) + } + + // 2. RANDOM SIZE + + // 3. RANDOM SCALE + + // 4. RANDOM SPEED + + // 5. RANDOM DELAY + + var body: some View { ZStack { - Circle() - .foregroundStyle(.white) + ForEach(0...randomCircle, id: \.self) { item in + Circle() + .foregroundStyle(.white) + .opacity(0.25) + .position( + x: randomCoordinate(), + y: randomCoordinate() + ) + } } //: ZSTACK .frame(width: 256, height: 256) } From ebc6317f1f2c1087b1c5156aa81545c41383cc78 Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:07:14 +0200 Subject: [PATCH 06/12] =?UTF-8?q?Update:=20add=20randomSize()=20function?= =?UTF-8?q?=20to=20randomly=20size=20the=20generated=20circles=20?= =?UTF-8?q?=F0=9F=91=A8=F0=9F=8F=BB=E2=80=8D=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/MotionAnimationView.swift | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/HikeApp/Component/MotionAnimationView.swift b/HikeApp/Component/MotionAnimationView.swift index ccc2aca..a092814 100644 --- a/HikeApp/Component/MotionAnimationView.swift +++ b/HikeApp/Component/MotionAnimationView.swift @@ -20,6 +20,9 @@ struct MotionAnimationView: View { } // 2. RANDOM SIZE + func randomSize() -> CGFloat { + return CGFloat(Int.random(in: 4...80)) + } // 3. RANDOM SCALE @@ -34,6 +37,7 @@ struct MotionAnimationView: View { Circle() .foregroundStyle(.white) .opacity(0.25) + .frame(width: randomSize()) .position( x: randomCoordinate(), y: randomCoordinate() From 0914888eca6e2bf2f642a9e5f3251e0ac96332c3 Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:12:51 +0200 Subject: [PATCH 07/12] =?UTF-8?q?Update:=20add=20isAnimation=20boolean=20t?= =?UTF-8?q?o=20set=20the=20animation=20for=20the=20circles=20=F0=9F=91=A8?= =?UTF-8?q?=F0=9F=8F=BB=E2=80=8D=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/MotionAnimationView.swift | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/HikeApp/Component/MotionAnimationView.swift b/HikeApp/Component/MotionAnimationView.swift index a092814..acd7955 100644 --- a/HikeApp/Component/MotionAnimationView.swift +++ b/HikeApp/Component/MotionAnimationView.swift @@ -11,6 +11,7 @@ struct MotionAnimationView: View { // MARK: PROPERTIES @State private var randomCircle: Int = Int.random(in: 6...12) + @State private var isAnimating: Bool = false // MARK: FUNCTIONS @@ -26,6 +27,7 @@ struct MotionAnimationView: View { // 3. RANDOM SCALE + // 4. RANDOM SPEED // 5. RANDOM DELAY @@ -42,6 +44,14 @@ struct MotionAnimationView: View { x: randomCoordinate(), y: randomCoordinate() ) + .onAppear(perform: { + withAnimation( + .interpolatingSpring(stiffness: 0.5, damping: 0.5) + .repeatForever() + ) { + isAnimating = true + } + }) } } //: ZSTACK .frame(width: 256, height: 256) From 494c23ed70b36c6d804fc5fc25fb74c2d48e0eb1 Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:19:09 +0200 Subject: [PATCH 08/12] =?UTF-8?q?Update:=20add=20randomSpeed()=20to=20rand?= =?UTF-8?q?omly=20modify=20the=20scale=20effect's=20speed=20=F0=9F=91=A8?= =?UTF-8?q?=F0=9F=8F=BB=E2=80=8D=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/MotionAnimationView.swift | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/HikeApp/Component/MotionAnimationView.swift b/HikeApp/Component/MotionAnimationView.swift index acd7955..1b9382e 100644 --- a/HikeApp/Component/MotionAnimationView.swift +++ b/HikeApp/Component/MotionAnimationView.swift @@ -26,9 +26,14 @@ struct MotionAnimationView: View { } // 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 @@ -44,10 +49,12 @@ struct MotionAnimationView: View { x: randomCoordinate(), y: randomCoordinate() ) + .scaleEffect(isAnimating ? randomScale() : 1) .onAppear(perform: { withAnimation( .interpolatingSpring(stiffness: 0.5, damping: 0.5) .repeatForever() + .speed(randomSpeed()) ) { isAnimating = true } From 84a586b3429d6f6618e7c2dd3172dee814b887f8 Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:21:59 +0200 Subject: [PATCH 09/12] =?UTF-8?q?Update:=20add=20randomDelay()=20function?= =?UTF-8?q?=20to=20randomly=20delay=20the=20circles=20animation=20?= =?UTF-8?q?=F0=9F=91=A8=F0=9F=8F=BB=E2=80=8D=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/MotionAnimationView.swift | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/HikeApp/Component/MotionAnimationView.swift b/HikeApp/Component/MotionAnimationView.swift index 1b9382e..a73bd09 100644 --- a/HikeApp/Component/MotionAnimationView.swift +++ b/HikeApp/Component/MotionAnimationView.swift @@ -36,7 +36,9 @@ struct MotionAnimationView: View { } // 5. RANDOM DELAY - + func randomDelay() -> Double { + return Double.random(in: 0...2) + } var body: some View { ZStack { @@ -55,6 +57,7 @@ struct MotionAnimationView: View { .interpolatingSpring(stiffness: 0.5, damping: 0.5) .repeatForever() .speed(randomSpeed()) + .delay(randomDelay()) ) { isAnimating = true } From b7179ebc8d8cf1c8c0ee55387412f1e25801ebb6 Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:24:42 +0200 Subject: [PATCH 10/12] =?UTF-8?q?Update:=20add=20MotionAnimationView()=20t?= =?UTF-8?q?o=20the=20Circle=20view=20=F0=9F=91=A8=F0=9F=8F=BB=E2=80=8D?= =?UTF-8?q?=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/CustomCircleView.swift | 35 ++++++++++++++---------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/HikeApp/Component/CustomCircleView.swift b/HikeApp/Component/CustomCircleView.swift index 39413fc..89408ca 100644 --- a/HikeApp/Component/CustomCircleView.swift +++ b/HikeApp/Component/CustomCircleView.swift @@ -11,23 +11,28 @@ struct CustomCircleView: View { @State private var isAnimateGradient: Bool = false var body: some View { - Circle() - .fill( - LinearGradient( - colors: [ - .colorIndigoMedium, - .colorSalmonLight - ], - startPoint: isAnimateGradient ? .topLeading : .bottomLeading, - endPoint: isAnimateGradient ? .bottomTrailing : .topTrailing + 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() + .onAppear { + withAnimation(.linear(duration: 3.0).repeatForever(autoreverses: true)) { + isAnimateGradient.toggle() + } } - } - .frame(width: 256, height: 256) + + MotionAnimationView() + + } //: ZSTACK + .frame(width: 256, height: 256) } } From aa23e270099e8357d87d155227c6a3f4c3161ecc Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:26:32 +0200 Subject: [PATCH 11/12] =?UTF-8?q?Add:=20mask=20modifier=20in=20order=20to?= =?UTF-8?q?=20contain=20the=20animation=20to=20the=20Circle()=20view=20?= =?UTF-8?q?=F0=9F=91=A8=F0=9F=8F=BB=E2=80=8D=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/MotionAnimationView.swift | 1 + 1 file changed, 1 insertion(+) diff --git a/HikeApp/Component/MotionAnimationView.swift b/HikeApp/Component/MotionAnimationView.swift index a73bd09..75cffb2 100644 --- a/HikeApp/Component/MotionAnimationView.swift +++ b/HikeApp/Component/MotionAnimationView.swift @@ -65,6 +65,7 @@ struct MotionAnimationView: View { } } //: ZSTACK .frame(width: 256, height: 256) + .mask(Circle()) } } From 711e13f2453d05a30b14c655a85c70713f1a1e6a Mon Sep 17 00:00:00 2001 From: Dorian <61510923+dodoleouf@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:29:44 +0200 Subject: [PATCH 12/12] =?UTF-8?q?Update:=20add=20drawingGroup()=20for=20pe?= =?UTF-8?q?rformances=20+=20update=20Preview's=20configuration=20?= =?UTF-8?q?=F0=9F=91=A8=F0=9F=8F=BB=E2=80=8D=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HikeApp/Component/MotionAnimationView.swift | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/HikeApp/Component/MotionAnimationView.swift b/HikeApp/Component/MotionAnimationView.swift index 75cffb2..93dd235 100644 --- a/HikeApp/Component/MotionAnimationView.swift +++ b/HikeApp/Component/MotionAnimationView.swift @@ -66,14 +66,14 @@ struct MotionAnimationView: View { } //: ZSTACK .frame(width: 256, height: 256) .mask(Circle()) + .drawingGroup() } } #Preview { - ZStack { - Color.teal - .ignoresSafeArea() - - MotionAnimationView() - } + MotionAnimationView() + .background( + Circle() + .fill(.teal) + ) }