-
Notifications
You must be signed in to change notification settings - Fork 9
/
OnboardingStartup+View.swift
224 lines (196 loc) · 5.35 KB
/
OnboardingStartup+View.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
import ComposableArchitecture
import CoreMotion
import SwiftUI
// MARK: - OnboardingStartup.View
extension OnboardingStartup {
@MainActor
public struct View: SwiftUI.View {
let store: StoreOf<OnboardingStartup>
public init(store: StoreOf<OnboardingStartup>) {
self.store = store
}
}
}
extension OnboardingStartup.View {
public var body: some View {
NavigationStack {
WithViewStore(store, observe: { $0 }, send: { .view($0) }) { viewStore in
VStack(spacing: 0) {
Text(L10n.Onboarding.Step1.title)
.foregroundColor(.app.gray1)
.textStyle(.sheetTitle)
.padding(.top, .large1)
.padding(.horizontal, .large1)
.padding(.bottom, .medium3)
Text(L10n.Onboarding.Step1.subtitle)
.foregroundColor(.app.gray2)
.textStyle(.secondaryHeader)
.padding(.horizontal, .huge3)
Spacer(minLength: 0)
SplashGraphic()
Spacer(minLength: 0)
}
.multilineTextAlignment(.center)
.footer {
Button(L10n.Onboarding.newUser) {
viewStore.send(.selectedNewWalletUser)
}
.buttonStyle(.primaryRectangular)
.padding(.bottom, .small2)
Button(L10n.Onboarding.restoreFromBackup) {
viewStore.send(.selectedRestoreFromBackup)
}
.buttonStyle(.primaryText())
}
}
.destinations(with: store)
}
}
}
private extension StoreOf<OnboardingStartup> {
var destination: PresentationStoreOf<OnboardingStartup.Destination> {
func scopeState(state: State) -> PresentationState<OnboardingStartup.Destination.State> {
state.$destination
}
return scope(state: scopeState, action: Action.destination)
}
}
@MainActor
private extension View {
func destinations(with store: StoreOf<OnboardingStartup>) -> some View {
let destinationStore = store.destination
return sheet(
store: destinationStore,
state: /OnboardingStartup.Destination.State.restoreFromBackup,
action: OnboardingStartup.Destination.Action.restoreFromBackup,
content: { RestoreProfileFromBackupCoordinator.View(store: $0) }
)
}
}
// MARK: - SplashGraphic
@MainActor
struct SplashGraphic: View {
@ObservedObject private var motion: MotionManager = .shared
@State private var rotate: Bool = false
private let height: CGFloat = 254
private let maskWidth: CGFloat = 116
private let maskHeight: CGFloat = 219
private let maskRadius: CGFloat = 20
private let verticalPadding: CGFloat = 10
private let coordinateName: String = "ScrollViewCoords"
var body: some View {
GeometryReader { sizeProxy in
ScrollView(.horizontal, showsIndicators: false) {
GeometryReader { proxy in
let offset = CGSize(width: proxy.frame(in: .named(coordinateName)).minX, height: 0) + motion.offset
ZStack {
items(offset: offset)
.blur(radius: 5)
RoundedRectangle(cornerRadius: maskRadius)
.fill(.white)
.frame(width: maskWidth, height: maskHeight)
items(offset: offset)
.mask {
RoundedRectangle(cornerRadius: maskRadius)
.frame(width: maskWidth, height: maskHeight)
}
Image(asset: AssetResource.splashPhoneFrame)
}
.frame(width: sizeProxy.size.width)
}
.padding(.vertical, verticalPadding)
}
.coordinateSpace(name: coordinateName)
}
.frame(height: height + 2 * verticalPadding)
.onAppear {
motion.start()
withAnimation(.linear(duration: 90).repeatForever(autoreverses: false)) {
rotate = true
}
}
.onDisappear {
motion.stop()
}
}
private func items(offset: CGSize) -> some View {
ZStack {
ForEach(itemModels) { item in
Image(asset: item.asset)
.rotationEffect(.degrees(item.rotation * (rotate ? 360.0 : 0)))
.offset(item.offset - item.z * offset)
}
}
}
private let itemModels: [ItemModel] = [
.init(
id: 1,
asset: AssetResource.splashItem1,
offset: .init(width: 55, height: -63),
z: 0.35,
rotation: 3
),
.init(
id: 2,
asset: AssetResource.splashItem2,
offset: .init(width: -110, height: -50),
z: 0.4,
rotation: -5
),
.init(
id: 3,
asset: AssetResource.splashItem3,
offset: .init(width: 16, height: 36),
z: 0.53,
rotation: 4
),
.init(
id: 4,
asset: AssetResource.splashItem4,
offset: .init(width: 122, height: 82),
z: 0.63,
rotation: -4
),
.init(
id: 5,
asset: AssetResource.splashItem5,
offset: .init(width: -117, height: 102),
z: 0.69,
rotation: -6
),
]
private struct ItemModel: Identifiable {
let id: Int
let asset: ImageAsset
let offset: CGSize
let z: CGFloat
let rotation: CGFloat
}
}
// MARK: - MotionManager
@MainActor
final class MotionManager: ObservableObject {
@Published var offset: CGSize = .zero
/// Controls how fast we converge back to zero offset
private let rho: CGFloat = 0.003
/// Controls how much we scale the motion values
private let scale: CGFloat = 0.7
private let manager = CMMotionManager()
static let shared = MotionManager()
func stop() {
manager.stopDeviceMotionUpdates()
}
func start() {
manager.deviceMotionUpdateInterval = 1 / 60
manager.startDeviceMotionUpdates(to: .main) { [weak self] motionData, error in
guard let self else { return }
if let error {
loggerGlobal.warning("Onboarding splash parallax CoreMotion error: \(error)")
return
} else if let motionData {
let rate = CGSize(width: motionData.rotationRate.y, height: motionData.rotationRate.x)
offset = (1 - rho) * (offset + scale * rate)
}
}
}
}