Mobil ishlab chiqishda animatsiya: bu nima, qanday turlari bor va qanday foydalanish

Android-da Animatsiya: Property Animation va View Animation

Android ikkita asosiy animatsiya tizimini taqdim etadi: View Animation (eskirgan) va Property Animation (zamonaviy). View Animation (yoki Tween Animation) faqat vizual tasvir bilan ishlaydi — Ko'rinishning ekranini o'zgartiradi, lekin uning haqiqiy xususiyatlarini o'zgartirmaydi (masalan, bosish koordinatalari joyida qoladi). Android 3.0 da taqdim etilgan Property Animation, Animator — ValueAnimator, ObjectAnimator yoki AnimatorSet orqali ob'ektning haqiqiy xususiyatlarini o'zgartiradi.

ObjectAnimator va ValueAnimator

ObjectAnimator Property Animation-ning eng mashhur sinfidir. Belgilangan Interpolator bilan ma'lum bir vaqt davomida ob'ektning ma'lum bir xususiyatini (masalan, translationX, alpha, scaleY) animatsiya qiladi.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator ma'lum bir ob'ektga bog'liq emas — har qanday xususiyat yoki maxsus mantiq uchun ishlatilishi mumkin bo'lgan qiymatlarni yaratadi.

View Animation va XML animatsiyalari

View Animation XML fayllarida res/anim/ tasvirlanadi. To'rt tur qo'llab-quvvatlanadi: scale, translate, rotate, alpha. Kamchilik shundaki, animatsiya Ko'rinishning haqiqiy parametrlarini o'zgartirmaydi. Oddiy effektlar uchun (miltillash, aylanish) View Animation hali ham qo'llaniladi, ammo yangi loyihalar uchun Property Animation tavsiya etiladi.

Jetpack Compose-da Animatsiya

Jetpack Compose zamonaviy animatsiya API-sini taklif qiladi: animateAsState, Animatable, AnimatedVisibility va AnimatedContent. Compose-da animatsiya reaktivdir: holat o'zgarganda animatsiya avtomatik ravishda boshlanadi.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

iOS-da Animatsiya: Core Animation va UIView.animate

iOS Core Animation — CALayer bilan ishlaydigan past darajadagi framework asosida kuchli animatsiya stakini taqdim etadi. UIKit Core Animation ustida qulay UIView.animate va UIViewPropertyAnimator metodlari bilan qurilgan.

UIView.animate

UIView.animate iOS-da animatsiya qilishning eng oddiy usulidir. Frame, alpha, transform, backgroundColor va boshqa UIView xususiyatlarini animatsiya qilish imkonini beradi.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — fizik animatsiya uchun framework: tortishish, to'qnashuvlar, prujinalar, tortish kuchlari. Qo'lda fizika hisobisiz ob'ektlarning realistik xatti-harakatini yaratish imkonini beradi. Maxsus o'tishlar, animatsion menyular va o'yin elementlari uchun ishlatiladi.

CAAnimation va Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — CALayer animatsiyasi uchun past darajadagi API. 3D transformatsiyalarni, yo'l animatsiyasini (keyframe), maskalash va kompozitsiyani qo'llab-quvvatlaydi. SwiftUI animation va withAnimation modifikatorlari orqali Core Animation-dan foydalanadi.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

Aksariyat iOS loyihalari uchun SwiftUI o'rnatilgan animatsiyasi bilan ishlatiladi. Masalan, withAnimation holat o'zgarishlarini animatsion kontekstga o'raydi.

Vektor Animatsiyasi: Lottie va Rive

