Published on

Lottie: Ilovaga mukammal animatsiyalar qo'shish

Authors

Lottie nima va u nega bunchalik mashhur?

Aksariyat yirik kompaniyalar (va deyarli butun iOS industriyasi) hozirda animatsiyalar uchun Lottie dan foydalanadi. U Airbnb tomonidan yaratilgan bo'lib, juda murakkab animatsiyalarni kichik hajmdagi .json yoki .lottie fayllari orqali xuddi rasm yoki videodek oson ishlatish imkonini beradi.

Eng zo'r tomoni — lottiefiles.com kabi saytlarda minglab bepul, tayyor animatsiyalar mavjud. Dizaynerlar yoki animatorlar tayyorlagan animatsiyalarni siz dastur kodiga aralashtirmasdan, shunchaki fayl sifatida ilovaga yuklaysiz.

1. Paketni o'rnatish

  • Xcode loyihasiga Package Dependencies orqali https://GitHub.com/airbnb/Lottie-iOS havolasini kiriting.
  • Paketni o'rnatgach, qaysi oyna kerak bo'lsa, o'sha yerda import Lottie qilasiz.

2. Animatsiyani yuklab olish va qo'shish

  1. LottieFiles.com saytiga kiring.
  2. O'zingizga yoqqan animatsiyani toping (masalan, "star").
  3. Animatsiyani JSON formatida yuklab oling.
  4. Yuklab olingan faylni Xcode dagi loyihangiz papkasiga (Bundle) sudrab olib kelib tashlang (masalan, star_animation.json deb nomlang).

3. Kodda foydalanish

Lottie SDK yaqindagina o'zining mutlaqo rasmiy SwiftUI komponentini (LottieView) taqdim etdi:

import SwiftUI
import Lottie

struct LottieBootcamp: View {
    var body: some View {
        LottieView(animation: .named("star_animation"))
            .playbackMode(.playing(.toProgress(1, loopMode: .loop))) // Takror-takror aylanishi
            .configure { view in
                view.contentMode = .scaleAspectFit // Ekranga moslash
            }
            .animationDidFinish { completed in
                // Animatsiya tugagach nima bo'lishi
                print("Animatsiya tugadi!")
            }
            .frame(width: 200, height: 200)
    }
}

PlaybackMode (O'ynatish rejimlari)

  • .loop — doimiy aylanib turadi.
  • .playOnce — faqat bir marta o'ynab, to'xtaydi (masalan, "Success" pichkalari uchun qulay).
  • .autoReverse — oxiriga yetgach, orqaga qarab o'ynaydi.

4. Arxitekturaga moslash (Wrapper)

Boshqa paketlar (SDWebImage, Kingfisher) kabi, LottieView ni ham to'g'ridan-to'g'ri ilovaning o'nlab fayllariga yozib chiqish tavsiya etilmaydi. Buning o'rniga bitta umumiy LottieHelperView qobig'ini yarating:

struct LottieHelperView: View {
    var fileName: String
    var contentMode: UIView.ContentMode = .scaleAspectFill
    var loopMode: LottieLoopMode = .playOnce
    var onFinish: (() -> Void)? = nil

    var body: some View {
        LottieView(animation: .named(fileName))
            .playbackMode(.playing(.toProgress(1, loopMode: loopMode)))
            .configure { view in
                view.contentMode = contentMode
            }
            .animationDidFinish { _ in
                onFinish?()
            }
    }
}

Endi har qanday joyda faqat LottieHelperView(fileName: "star_animation") deb yozish orqali chiroyli va boshqarish oson bo'lgan kodga erishasiz!

Buy mea coffee