Transition: alapok, átmeneti animáció mobilalkalmazásokban

Mi az a Transition?

Transition — egy animáció, amely akkor történik, amikor a felület egyik vizuális állapotát egy másik váltja fel. A Property Animation-től (egy objektum tulajdonságának animációja) eltérően a Transition a változtatások teljes halmazát kezeli: elemek megjelenése/eltűnése, pozíciójuk, méretük és tulajdonságaik változása egyetlen átmeneten belül. A Transition megoldja a tartalom zökkenőmentes cseréjének problémáját úgy, hogy a felhasználó megértse, mi hova került.

Mobil platformokon a Transition három fő forgatókönyvben alkalmazható: navigáció képernyők között (push, pop, modal present), fragmensek cseréje (Android FragmentTransaction) és állapotváltozás képernyőn belül (kártya kinyitása, lapok váltása). Minden forgatókönyv saját megközelítést igényel: navigációs átmenetek — UIViewControllerAnimatedTransitioning iOS rendszeren vagy ActivityOptions Android rendszeren, képernyőn belüli átmenetek — Transition Framework vagy UIView.transition.

Az Apple HIG (2026) szerint a szabványos átmenet időtartama nem haladhatja meg a 400–500 ms-ot — a hosszabb animációk késleltetésként érzékelhetők. A Material Design 300–350 ms-ot ajánl mobil átmenetekhez. Nagy elemek (kártyák, képek) esetén az idő 500–600 ms-ra növelhető az észlelt teljesítmény elvesztése nélkül.

Átmeneti animációk típusai

Az átmenetek típusai több kategóriába sorolhatók attól függően, hogy milyen tartalom hogyan változik. Alaptípusok: elhalványulás (cross-fade) — az egyik fokozatos eltűnése és a másik megjelenése; csúsztatás (slide) — az egyik képernyő elmegy, a másik bejön; méretezés (scale/zoom) — egy elem megnő, megnyitva a részletes képernyőt. A kombinált átmenetek több effektet egyesítenek.

Material Design szabályok: használjon egy átmenettípust egy alkalmazáson belül az egységes vizuális nyelv kialakításához. A slide ajánlott azonos szintű képernyők közötti navigációhoz (master → detail), a cross-fade tartalomváltáshoz egy képernyőn belül (lapok, nézetváltás), a scale/zoom a kártyáról részletes képernyőre való átmenethez (termékkártya → leírás).

Transition iOS rendszeren (Swift)

iOS rendszeren a UIView.transition a legegyszerűbb módja a tartalomváltás animálásának egyetlen View-n belül. Támogatja a cross-dissolve, curl-up, curl-down, flip-from-left, flip-from-right lehetőségeket. A UIViewController-ek közötti navigációs átmenetekhez az UINavigationControllerDelegate-et használják a UIViewControllerAnimatedTransitioning-gel — ez teljes irányítást ad a push/pop animáció felett.

import UIKit

// UIView.transition: kép cseréje cross-dissolve-val
UIView.transition(with: imageView,
    duration: 0.4,
    options: [.transitionCrossDissolve, .curveEaseInOut]
) {
    self.imageView.image = UIImage(named: "new_image")
} completion: { _ in
    print("Transition befejezve")
}

// UIView.transition: két View cseréje
UIView.transition(from: firstView, to: secondView,
    duration: 0.5,
    options: [.transitionFlipFromRight, .showHideTransitionViews]
) { _ in
    // firstView elrejtve, secondView megjelenítve
}

// CATransition réteghez (Auto Layout nélkül)
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 — modern alternatíva egyedi átmenetekhez iOS 10+ rendszeren. A UIView.transition-tól eltérően a PropertyAnimator támogatja a szüneteltetést, a megszakítást és a reverse (fordított animáció) funkciót, ami fontos az interaktív átmenetekhez (swipe-to-go-back). A UIViewController-ek közötti animációhoz használja az UIPercentDrivenInteractiveTransition-t a PropertyAnimator-ral párosítva — ez a standard minta az interaktív navigációhoz.

Transition Android rendszeren (Kotlin)

Android rendszeren a FragmentTransaction a setCustomAnimations-szal a fő módja a Fragment-ek közötti átmenet animálásának. Paraméterek: enter (az új Fragment belépési animációja), exit (a régi kilépési animációja), popEnter és popExit — a visszafelé navigációhoz. A FragmentTransaction támogatja az erőforrás-animációkat (R.anim) és a Transition Framework-öt (R.transition).

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