Murakkab animatsiyalarni (personajlar, o'tishlar, yuklagichlar) kod bilan amalga oshirish qiyin. Lottie va Rive dizaynerlarga vizual muharrirlarda animatsiya yaratishga va dasturchilarga ularni tayyor komponent sifatida ilovaga joylashtirishga imkon berish orqali bu muammoni hal qiladi.

Lottie

Lottie — Airbnb-dan (hozirgi LottieFiles) JSON formatida eksport qilingan Adobe After Effects animatsiyalarini ko'rsatadigan kutubxona. Android, iOS, Flutter, React Native va Web-da qo'llab-quvvatlanadi. Lottie animatsiyalari vektordir, sifat yo'qotmasdan masshtablanadi va dasturiy ravishda sozlanishi mumkin (tezlik, borish, ranglar).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (ilgari 2Dimensions) — vektor animatsiyasi uchun yanada rivojlangan vosita. Lottie-dan farqli o'laroq, Rive interaktiv animatsiyani qo'llab-quvvatlaydi: holatlar, triggerlar, o'tishlar. Animatsiya Rive Editor-da yaratiladi va ilovada State Machine orqali boshqariladi. Rive o'yin interfeyslari, animatsion ikonkalar va qayta aloqali murakkab o'tishlar uchun mos keladi.

IT Sectr-da biz dekorativ animatsiyalar (yuklagichlar, muvaffaqiyatli operatsiyalar, bo'sh holatlar) uchun Lottie dan va onboarding ekranlarining interaktiv elementlari uchun Rive dan foydalanamiz. Bu UIKit yoki Canvas-da qo'lda amalga oshirishga nisbatan animatsiyalarni ishlab chiqish vaqtini 60% ga qisqartiradi.

Shared Element Transition va Hero Animation

Shared Element Transition — element (tasvir, matn, karta) ekranlar o'rtasida o'tish paytida silliq harakatlanadigan va o'zgaradigan animatsiya. Bu uzluksizlik illyuziyasini yaratadi: foydalanuvchi yangi ekranga "bormaydi", balki elementning "ichiga tushadi".

Android Shared Element Transition

Android-da o'tish ActivityOptionsCompat va transitionName atributlari orqali amalga oshiriladi. FragmentTransaction Activity ichidagi o'tishlar uchun addSharedElement-ni qo'llab-quvvatlaydi. Compose SharedContentState bilan SharedTransitionLayout dan foydalanadi.

iOS Hero Transition

iOS o'rnatilgan Hero Transition-ga ega emas, ammo Hero kutubxonasi (Luke Zhao tomonidan) ushbu naqshni UIKit-da amalga oshiradi. Ikkala ekrandagi elementlarga id belgilang — Hero avtomatik ravishda silliq o'tish yaratadi. SwiftUI-da o'tish animatsiyasi NavigationStack va matchedGeometryEffect orqali o'rnatilgan.

Flutter Hero

Flutter tag parametri bilan o'rnatilgan Hero vidjetiga ega. Ikki sahifa bir xil tag bilan Hero-ni o'z ichiga olganida, Flutter avtomatik ravishda ular o'rtasidagi o'tishni animatsiya qiladi. Bu mobil ilovada murakkab animatsiyani amalga oshirishning eng oddiy usullaridan biridir.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator va Easing

Animatsiya tabiiy ko'rinishi uchun tezlik egri chiziqlari ishlatiladi — Android-da Interpolator va iOS-da Easing. Ular animatsiya tezligining boshidan oxirigacha qanday o'zgarishini aniqlaydi.

Android Interpolator-lari

Android bir nechta o'rnatilgan Interpolator-ni qo'llab-quvvatlaydi: LinearInterpolator (bir xil), AccelerateDecelerateInterpolator (sekin-tez-sekin), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (haddan oshib) va BounceInterpolator (sakrash bilan). Maxsus Interpolator XML yoki TimeInterpolator sinfi orqali yaratilishi mumkin.

Spring Animation

Spring Animation (prujina animatsiyasi) damping (susaytirish) va stiffness (qattiqlik) parametrlari bilan prujina fizikasini modellashtiradi. Damping 0 — cheksiz tebranishlar, 1 — tebranishlar yo'q. Qattiqlik qaytish tezligini aniqlaydi. Spring Animation iOS-da (UISpringTimingParameters bilan UIViewPropertyAnimator), Android-da (physics2 dan SpringAnimation) va SwiftUI-da (spring()) mavjud.

Android-da Spring Animation hujjatlari batafsil konfiguratsiya misollarini o'z ichiga oladi.

Vaqt chizig'i animatsiyasi

Timeline (vaqt chizig'i) — animatsiya vaqt davomida kadrlarga bo'linadigan yondashuv. AnimationSet yoki Guruh animatsiyasi etarlicha moslashuvchan bo'lmagan murakkab ketma-ketliklar uchun ishlatiladi. Android AnimatorSet-ni, iOS — CAAnimationGroup-ni, Flutter — AnimationController-da Interval-ni qo'llab-quvvatlaydi.