Transition: mga batayan, animation ng transition sa mga mobile app

Ano ang Transition?

Transition — ay isang animation na nagaganap kapag ang isang biswal na estado ng interface ay pinalitan ng isa pa. Hindi tulad ng Property Animation (animation ng property ng isang bagay), ang Transition ay namamahala ng isang buong hanay ng mga pagbabago: paglitaw/paglaho ng mga elemento, pagbabago ng kanilang posisyon, laki, at mga property sa loob ng isang transition. Nilulutas ng Transition ang problema ng maayos na pagbabago ng nilalaman upang maunawaan ng user kung ano ang lumipat saan.

Sa mga mobile platform, ang Transition ay inilalapat sa tatlong pangunahing senaryo: navigation sa pagitan ng screen (push, pop, modal present), pagpapalit ng fragment (Android FragmentTransaction), at pagbabago ng estado sa loob ng screen (pagpapalawak ng card, pagpapalit ng tab). Ang bawat senaryo ay nangangailangan ng sariling approach: navigation transitions — UIViewControllerAnimatedTransitioning sa iOS o ActivityOptions sa Android, intra-screen transitions — Transition Framework o UIView.transition.

Ayon sa Apple HIG (2026), ang tagal ng isang standard transition ay hindi dapat lumampas sa 400–500 ms — ang mas mahabang animation ay itinuturing na pagkaantala. Inirerekomenda ng Material Design ang 300–350 ms para sa mobile transitions. Para sa malalaking elemento (card, larawan), ang oras ay maaaring tumaas hanggang 500–600 ms nang walang pagkawala ng perceived performance.

Mga uri ng animation ng transition

Mga uri ng transition ay nahahati sa ilang kategorya depende sa kung anong nilalaman ang nagbabago at paano. Mga pangunahing uri: pagfade (cross-fade) — unti-unting pagkawala ng isa at paglitaw ng isa pa; pag-slide (slide) — isang screen ang umaalis, ang isa ay pumapasok; pag-scale (scale/zoom) — lumalaki ang isang elemento, binubuksan ang isang detalyadong screen. Pinagsasama ng kombinadong transition ang maraming epekto.

Mga patakaran ng Material Design: gumamit ng isang uri ng transition sa loob ng isang app upang lumikha ng pare-parehong visual na wika. Inirerekomenda ang slide para sa navigation sa pagitan ng pantay na antas ng screen (master → detail), cross-fade para sa pagbabago ng nilalaman sa loob ng isang screen (tab, pagpapalit ng view), scale/zoom para sa transition mula sa card patungo sa detalyadong screen (card ng produkto → deskripsyon).

Transition sa iOS (Swift)

Sa iOS UIView.transition ay ang pinakasimpleng paraan upang i-animate ang pagbabago ng nilalaman sa loob ng isang View. Ito ay sumusuporta sa cross-dissolve, curl-up, curl-down, flip-from-left, flip-from-right. Para sa navigation transitions sa pagitan ng UIViewController, ginagamit ang UINavigationControllerDelegate na may UIViewControllerAnimatedTransitioning — nagbibigay ito ng buong kontrol sa push/pop animation.

import UIKit

// UIView.transition: pagpapalit ng larawan gamit ang cross-dissolve
UIView.transition(with: imageView,
    duration: 0.4,
    options: [.transitionCrossDissolve, .curveEaseInOut]
) {
    self.imageView.image = UIImage(named: "new_image")
} completion: { _ in
    print("Transition natapos")
}

// UIView.transition: pagpapalit ng dalawang View
UIView.transition(from: firstView, to: secondView,
    duration: 0.5,
    options: [.transitionFlipFromRight, .showHideTransitionViews]
) { _ in
    // firstView nakatago, secondView ipinakita
}

// CATransition para sa layer (walang Auto Layout)
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 — isang modernong alternatibo para sa custom na transition sa iOS 10+. Hindi tulad ng UIView.transition, ang PropertyAnimator ay sumusuporta sa pause, pagkansela, at reverse (pabalik na animation), na mahalaga para sa interactive na transition (swipe-to-go-back). Para sa animation sa pagitan ng UIViewController, gamitin ang UIPercentDrivenInteractiveTransition kasama ang PropertyAnimator — ito ang standard pattern para sa interactive navigation.

Transition sa Android (Kotlin)

