Transition: asoslar, mobil ilovalarda o'tish animatsiyasi

Transition nima?

Transition — bir vizual interfeys holatining boshqasi bilan almashinishida yuz beradigan animatsiyadir. Property Animation (bir ob'ektning xususiyatini animatsiyalash) dan farqli o'laroq, Transition o'zgarishlarning butun to'plamini boshqaradi: elementlarning paydo bo'lishi/yo'qolishi, ularning joylashuvi, o'lchami va xususiyatlarining bir o'tish doirasida o'zgarishi. Transition kontentning silliq almashinuvi muammosini shunday hal qiladiki, foydalanuvchi nima qayerga ko'chganini tushunadi.

Mobil platformalarda Transition uchta asosiy stsenariyda qo'llaniladi: ekranlar o'rtasida navigatsiya (push, pop, modal present), fragmentlarni almashtirish (Android FragmentTransaction) va ekran ichidagi holat o'zgarishi (kartani ochish, tablarni almashtirish). Har bir stsenariy o'z yondashuvini talab qiladi: navigatsion o'tishlar — iOS da UIViewControllerAnimatedTransitioning yoki Android da ActivityOptions, ekran ichidagi o'tishlar — Transition Framework yoki UIView.transition.

Apple HIG (2026) ma'lumotlariga ko'ra, standart o'tishning davomiyligi 400–500 ms dan oshmasligi kerak — uzoqroq animatsiyalar kechikish sifatida qabul qilinadi. Material Design mobil o'tishlar uchun 300–350 ms ni tavsiya qiladi. Katta elementlar (kartalar, rasmlar) uchun vaqt seziladigan samaradorlikni yo'qotmasdan 500–600 ms gacha oshishi mumkin.

O'tish animatsiyalari turlari

O'tish turlari qaysi kontent qanday o'zgarishiga qarab bir necha kategoriyaga bo'linadi. Asosiy turlari: xiralashish (cross-fade) — birining silliq yo'qolishi va ikkinchisining paydo bo'lishi; siljish (slide) — bir ekran ketadi, ikkinchisi keladi; masshtablash (scale/zoom) — element kattalashib, batafsil ekranni ochadi. Kombinatsiyalangan o'tishlar bir necha effektni birlashtiradi.

Material Design qoidalari: yagona vizual til yaratish uchun bitta ilova ichida bir turdagi o'tishdan foydalaning. Bir xil darajadagi ekranlar o'rtasida navigatsiya uchun slide (master → detail), bir ekran ichida kontent almashish uchun cross-fade (tablar, ko'rinishni almashtirish), kartadan batafsil ekranga o'tish uchun scale/zoom (mahsulot kartasi → tavsif) tavsiya etiladi.

iOS da Transition (Swift)

iOS da UIView.transition bir View ichida kontent almashish animatsiyasining eng oddiy usulidir. U cross-dissolve, curl-up, curl-down, flip-from-left, flip-from-right ni qo'llab-quvvatlaydi. UIViewController lar o'rtasida navigatsion o'tishlar uchun UINavigationControllerDelegate UIViewControllerAnimatedTransitioning bilan ishlatiladi — bu push/pop animatsiyasi ustidan to'liq nazorat beradi.

import UIKit

// UIView.transition: rasmni cross-dissolve bilan almashtirish
UIView.transition(with: imageView,
    duration: 0.4,
    options: [.transitionCrossDissolve, .curveEaseInOut]
) {
    self.imageView.image = UIImage(named: "new_image")
} completion: { _ in
    print("Transition yakunlandi")
}

// UIView.transition: ikkita View ni almashtirish
UIView.transition(from: firstView, to: secondView,
    duration: 0.5,
    options: [.transitionFlipFromRight, .showHideTransitionViews]
) { _ in
    // firstView yashirilgan, secondView ko'rsatilgan
}

// Qatlam uchun CATransition (Auto Layoutsiz)
let transition = CATransition()
transition.type = .push
transition.subtype = .fromRight
transition.duration = 0.35
transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
view.layer.add(transition, forKey: "pushTransition")

UIViewPropertyAnimator — iOS 10+ da maxsus o'tishlar uchun zamonaviy alternativa. UIView.transition dan farqli o'laroq, PropertyAnimator pauza, bekor qilish va reverse (teskari animatsiya) ni qo'llab-quvvatlaydi, bu interaktiv o'tishlar (swipe-to-go-back) uchun muhimdir. UIViewController lar o'rtasida animatsiya uchun PropertyAnimator bilan birga UIPercentDrivenInteractiveTransition dan foydalaning — bu interaktiv navigatsiya uchun standart naqshdir.

Android da Transition (Kotlin)

Android da FragmentTransaction setCustomAnimations bilan Fragment lar o'rtasida o'tish animatsiyasining asosiy usulidir. Parametrlar: enter (yangi Fragmentning kirish animatsiyasi), exit (eskisining chiqish animatsiyasi), popEnter va popExit — orqaga navigatsiya uchun. FragmentTransaction resurs animatsiyalarini (R.anim) va Transition Framework ni (R.transition) qo'llab-quvvatlaydi.

import androidx.fragment.app.FragmentTransaction
import androidx.transition.TransitionInflater

// FragmentTransaction resurs animatsiyalari bilan
supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,  // enter
        R.anim.slide_out_left,  // exit
        R.anim.slide_in_left,   // popEnter
        R.anim.slide_out_right  // popExit
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// FragmentTransaction Transition Framework bilan
val detailFragment = DetailFragment()
detailFragment.enterTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.slide_right)
detailFragment.exitTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.fade_out)

