Published on

Netflix kloni (6-qism): Mikro-animatsiyalar va Popover (Yakuniy qism)

Authors

1. My List tugmasining animatsiyasi

Netflix dasturida biron bir kinoni "Mening ro'yxatim" ga qo'shmoqchi bo'lsangiz (Plus tugmasi), u bosilganda qiziqarli sakrovchi aylanish animatsiyasi (rotation and bounce) sodir bo'ladi.

Buni yasash uchun tugmaning ichiga ham plyus (+), ham to'g'ri (✓) belgisini ustma-ust (ZStack orqali) qo'yib, faqatgina o'sha zahoti keraklisini ko'rinadigan qilib, 180 gradusga burib aylantiramiz.

import SwiftUI

struct MyListButton: View {
    @State private var isMyList: Bool = false

    var body: some View {
        VStack {
            ZStack {
                // To'g'ri (Checkmark) belgisi
                Image(systemName: "checkmark")
                    .opacity(isMyList ? 1 : 0)
                    .rotationEffect(Angle(degrees: isMyList ? 0 : 180))

                // Plyus belgisi
                Image(systemName: "plus")
                    .opacity(isMyList ? 0 : 1)
                    .rotationEffect(Angle(degrees: isMyList ? -180 : 0))
            }
            .font(.title)

            Text("My List")
                .font(.caption)
        }
        .foregroundColor(.netflixLightGray)
        .padding(8)
        .onTapGesture {
            isMyList.toggle()
        }
        // Sakrovchi silliq animatsiya ulaymiz!
        .animation(.bouncy, value: isMyList)
    }
}

E'tibor qiling, aylanish yo'nalishi bir xil bo'lishi uchun bittasiga 180 va ikkinchisiga -180 ishlatdik.

2. Nativ SwiftUI popover (Rate tugmasi)

Filmni qanday baholashni so'rash uchun (Like, Dislike, Love), ekranning o'rtasida emas, balki aynan bosilgan tugmaning tepasida chiquvchi oyna (Popover) kerak. Buni noldan yasash o'rniga, Apple taqdim etgan .popover() modifikatoridan foydalanamiz:

@State private var showPopover: Bool = false

VStack {
    Image(systemName: "hand.thumbsup")
        .font(.title)
    Text("Rate")
        .font(.caption)
}
.onTapGesture {
    showPopover.toggle()
}
// Popover chaqirish
.popover(isPresented: $showPopover) {
    HStack(spacing: 12) {
        RateOptionButton(title: "Not for me", iconName: "hand.thumbsdown")
        RateOptionButton(title: "I like this", iconName: "hand.thumbsup")
        RateOptionButton(title: "Love this!", iconName: "bolt.heart")
    }
    .padding(16)
    .background(Color.netflixDarkGray)
    // Oynaning qanday ochilish stili (Compact)
    .presentationCompactAdaptation(.popover)
}

Uchinchi tugmamiz bu "Share" (Ulashish). iOS o'zining "Do'stlarga yuborish" yoki "Nusxa olish" interfeysiga ega. Uni chaqirish avvallari (UIKit davrida) qiyin edi, lekin hozirgi SwiftUI 4+ da bu juda oddiy:

if let url = URL(string: "https://swiftui.uz") {
    // 1-qism: Ulashish komponenti
    ShareLink(item: url) {
        // 2-qism: UI Dizayn
        VStack {
            Image(systemName: "paperplane")
                .font(.title)
            Text("Share")
                .font(.caption)
        }
        .foregroundColor(.netflixLightGray)
        .padding(8)
    }
}

Xulosa

Shu bilan murakkab Netflix kloni ham o'z nihoyasiga yetdi. Ushbu 6 qismli loyiha davomida biz nimalarni o'rgandik?

  1. Ekranni dinamik tushiruvchi Scroll Offset.
  2. Glassmorphism orqa fon effekti (.ultraThinMaterial).
  3. LazyVStack va LazyHStack yordamida ichma-ich Grid'lar va gorizontal karusellar yasash.
  4. Katta o'lchamli shriftlar va mikro animatsiyalar bilan ishlash.
  5. Tayyor Nativ (Popover, ShareLink) asboblardan unumli foydalanish.

Arxitekturamiz qanday qilib yig'ilganiga e'tibor bering: har bir element (katakcha, tugma, qator) o'ziga xos tashqi bog'liqliklarsiz yozilgan. Ular qaysi bazadan ma'lumot kelishini bilmaydi, ular shunchaki tashqaridan uzatilgan ma'lumotni chizib beradi (Reusable Components). Bu kelajakda dasturingizni MVVM, TCA kabi ixtiyoriy arxitekturaga qiyinchiliksiz o'tkazishga yordam beradi.

Buy mea coffee