Transition: əsaslar, mobil tətbiqlərdə keçid animasiyası

Transition nədir?

Transition — bir vizual interfeys halının digəri ilə əvəz olunması zamanı baş verən animasiyadır. Property Animation-dan (bir obyektin xüsusiyyətinin animasiyası) fərqli olaraq, Transition dəyişikliklərin bütün dəstini idarə edir: elementlərin görünməsi/gizlənməsi, onların mövqeyinin, ölçüsünün və xüsusiyyətlərinin bir keçid çərçivəsində dəyişməsi. Transition məzmunun hamar dəyişməsi problemini elə həll edir ki, istifadəçi nəyin hara köçdüyünü başa düşsün.

Mobil platformalarda Transition üç əsas ssenaridə tətbiq olunur: ekranlar arasında naviqasiya (push, pop, modal present), fraqmentlərin dəyişməsi (Android FragmentTransaction) və ekran daxilində halın dəyişməsi (kartın açılması, tabların dəyişdirilməsi). Hər ssenari öz yanaşmasını tələb edir: naviqasiya keçidləri — iOS-da UIViewControllerAnimatedTransitioning və ya Android-də ActivityOptions, ekrandaxili keçidlər — Transition Framework və ya UIView.transition.

Apple HIG (2026) məlumatına görə, standart keçidin müddəti 400–500 ms-dən çox olmamalıdır — daha uzun animasiyalar gecikmə kimi qəbul edilir. Material Design mobil keçidlər üçün 300–350 ms tövsiyə edir. Böyük elementlər (kartlar, şəkillər) üçün vaxt qavranılan performans itkisi olmadan 500–600 ms-ə qədər arta bilər.

Keçid animasiyalarının növləri

Keçid növləri hansı məzmunun necə dəyişməsindən asılı olaraq bir neçə kateqoriyaya bölünür. Əsas növlər: solğunlaşma (cross-fade) — birinin hamar itməsi və digərinin görünməsi; sürüşmə (slide) — bir ekran gedir, digəri gəlir; miqyaslama (scale/zoom) — element böyüyərək detallı ekranı açır. Kombinə edilmiş keçidlər bir neçə effekti birləşdirir.

Material Design qaydaları: vahid vizual dil yaratmaq üçün bir tətbiq daxilində bir keçid növündən istifadə edin. Eyni səviyyəli ekranlar arasında naviqasiya üçün slide (master → detail), bir ekran daxilində məzmun dəyişməsi üçün cross-fade (tablar, görünüş dəyişməsi), kartdan detallı ekrana keçid üçün scale/zoom (məhsul kartı → təsvir) tövsiyə olunur.

iOS-da Transition (Swift)

iOS-da UIView.transition bir View daxilində məzmun dəyişməsinin animasiyasının ən sadə üsuludur. O, cross-dissolve, curl-up, curl-down, flip-from-left, flip-from-right-ı dəstəkləyir. UIViewController arasında naviqasiya keçidləri üçün UINavigationControllerDelegate UIViewControllerAnimatedTransitioning ilə istifadə olunur — bu, push/pop animasiyası üzərində tam nəzarət verir.

import UIKit

// UIView.transition: şəklin cross-dissolve ilə dəyişdirilməsi
UIView.transition(with: imageView,
    duration: 0.4,
    options: [.transitionCrossDissolve, .curveEaseInOut]
) {
    self.imageView.image = UIImage(named: "new_image")
} completion: { _ in
    print("Transition tamamlandı")
}

// UIView.transition: iki View-in dəyişdirilməsi
UIView.transition(from: firstView, to: secondView,
    duration: 0.5,
    options: [.transitionFlipFromRight, .showHideTransitionViews]
) { _ in
    // firstView gizlədilib, secondView göstərilib
}

// Təbəqə üçün CATransition (Auto Layout olmadan)
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+ üçün xüsusi keçidlər üçün müasir alternativ. UIView.transition-dan fərqli olaraq, PropertyAnimator fasilə, ləğv və reverse (əks animasiya) dəstəkləyir, bu da interaktiv keçidlər (swipe-to-go-back) üçün vacibdir. UIViewController arasında animasiya üçün PropertyAnimator ilə birlikdə UIPercentDrivenInteractiveTransition istifadə edin — bu interaktiv naviqasiya üçün standart nümunədir.

Android-də Transition (Kotlin)

