- Published on
SwiftUI crypto app — ilova ikonkasi, Launch Screen va kirish animatsiyasi
- Authors
- Name
- ShoxruxC
- @iOSdasturchi
SwiftUI crypto app — ilova ikonkasi, Launch Screen va kirish animatsiyasi
Bu darsda ilovaning birinchi taassuroti — ilova ikonkasi va kirish animatsiyasi ustida ishlaymiz. Ilova ochilganda foydalanuvchi "Loading your portfolio..." matnining har bir harfi alohida jonlanib chiqishini ko'radi. Bu oddiy lekin juda samarali effekt.
1. App ikonkasini ulash
Assets.xcassets → AppIcon papkasida barcha o'lchamlar uchun rasm joylashtiriladi. Kerakli o'lchamlar:
- 20pt ×2 va ×3
- 29pt ×2 va ×3
- 40pt ×2 va ×3
- 60pt ×2 va ×3
- 1024pt ×1 (App Store marketing)
Rasmlarni to'g'ri uyaga sudrab tashlanadi (drag & drop). Agar o'lcham noto'g'ri bo'lsa — sariq uchburchak ogohlantirish chiqadi.
2. Launch Screen yaratish
info.plist orqali yaratish hali xatolarga moyil. Storyboard usulini tanlaymiz:
core/launch/views papkasida yangi fayl → Launch Screen turini tanlaymiz → LaunchScreen.storyboard.
Assets.xcassets-da LaunchColors papkasida ikkita rang yaratamiz:
LaunchBackgroundColor— qorong'i fon (dark mode bilan bir xil)LaunchAccentColor— asosiy rang (ilovaning aksent rangi)
Storyboard-da:
- View-ning fon rangini
LaunchBackgroundColorqilamiz - Transparent View qo'shamiz, 4 tomondan 0 constraint (safe area ichida)
- View ichiga Image qo'shamiz, 100×100, markazda
- Image nomini
logo-transparentqilamiz
Project Navigator → General → Launch Screen File-ni LaunchScreen ga o'rnatamiz.
3. LaunchView — animatsiyali kirish ekrani
LaunchView.swift faylini yaratamiz. Bu ekran Launch Screen-dan farqsiz ko'rinadi — foydalanuvchi qachon Launch Screen o'chib, LaunchView boshlanganini bilmaydi.
import SwiftUI
struct LaunchView: View {
@Binding var showLaunchView: Bool
// "Loading your portfolio..." — har bir harf alohida element
@State private var loadingText: [String] = "Portfelingiz yuklanmoqda...".map { String($0) }
@State private var showLoadingText: Bool = false
// Timer — har 0.1 soniyada ishlaydi
private let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
@State private var counter: Int = 0 // Animatsiya indeksi
@State private var loops: Int = 0 // Necha marta takrorlandi
var body: some View {
ZStack {
Color.launch.background
.ignoresSafeArea()
// Ilova logosi — launch screen bilan bir joyda turadi
Image("logo-transparent")
.resizable()
.frame(width: 100, height: 100)
// Harakatlanuvchi matn
ZStack {
if showLoadingText {
HStack(spacing: 0) {
ForEach(loadingText.indices, id: \.self) { index in
Text(loadingText[index])
.font(.headline)
.fontWeight(.heavy)
.foregroundColor(Color.launch.accent)
// Har bir harf o'z vaqtida yuqoriga ko'tariladi
.offset(y: counter == index ? -5 : 0)
}
}
.transition(.scale.animation(.easeIn))
}
}
.offset(y: 70) // Logo tagidan chiqadi
}
.onAppear {
showLoadingText = true
}
.onReceive(timer) { _ in
withAnimation(.spring()) {
let lastIndex = loadingText.count - 1
if counter == lastIndex {
counter = 0 // Boshiga qaytadi
loops += 1 // Sikl sanalagani
} else {
counter += 1
}
}
// 2 ta sikl tugagach — LaunchView yopiladi
if loops >= 2 {
showLaunchView = false
}
}
}
}
4. LaunchTheme — ranglar
Color+Extensions.swift-da:
struct LaunchTheme {
let accent = Color("LaunchAccentColor")
let background = Color("LaunchBackgroundColor")
}
extension Color {
static let theme = ColorTheme()
static let launch = LaunchTheme() // yangi
}
5. SwiftUICryptoApp.swift-ga ulash
@main
struct SwiftUICryptoApp: App {
@State private var showLaunchView: Bool = true
var body: some Scene {
WindowGroup {
ZStack {
// Asosiy ilova (orqa fonda)
NavigationView {
HomeView()
}
.navigationViewStyle(StackNavigationViewStyle()) // iPad uchun ham to'g'ri
// Kirish animatsiyasi (old fonda)
ZStack {
if showLaunchView {
LaunchView(showLaunchView: $showLaunchView)
.transition(.opacity.animation(.easeOut))
}
}
.zIndex(2.0) // Har doim ustda turadi
}
}
}
}
Nima uchun
zIndex(2.0)? SwiftUI view-larni ketma-ket chizadi.zIndexbilan LaunchView animatsiya bilan yo'qolayotganda ham asosiy view ustida qoladi.
6. Animatsiya mexanizmi
Timer har 0.1 soniyada ishlaydi:
counter0, 1, 2, 3... ga oshadi- Qaysi harf indexi
counter-ga teng bo'lsa — u 5pt yuqoriga ko'tariladi counteroxirgi harfga yetganda —loopsbirga oshadi vacounter0-ga qaytadiloops >= 2bo'lganda LaunchView yopiladi
Sikl 1: P-o-r-t-f-e-l-i-n-g-i-z... (har harf 0.1s)
Sikl 2: P-o-r-t-f-e-l-i-n-g-i-z...
Tugadi → showLaunchView = false
Natija
Ilovani yopib qayta oching:
- Launch Screen: Qora fon + logo (tezda o'tadi)
- LaunchView: Bir xil ko'rinish — foydalanuvchi o'tishni sezmaydi
- "Portfelingiz yuklanmoqda..." matni — har bir harf to'lqinday jonlanadi
- 2 ta to'liq to'lqindan so'ng — asosiy ekranga o'tadi
"Bu bir necha qator kod bilan professional kirish animatsiyasini yaratdik. Har bir harf alohida animatsiyalanadi — bu foydalanuvchida 'bu ilova sifatli' taassurotini qoldiradi."
Keyingi darsda ilovaning yakuniy optimizatsiyalari. 🚀