diff --git a/BDKSwiftExampleWallet/View/OnboardingView.swift b/BDKSwiftExampleWallet/View/OnboardingView.swift index c04e9558..37941607 100644 --- a/BDKSwiftExampleWallet/View/OnboardingView.swift +++ b/BDKSwiftExampleWallet/View/OnboardingView.swift @@ -19,17 +19,15 @@ struct OnboardingView: View { var isSmallDevice: Bool { UIScreen.main.isPhoneSE } + @State private var animateContent = false var body: some View { - ZStack { Color(uiColor: .systemBackground) .ignoresSafeArea() VStack { - HStack(alignment: .center, spacing: 40) { - Spacer() if viewModel.words.isEmpty { @@ -41,6 +39,12 @@ struct OnboardingView: View { } .tint(.secondary) .font(.title) + .opacity(animateContent ? 1 : 0) + .offset(x: animateContent ? 0 : 100) + .animation( + .spring(response: 0.6, dampingFraction: 0.7).delay(1.2), + value: animateContent + ) Button { if let clipboardContent = UIPasteboard.general.string { @@ -52,6 +56,12 @@ struct OnboardingView: View { } .tint(.secondary) .font(.title) + .opacity(animateContent ? 1 : 0) + .offset(x: animateContent ? 0 : 100) + .animation( + .spring(response: 0.6, dampingFraction: 0.7).delay(1.3), + value: animateContent + ) } else { Button { viewModel.words = "" @@ -67,28 +77,26 @@ struct OnboardingView: View { Spacer() - VStack( - spacing: isSmallDevice ? 5 : 25 - ) { + VStack(spacing: isSmallDevice ? 5 : 25) { Image(systemName: "bitcoinsign.circle") .resizable() - .foregroundStyle( - .secondary - ) + .foregroundStyle(.secondary) .frame( width: isSmallDevice ? 40 : 100, height: isSmallDevice ? 40 : 100, alignment: .center ) + .scaleEffect(animateContent ? 1 : 0) + .opacity(animateContent ? 1 : 0) + .animation( + .spring(response: 0.6, dampingFraction: 0.5, blendDuration: 0.6), + value: animateContent + ) + Text("powered by Bitcoin Dev Kit") .foregroundStyle( LinearGradient( - gradient: Gradient( - colors: [ - .secondary, - .primary, - ] - ), + gradient: Gradient(colors: [.secondary, .primary]), startPoint: .topLeading, endPoint: .bottomTrailing ) @@ -97,39 +105,41 @@ struct OnboardingView: View { .fontWeight(.medium) .multilineTextAlignment(.center) .padding() + .opacity(animateContent ? 1 : 0) + .animation(.easeOut(duration: 0.5).delay(0.6), value: animateContent) } .padding() - Picker( - "Network", - selection: $viewModel.selectedNetwork - ) { - Text("Signet").tag(Network.signet) - Text("Testnet").tag(Network.testnet) - } - .pickerStyle(.automatic) - .tint(.primary) - .accessibilityLabel("Select Bitcoin Network") - - Picker( - "Esplora Server", - selection: $viewModel.selectedURL - ) { - ForEach(viewModel.availableURLs, id: \.self) { url in - Text( - url.replacingOccurrences( - of: "https://", - with: "" - ).replacingOccurrences( - of: "http://", - with: "" + Group { + Picker("Network", selection: $viewModel.selectedNetwork) { + Text("Signet").tag(Network.signet) + Text("Testnet").tag(Network.testnet) + } + .pickerStyle(.automatic) + .tint(.primary) + .accessibilityLabel("Select Bitcoin Network") + .opacity(animateContent ? 1 : 0) + .animation(.easeOut(duration: 0.5).delay(1.5), value: animateContent) + + Picker("Esplora Server", selection: $viewModel.selectedURL) { + ForEach(viewModel.availableURLs, id: \.self) { url in + Text( + url.replacingOccurrences( + of: "https://", + with: "" + ).replacingOccurrences( + of: "http://", + with: "" + ) ) - ) - .tag(url) + .tag(url) + } } + .pickerStyle(.automatic) + .tint(.primary) + .opacity(animateContent ? 1 : 0) + .animation(.easeOut(duration: 0.5).delay(1.5), value: animateContent) } - .pickerStyle(.automatic) - .tint(.primary) if !viewModel.words.isEmpty { if viewModel.isDescriptor || viewModel.isXPub { @@ -165,9 +175,13 @@ struct OnboardingView: View { ) ) .padding() - + .opacity(animateContent ? 1 : 0) + .offset(y: animateContent ? 0 : 50) + .animation( + .spring(response: 0.6, dampingFraction: 0.7).delay(1.2), + value: animateContent + ) } - } .alert(isPresented: $showingOnboardingViewErrorAlert) { Alert( @@ -196,7 +210,11 @@ struct OnboardingView: View { pasteAction: {} ) } - + .onAppear { + withAnimation { + animateContent = true + } + } } }