// FragmentTransaction erőforrás-animációkkal
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-kel
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: animáció Activity indításakor
val options = ActivityOptions.makeScaleUpAnimation(
    view, 0, 0, view.width, view.height
).toBundle()
startActivity(intent, options)

Android legjobb gyakorlatok: Slide() — Fragment cseréjéhez navigációban (enter = Slide(Gravity.END), exit = Slide(Gravity.START)). Fade() — overlay és párbeszédablakok megjelenítéséhez/elrejtéséhez. Explode() — hangsúlyos átmenetekhez (elem eltávolítása listából). Régebbi eszközökön (API < 21) használja az R.anim-ot fallback-ként. A Transition Framework nem támogatja a SurfaceView, TextureView, GLSurfaceView típusokat — videóhoz és kamerához csak R.anim animációkat használjon.

Egyedi UIViewController átmenetek iOS rendszeren

UIViewControllerAnimatedTransitioning — iOS protokoll teljesen egyedi átmeneti animációk létrehozásához vezérlők között. Hozzáférést biztosít a konténer View-hoz (transitionContext.containerView), a forrás- és cél-View-hoz. Az UIPercentDrivenInteractiveTransition-nal kombinálva ez a megközelítés lehetővé teszi interaktív átmenetek létrehozását ujjal való húzással.

import UIKit

"> Egyéni átmenet-animátor
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)
        }
    }
}

// Alkalmazás UINavigationControllerDelegate-ben
extension MainViewController: UINavigationControllerDelegate {
    func navigationController(
        _ nc: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from: UIViewController, to: UIViewController
    ) -> UIViewControllerAnimatedTransitioning? {
        return ScaleTransitionAnimator(presenting: operation == .push)
    }
}

Interaktív átmenetek: adjon hozzá UIPanGestureRecognizer-t a forrásképernyőhöz. A gesztus aktiválásakor hozzon létre egy UIPercentDrivenInteractiveTransition-t és hívja meg az update(CGFloat(percent)) függvényt. A küszöb (általában 30%) elérésének elmulasztásakor a megszakításhoz hívja meg a cancel() függvényt. Ezt a mintát alapértelmezés szerint az UINavigationController használja a pop gesztusnál és az UIScrollView a pagingEnabled beállítással. Egyedi gesztusokhoz implementálja a UIViewControllerInteractiveTransitioning protokollt.

Transition Framework Android rendszeren: jelenetről jelenetre

Transition Framework (android.transition) — egy deklaratív animációs rendszer, amely automatikusan animálja a változtatásokat két jelenet (Scene) között. A jelenet egy meghatározott állapotú View-ok halmaza. A Scene A-ról Scene B-re való átmenet során a Transition Framework elemzi a különbséget és animálja: pozícióváltozást (ChangeBounds), méretváltozást (ChangeClipBounds, ChangeTransform), megjelenést (Fade) és eltűnést (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 kombináció
val transition = TransitionSet().apply {
    ordering = TransitionSet.ORDERING_TOGETHER
    addTransition(ChangeBounds())
    addTransition(Fade(Fade.IN))
    duration = 400L
    interpolator = FastOutSlowInInterpolator()
}

// Átmenet jelenetek között ViewGroup-ban
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)

"> AutoTransition kézi beállítás nélkül
TransitionManager.go(scene2, AutoTransition().apply {
    duration = 350L
})

// TransitionManager.beginDelayedTransition — jelenetek nélkül
TransitionManager.beginDelayedTransition(sceneRoot, ChangeBounds())
itemView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
itemView.requestLayout() "> A layout változásai automatikusan animálódnak

ChangeBounds — a legtöbbet használt átmenet Android rendszeren, a View pozíciójának és méretének változását animálja. A ChangeTransform a rotation és scale értékeket animálja. A ChangeImageTransform — ImageView animációjához (centerCrop → fitCenter). Összetett, hierarchia-struktúra változással járó átmenetekhez használjon TransitionSet-et ordering = ORDERING_SEQUENTIAL beállítással (az animációk egymás után futnak, nem párhuzamosan). Az Android Developers (2026) dokumentációja szerint a Transition Framework támogatja az összes szabványos View-t, de nem támogatja a felületanimációt (SurfaceView, TextureView, VideoView).