supportFragmentManager.beginTransaction()
    .replace(R.id.container, detailFragment)
    .addToBackStack(null)
    .commit()

// ActivityOptions: Activity boshlanishida animatsiya
val options = ActivityOptions.makeScaleUpAnimation(
    view, 0, 0, view.width, view.height
).toBundle()
startActivity(intent, options)

Android eng yaxshi amaliyotlari: Slide() — navigatsiyada Fragment ni almashtirish uchun (enter = Slide(Gravity.END), exit = Slide(Gravity.START)). Fade() — overlay va dialoglarni ko'rsatish/yashirish uchun. Explode() — urg'uli o'tishlar uchun (elementni ro'yxatdan o'chirish). Eski qurilmalar (API < 21) uchun R.anim dan fallback sifatida foydalaning. Transition Framework SurfaceView, TextureView, GLSurfaceView ni qo'llab-quvvatlamaydi — video va kamera uchun faqat R.anim orqali animatsiyalardan foydalaning.

iOS da maxsus UIViewController o'tishlari

UIViewControllerAnimatedTransitioning — iOS da kontrollerlar o'rtasida to'liq maxsus o'tish animatsiyalarini yaratish uchun protokol. U konteyner View (transitionContext.containerView), manba va maqsad View ga kirish imkonini beradi. UIPercentDrivenInteractiveTransition bilan birgalikda bu yondashuv barmoq bilan surish orqali interaktiv o'tishlar yaratishga imkon beradi.

import UIKit

"> Custom o'tish animatori
class ScaleTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    let isPresenting: Bool

    init(presenting: Bool) { self.isPresenting = presenting }

    func transitionDuration(using ctx: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.4
    }

    func animateTransition(using ctx: UIViewControllerContextTransitioning) {
        guard let toView = ctx.view(forKey: .to),
              let fromView = ctx.view(forKey: .from)
        else { return }

        let container = ctx.containerView
        let initialScale: CGAffineTransform = CGAffineTransform(scaleX: 0.8, y: 0.8)
        let finalFrame = ctx.finalFrame(for: toView)

        if isPresenting {
            toView.transform = initialScale
            toView.alpha = 0
            toView.frame = finalFrame
            container.addSubview(toView)
        }

        UIView.animate(withDuration: transitionDuration(using: ctx),
                       delay: 0,
                       usingSpringWithDamping: 0.7,
                       initialSpringVelocity: 0.3) {
            if self.isPresenting {
                toView.transform = .identity
                toView.alpha = 1
                fromView.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
                fromView.alpha = 0
            } else {
                fromView.transform = initialScale
                fromView.alpha = 0
            }
        } completion: { _ in
            fromView.transform = .identity
            ctx.completeTransition(!ctx.transitionWasCancelled)
        }
    }
}