Android-də FragmentTransaction setCustomAnimations ilə Fragment arasında keçid animasiyasının əsas üsuludur. Parametrlər: enter (yeni Fragment-in giriş animasiyası), exit (köhnənin çıxış animasiyası), popEnter və popExit — geri naviqasiya üçün. FragmentTransaction resurs animasiyalarını (R.anim) və Transition Framework-ü (R.transition) dəstəkləyir.

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

// FragmentTransaction resurs animasiyaları ilə
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 ilə
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-nin başlanğıcında animasiya
val options = ActivityOptions.makeScaleUpAnimation(
    view, 0, 0, view.width, view.height
).toBundle()
startActivity(intent, options)

Android ən yaxşı təcrübələri: Slide() — naviqasiyada Fragment-in dəyişdirilməsi üçün (enter = Slide(Gravity.END), exit = Slide(Gravity.START)). Fade() — overlay və dialoqların göstərilməsi/gizlənməsi üçün. Explode() — vurğulu keçidlər üçün (elementin siyahıdan silinməsi). Köhnə cihazlar üçün (API < 21) fallback olaraq R.anim-dən istifadə edin. Transition Framework SurfaceView, TextureView, GLSurfaceView-i dəstəkləmir — video və kamera üçün yalnız R.anim vasitəsilə animasiyalardan istifadə edin.

iOS-da xüsusi UIViewController keçidləri

UIViewControllerAnimatedTransitioning — iOS-da kontrolerlər arasında tam xüsusi keçid animasiyaları yaratmaq üçün protokol. O, konteyner View-ə (transitionContext.containerView), mənbə və hədəf View-ə giriş verir. UIPercentDrivenInteractiveTransition ilə birlikdə bu yanaşma barmaq sürüşdürmə ilə interaktiv keçidlər yaratmağa imkan verir.

import UIKit

"> Keçid üçün custom animator
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-də tətbiq
extension MainViewController: UINavigationControllerDelegate {
    func navigationController(
        _ nc: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from: UIViewController, to: UIViewController
    ) -> UIViewControllerAnimatedTransitioning? {
        return ScaleTransitionAnimator(presenting: operation == .push)
    }
}

İnteraktiv keçidlər: mənbə ekrana UIPanGestureRecognizer əlavə edin. Jest işə düşdükdə UIPercentDrivenInteractiveTransition yaradın və update(CGFloat(percent)) çağırın. Həddə çatmadıqda ləğv etmək üçün (adətən 30%) cancel() çağırın. Bu nümunə UINavigationController-da pop jestində və UIScrollView-də pagingEnabled ilə standart olaraq istifadə olunur. Xüsusi jestlər üçün UIViewControllerInteractiveTransitioning-i tətbiq edin.

Android-də Transition Framework: səhnədən səhnəyə

Transition Framework (android.transition) — iki səhnə (Scene) arasında dəyişiklikləri avtomatik animasiya edən deklarativ sistemdir. Səhnə müəyyən vəziyyəti olan View dəstidir. Scene A-dan Scene B-yə keçiddə Transition Framework fərqi təhlil edir və animasiya edir: mövqe dəyişməsini (ChangeBounds), ölçü dəyişməsini (ChangeClipBounds, ChangeTransform), görünməni (Fade) və itməni (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 kombinasiyası
val transition = TransitionSet().apply {
    ordering = TransitionSet.ORDERING_TOGETHER
    addTransition(ChangeBounds())
    addTransition(Fade(Fade.IN))
    duration = 400L
    interpolator = FastOutSlowInInterpolator()
}

// ViewGroup-da səhnələr arasında keçid
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)

"> Əl ilə konfiqurasiya olmadan AutoTransition
TransitionManager.go(scene2, AutoTransition().apply {
    duration = 350L
})

// TransitionManager.beginDelayedTransition — səhnəsiz
TransitionManager.beginDelayedTransition(sceneRoot, ChangeBounds())
itemView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
itemView.requestLayout() "> Layout dəyişikliyi avtomatik animasiya olunur

ChangeBounds — Android-də ən çox istifadə olunan keçid, View-in mövqeyi və ölçüsünün dəyişməsini animasiya edir. ChangeTransform rotation və scale-i animasiya edir. ChangeImageTransform — ImageView-in animasiyası üçün (centerCrop → fitCenter). İyerarxiya strukturunun dəyişməsi ilə mürəkkəb keçidlər üçün ordering = ORDERING_SEQUENTIAL ilə TransitionSet istifadə edin (animasiyalar paralel deyil, ardıcıl icra olunur). Android Developers (2026) sənədləşməsinə görə, Transition Framework bütün standart View-ları dəstəkləyir, lakin səth animasiyasını dəstəkləmir (SurfaceView, TextureView, VideoView).