Add animation

Author: HarryJafari

RestartApplication/Screens/HomeView.swift

@@ -9,16 +9,23 @@ import SwiftUI
 
 struct HomeView: View {
     @AppStorage("onboarding") var isOnBoardingViewActive: Bool = false
+    @State private var isAnimating: Bool = false
     var body: some View {
         VStack {
-            
+            Spacer()
             //header
             ZStack {
                 CircleGroupView(ShapeColor: .gray, ShapeOpacity: 0.1)
                 Image("character-2")
                     .resizable()
                     .scaledToFit()
+                
                 .padding()
+                .offset(y: isAnimating ? 35 : -35)
+                .animation(
+                    Animation.easeInOut(duration: 4)
+                        .repeatForever(),
+                    value: isAnimating)
             }
 
             //center
@@ -35,10 +42,15 @@ struct HomeView: View {
             Spacer()
 
             Button(action: {
-                isOnBoardingViewActive = true
+                withAnimation {
+                    playSound(sound: "success", type: "m4a")
+                    isOnBoardingViewActive = true
+                }
+               
             }, label: {
                 Image(systemName: "arrow.triangle.2.circlepath.circle.fill")
                     .imageScale(.large)
+                    
 
                 Text("Restart")
                     .font(.system(.title3 , design: .rounded))
@@ -51,6 +63,11 @@ struct HomeView: View {
 
 
         }
+        .onAppear(perform: {
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.6, execute: {
+                isAnimating = true
+            })
+        })
     }
 }
 

RestartApplication/Screens/OnBoardingView.swift

@@ -9,17 +9,29 @@ import SwiftUI
 
 struct OnBoardingView: View {
     @AppStorage("onboarding") var isOnBoardingActive: Bool = true
+    @State private var buttonWidth: Double = UIScreen.main.bounds.width - 80
+    @State private var buttonOffset: CGFloat = 0
+    @State private var imageOffset: CGSize = .zero
+    @State private var indicateorIpacity: Double = 1.0
+    @State private var textTitle: String = "Share."
+    
+    let hapticFeedback = UINotificationFeedbackGenerator()
+    
+    @State private var inAnimating: Bool = false
+
     var body: some View {
         ZStack {
             Color("ColorBlue").ignoresSafeArea()
             VStack(spacing: 20) {
-               // Header
+               // MARK: - Header
                 Spacer()
                 VStack {
-                    Text("Share.")
+                    Text(textTitle)
                         .font(.system(size: 60))
                         .fontWeight(.heavy)
                         .foregroundColor(.white)
+                        .transition(.opacity)
+                        .id(textTitle)
                     Text("""
 its not showing much we give but
 how much i giove you put into your
@@ -32,15 +44,53 @@ how much i giove you put into your
 
 
                 }//end of vstack
-                //Cente
+                .opacity(inAnimating ? 1 : 0)
+                .offset(y: inAnimating ? 0 : -40)
+                .animation(.easeOut(duration: 1) , value: inAnimating)
+                // MARK: - Center
                 ZStack {
                     CircleGroupView(ShapeColor: .white, ShapeOpacity: 0.2)
+                        .offset(x: imageOffset.width * -1)
+                        .blur(radius: abs(imageOffset.width / 5))
+                        .animation(.easeOut(duration: 1), value: imageOffset)
+                    
                     Image("character-1")
                         .resizable()
                         .scaledToFit()
+                        .opacity(inAnimating ? 1 : 0)
+                        .animation(.easeOut, value: inAnimating)
+                        .offset(x: imageOffset.width * 1.2 , y: 0)
+                        .rotationEffect(.degrees(Double(imageOffset.width / 20 )))
+                        .gesture(DragGesture().onChanged{ gestuer in
+                            if abs(imageOffset.width) <= 150 {
+                                imageOffset = gestuer.translation
+                                withAnimation(.linear(duration: 0.25)) {
+                                    indicateorIpacity = 0
+                                    textTitle = "Give."
+                                }
+                            }
+                            
+                        }.onEnded{ _ in
+                            imageOffset = .zero
+                            withAnimation(.linear(duration: 0.25)) {
+                                indicateorIpacity = 1
+                                textTitle = "Share."
+                            }
+                            
+                        })
+                        .animation(.easeOut(duration: 1),value: imageOffset)
                 }//end of ztack
+                .overlay(Image(systemName: "arrow.left.and.right.circle")
+                    .font(.system(size: 44, weight: .ultraLight))
+                    .foregroundColor(.white)
+                    .offset(y:20)
+                    .opacity(inAnimating ? 1 : 0)
+                    .animation(.easeOut(duration: 1).delay(2), value: inAnimating)
+                    .opacity(indicateorIpacity)
+                         , alignment: .bottom
+                )
                 Spacer()
-                //Footer
+                // MARK: - Footer
 
                 ZStack {
                     //part 1
@@ -60,7 +110,7 @@ how much i giove you put into your
                     HStack {
                         Capsule()
                             .fill(Color.red.opacity(0.8))
-                            .frame(width: 80)
+                            .frame(width:buttonOffset + 80)
                         Spacer()
                     }
                    // part 4
@@ -77,19 +127,51 @@ how much i giove you put into your
                         }
                         .foregroundColor(.white)
                         .frame(height: 80 , alignment: .center)
-                        .onTapGesture {
-                            isOnBoardingActive = false
-                        }
+                        .offset(x: buttonOffset)
+                        .gesture(
+                            DragGesture()
+                                .onChanged { gesture in
+                                    if gesture.translation.width > 0 && buttonOffset <= buttonWidth - 80{
+                                        buttonOffset = gesture.translation.width
+                                    }
+                                    
+                                }
+                                .onEnded { _ in
+                                    
+                                    withAnimation(.easeOut(duration: 0.4)) {
+                                        if buttonOffset > buttonWidth / 2 {
+                                            hapticFeedback.notificationOccurred(.success)
+                                            playSound(sound: "chimeup", type: "mp3")
+                                            buttonOffset = buttonWidth - 80
+                                            isOnBoardingActive = false
+                                        }else
+                                        {
+                                            hapticFeedback.notificationOccurred(.warning)
+                                            buttonOffset = 0
+                                        }
+                                    }
+                                   
+                                    
+                                }
+                        )
 
                         Spacer()
                     }
 
 
                 }//end od footer
-                .frame(height: 80 , alignment: .center)
+                .frame(width: buttonWidth,height: 80 , alignment: .center)
                 .padding()
+                .opacity(inAnimating ? 1 : 0)
+                .offset(y: inAnimating ? 0 : 40)
+                .animation(.easeIn(duration: 1) , value: inAnimating)
             }//:E VStack
         }//:E ZStack
+        .onAppear(perform: {
+            inAnimating = true
+        })
+        .preferredColorScheme(.dark)
+        
     }
 }
 

RestartApplication/Utilities/AudioPlayer.swift

@@ -0,0 +1,21 @@
+//
+//  AudioPlayer.swift
+//  RestartApplication
+//
+//  Created by Reza on 10/7/2024.
+//
+
+import Foundation
+import AVFoundation
+
+var audioPlayer: AVAudioPlayer?
+func playSound(sound : String , type: String) {
+    if let path = Bundle.main.path(forResource: sound, ofType: type) {
+        do {
+            audioPlayer = try AVAudioPlayer(contentsOf: URL(fileURLWithPath: path))
+            audioPlayer?.play()
+        } catch {
+            print("Could not play the sound")
+        }
+    }
+}

RestartApplication/Views/CircleGroupView.swift

@@ -11,6 +11,7 @@ struct CircleGroupView: View {
 
     @State var ShapeColor : Color
     @State var ShapeOpacity : Double
+    @State private var isAnimating: Bool = false
 
     var body: some View {
         ZStack {
@@ -21,6 +22,14 @@ struct CircleGroupView: View {
                 .stroke(ShapeColor.opacity(ShapeOpacity) , lineWidth: 80)
                 .frame(width: 260 , height: 260)
         }
+        .blur(radius: isAnimating ? 0 : 10)
+        .opacity(isAnimating ? 1 : 0)
+        .scaleEffect(isAnimating ? 1 : 0.5)
+        .animation(.easeOut(duration: 1) , value: isAnimating)
+        .onAppear(perform: {
+            isAnimating = true
+        })
+        
     }
 }