// UINavigationControllerDelegate da qo'llash
extension MainViewController: UINavigationControllerDelegate {
    func navigationController(
        _ nc: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from: UIViewController, to: UIViewController
    ) -> UIViewControllerAnimatedTransitioning? {
        return ScaleTransitionAnimator(presenting: operation == .push)
    }
}

Interaktiv o'tishlar: manba ekranga UIPanGestureRecognizer qo'shing. Jest ishga tushganda UIPercentDrivenInteractiveTransition yarating va update(CGFloat(percent)) ni chaqiring. Chegaraga yetilmaganda (odatda 30%) bekor qilish uchun cancel() ni chaqiring. Bu naqsh UINavigationController da pop jestida va UIScrollView da pagingEnabled bilan standart sifatida ishlatiladi. Maxsus jestlar uchun UIViewControllerInteractiveTransitioning ni amalga oshiring.

Android da Transition Framework: sahnadan sahnaga

Transition Framework (android.transition) — ikki sahna (Scene) o'rtasidagi o'zgarishlarni avtomatik animatsiyalaydigan deklarativ tizimdir. Sahna ma'lum holatga ega View lar to'plamidir. Scene A dan Scene B ga o'tishda Transition Framework farqni tahlil qiladi va animatsiyalaydi: joylashuv o'zgarishini (ChangeBounds), o'lcham o'zgarishini (ChangeClipBounds, ChangeTransform), paydo bo'lishni (Fade) va yo'qolishni (Fade).

import android.transition.Scene
import android.transition.TransitionManager
import android.transition.TransitionSet
import android.transition.AutoTransition
import android.transition.ChangeBounds
import android.transition.Fade

// TransitionSet: ChangeBounds + Fade kombinatsiyasi
val transition = TransitionSet().apply {
    ordering = TransitionSet.ORDERING_TOGETHER
    addTransition(ChangeBounds())
    addTransition(Fade(Fade.IN))
    duration = 400L
    interpolator = FastOutSlowInInterpolator()
}

// ViewGroup da sahnalar o'rtasida o'tish
val sceneRoot = findViewById<ViewGroup>(R.id.scene_root)
val scene1 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_initial)
val scene2 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_expanded)

"> Qo'lda sozlamasdan AutoTransition
TransitionManager.go(scene2, AutoTransition().apply {
    duration = 350L
})

// TransitionManager.beginDelayedTransition — sahnasiz
TransitionManager.beginDelayedTransition(sceneRoot, ChangeBounds())
itemView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
itemView.requestLayout() "> Layout o'zgarishi avtomatik animatsiya qilinadi

ChangeBounds — Android da eng ko'p ishlatiladigan o'tish, View ning joylashuvi va o'lchami o'zgarishini animatsiyalaydi. ChangeTransform rotation va scale ni animatsiyalaydi. ChangeImageTransform — ImageView animatsiyasi uchun (centerCrop → fitCenter). Ierarxiya strukturasining o'zgarishi bilan murakkab o'tishlar uchun ordering = ORDERING_SEQUENTIAL bilan TransitionSet dan foydalaning (animatsiyalar parallel emas, ketma-ket bajariladi). Android Developers (2026) hujjatlariga ko'ra, Transition Framework barcha standart View larni qo'llab-quvvatlaydi, lekin sirt animatsiyasini qo'llab-quvvatlamaydi (SurfaceView, TextureView, VideoView).