@@ -9,17 +9,29 @@ import SwiftUI
9
9
10
10
struct OnBoardingView : View {
11
11
@AppStorage ( " onboarding " ) var isOnBoardingActive : Bool = true
12
+ @State private var buttonWidth : Double = UIScreen . main. bounds. width - 80
13
+ @State private var buttonOffset : CGFloat = 0
14
+ @State private var imageOffset : CGSize = . zero
15
+ @State private var indicateorIpacity : Double = 1.0
16
+ @State private var textTitle : String = " Share. "
17
+
18
+ let hapticFeedback = UINotificationFeedbackGenerator ( )
19
+
20
+ @State private var inAnimating : Bool = false
21
+
12
22
var body : some View {
13
23
ZStack {
14
24
Color ( " ColorBlue " ) . ignoresSafeArea ( )
15
25
VStack ( spacing: 20 ) {
16
- // Header
26
+ // MARK: - Header
17
27
Spacer ( )
18
28
VStack {
19
- Text ( " Share. " )
29
+ Text ( textTitle )
20
30
. font ( . system( size: 60 ) )
21
31
. fontWeight ( . heavy)
22
32
. foregroundColor ( . white)
33
+ . transition ( . opacity)
34
+ . id ( textTitle)
23
35
Text ( """
24
36
its not showing much we give but
25
37
how much i giove you put into your
@@ -32,15 +44,53 @@ how much i giove you put into your
32
44
33
45
34
46
} //end of vstack
35
- //Cente
47
+ . opacity ( inAnimating ? 1 : 0 )
48
+ . offset ( y: inAnimating ? 0 : - 40 )
49
+ . animation ( . easeOut( duration: 1 ) , value: inAnimating)
50
+ // MARK: - Center
36
51
ZStack {
37
52
CircleGroupView ( ShapeColor: . white, ShapeOpacity: 0.2 )
53
+ . offset ( x: imageOffset. width * - 1 )
54
+ . blur ( radius: abs ( imageOffset. width / 5 ) )
55
+ . animation ( . easeOut( duration: 1 ) , value: imageOffset)
56
+
38
57
Image ( " character-1 " )
39
58
. resizable ( )
40
59
. scaledToFit ( )
60
+ . opacity ( inAnimating ? 1 : 0 )
61
+ . animation ( . easeOut, value: inAnimating)
62
+ . offset ( x: imageOffset. width * 1.2 , y: 0 )
63
+ . rotationEffect ( . degrees( Double ( imageOffset. width / 20 ) ) )
64
+ . gesture ( DragGesture ( ) . onChanged { gestuer in
65
+ if abs ( imageOffset. width) <= 150 {
66
+ imageOffset = gestuer. translation
67
+ withAnimation ( . linear( duration: 0.25 ) ) {
68
+ indicateorIpacity = 0
69
+ textTitle = " Give. "
70
+ }
71
+ }
72
+
73
+ } . onEnded { _ in
74
+ imageOffset = . zero
75
+ withAnimation ( . linear( duration: 0.25 ) ) {
76
+ indicateorIpacity = 1
77
+ textTitle = " Share. "
78
+ }
79
+
80
+ } )
81
+ . animation ( . easeOut( duration: 1 ) , value: imageOffset)
41
82
} //end of ztack
83
+ . overlay ( Image ( systemName: " arrow.left.and.right.circle " )
84
+ . font ( . system( size: 44 , weight: . ultraLight) )
85
+ . foregroundColor ( . white)
86
+ . offset ( y: 20 )
87
+ . opacity ( inAnimating ? 1 : 0 )
88
+ . animation ( . easeOut( duration: 1 ) . delay ( 2 ) , value: inAnimating)
89
+ . opacity ( indicateorIpacity)
90
+ , alignment: . bottom
91
+ )
42
92
Spacer ( )
43
- //Footer
93
+ // MARK: - Footer
44
94
45
95
ZStack {
46
96
//part 1
@@ -60,7 +110,7 @@ how much i giove you put into your
60
110
HStack {
61
111
Capsule ( )
62
112
. fill ( Color . red. opacity ( 0.8 ) )
63
- . frame ( width: 80 )
113
+ . frame ( width: buttonOffset + 80 )
64
114
Spacer ( )
65
115
}
66
116
// part 4
@@ -77,19 +127,51 @@ how much i giove you put into your
77
127
}
78
128
. foregroundColor ( . white)
79
129
. frame ( height: 80 , alignment: . center)
80
- . onTapGesture {
81
- isOnBoardingActive = false
82
- }
130
+ . offset ( x: buttonOffset)
131
+ . gesture (
132
+ DragGesture ( )
133
+ . onChanged { gesture in
134
+ if gesture. translation. width > 0 && buttonOffset <= buttonWidth - 80 {
135
+ buttonOffset = gesture. translation. width
136
+ }
137
+
138
+ }
139
+ . onEnded { _ in
140
+
141
+ withAnimation ( . easeOut( duration: 0.4 ) ) {
142
+ if buttonOffset > buttonWidth / 2 {
143
+ hapticFeedback. notificationOccurred ( . success)
144
+ playSound ( sound: " chimeup " , type: " mp3 " )
145
+ buttonOffset = buttonWidth - 80
146
+ isOnBoardingActive = false
147
+ } else
148
+ {
149
+ hapticFeedback. notificationOccurred ( . warning)
150
+ buttonOffset = 0
151
+ }
152
+ }
153
+
154
+
155
+ }
156
+ )
83
157
84
158
Spacer ( )
85
159
}
86
160
87
161
88
162
} //end od footer
89
- . frame ( height: 80 , alignment: . center)
163
+ . frame ( width : buttonWidth , height: 80 , alignment: . center)
90
164
. padding ( )
165
+ . opacity ( inAnimating ? 1 : 0 )
166
+ . offset ( y: inAnimating ? 0 : 40 )
167
+ . animation ( . easeIn( duration: 1 ) , value: inAnimating)
91
168
} //:E VStack
92
169
} //:E ZStack
170
+ . onAppear ( perform: {
171
+ inAnimating = true
172
+ } )
173
+ . preferredColorScheme ( . dark)
174
+
93
175
}
94
176
}
95
177
0 commit comments