Sa Android FragmentTransaction na may setCustomAnimations ay ang pangunahing paraan upang i-animate ang transition sa pagitan ng Fragment. Mga parameter: enter (animation ng pagpasok ng bagong Fragment), exit (animation ng pag-alis ng luma), popEnter at popExit — para sa pabalik na navigation. Sinusuportahan ng FragmentTransaction ang resource animations (R.anim) at Transition Framework (R.transition).

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

// FragmentTransaction na may resource animations
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 na may Transition Framework
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: animation sa pagsisimula ng Activity
val options = ActivityOptions.makeScaleUpAnimation(
    view, 0, 0, view.width, view.height
).toBundle()
startActivity(intent, options)

Pinakamahusay na kasanayan sa Android: Slide() — para sa pagpapalit ng Fragment sa navigation (enter = Slide(Gravity.END), exit = Slide(Gravity.START)). Fade() — para sa pagpapakita/pagtatago ng overlay at dialog. Explode() — para sa accent transition (pag-alis ng elemento mula sa listahan). Para sa lumang device (API < 21) gamitin ang R.anim bilang fallback. Hindi sinusuportahan ng Transition Framework ang SurfaceView, TextureView, GLSurfaceView — para sa video at camera gamitin lamang ang animation sa pamamagitan ng R.anim.

Custom na UIViewController transition sa iOS

UIViewControllerAnimatedTransitioning — protocol ng iOS para sa paglikha ng ganap na custom na animation ng transition sa pagitan ng controller. Nagbibigay ito ng access sa container View (transitionContext.containerView), source at target View. Sa kombinasyon ng UIPercentDrivenInteractiveTransition, ang approach na ito ay nagpapahintulot sa paglikha ng interactive na transition sa pamamagitan ng pag-swipe ng daliri.

import UIKit

"> Custom na transition 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)
        }
    }
}

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

Interactive na transition: magdagdag ng UIPanGestureRecognizer sa source screen. Kapag na-trigger ang gesture, lumikha ng UIPercentDrivenInteractiveTransition at tawagan ang update(CGFloat(percent)). Para sa pagkansela kapag hindi naabot ang threshold (karaniwang 30%), tawagan ang cancel(). Ang pattern na ito ay ginagamit bilang default sa UINavigationController sa pop gesture at sa UIScrollView na may pagingEnabled. Para sa custom na gesture, i-implement ang UIViewControllerInteractiveTransitioning.

Transition Framework sa Android: scene sa scene

Transition Framework (android.transition) — ay isang declarative animation system na awtomatikong nag-a-animate ng mga pagbabago sa pagitan ng dalawang scene (Scene). Ang scene ay isang set ng View na may partikular na estado. Sa transition mula Scene A patungong Scene B, sinusuri ng Transition Framework ang pagkakaiba at nag-a-animate: pagbabago ng posisyon (ChangeBounds), pagbabago ng laki (ChangeClipBounds, ChangeTransform), paglitaw (Fade) at pagkawala (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: kombinasyon ng ChangeBounds + Fade
val transition = TransitionSet().apply {
    ordering = TransitionSet.ORDERING_TOGETHER
    addTransition(ChangeBounds())
    addTransition(Fade(Fade.IN))
    duration = 400L
    interpolator = FastOutSlowInInterpolator()
}

// Transition sa pagitan ng scene sa ViewGroup
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 nang walang manual na setup
TransitionManager.go(scene2, AutoTransition().apply {
    duration = 350L
})

// TransitionManager.beginDelayedTransition — walang scene
TransitionManager.beginDelayedTransition(sceneRoot, ChangeBounds())
itemView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
itemView.requestLayout() "> Ang pagbabago ng layout ay awtomatikong ina-animate

ChangeBounds — ang pinaka-ginagamit na transition sa Android, nag-a-animate ng pagbabago ng posisyon at laki ng View. Ang ChangeTransform ay nag-a-animate ng rotation at scale. Ang ChangeImageTransform — para sa animation ng ImageView (centerCrop → fitCenter). Para sa kumplikadong transition na may pagbabago ng hierarchy structure, gamitin ang TransitionSet na may ordering = ORDERING_SEQUENTIAL (ang animation ay isinasagawa nang sunud-sunod, hindi parallel). Ayon sa dokumentasyon ng Android Developers (2026), sinusuportahan ng Transition Framework ang lahat ng standard View, ngunit hindi nito sinusuportahan ang surface animation (SurfaceView, TextureView, VideoView).