Transition: بنیادی باتیں، موبائل ایپس میں ٹرانزیشن اینیمیشن

Transition کیا ہے؟

Transition ایک اینیمیشن ہے جو بصری انٹرفیس کی حالت کو دوسری حالت سے بدلنے پر ہوتی ہے۔ Property Animation (کسی ایک شے کی خاصیت کو اینیمیٹ کرنا) کے برعکس، Transition تبدیلیوں کے پورے سیٹ کا انتظام کرتا ہے: عناصر کا ظاہر/غائب ہونا، ان کی پوزیشن، سائز اور خصوصیات کو ایک ہی ٹرانزیشن میں تبدیل کرنا۔ Transition مواد کی تبدیلی کے مسئلے کو ہموار طریقے سے حل کرتا ہے تاکہ صارف سمجھ سکے کہ کہاں کیا گیا۔

موبائل پلیٹ فارمز پر، Transition تین اہم منظرناموں میں استعمال ہوتا ہے: اسکرینوں کے درمیان نیویگیشن (push، pop، modal present)، فریگمنٹ کی تبدیلی (Android FragmentTransaction) اور اسکرین کے اندر حالت کی تبدیلی (کارڈ کا پھیلنا، ٹیب تبدیل کرنا)۔ ہر منظرنامے کو اپنے طریقہ کار کی ضرورت ہوتی ہے: نیویگیشن ٹرانزیشن — iOS میں UIViewControllerAnimatedTransitioning یا Android میں ActivityOptions، اسکرین کے اندر ٹرانزیشن — Transition Framework یا UIView.transition۔

Apple HIG (2026) کے مطابق، معیاری ٹرانزیشن کا دورانیہ 400–500 ms سے زیادہ نہیں ہونا چاہیے — لمبے اینیمیشن تاخیر کے طور پر محسوس ہوتے ہیں۔ Material Design موبائل ٹرانزیشن کے لیے 300–350 ms تجویز کرتا ہے۔ بڑے عناصر (کارڈز، تصاویر) کے لیے، وقت 500–600 ms تک بڑھایا جا سکتا ہے بغیر کارکردگی میں کمی کے۔

ٹرانزیشن اینیمیشن کی اقسام

ٹرانزیشن کی اقسام کئی زمروں میں تقسیم ہوتی ہیں اس بات پر منحصر ہے کہ کون سا مواد کیسے بدلتا ہے۔ بنیادی اقسام: cross-fade — ایک کا ہموار غائب ہونا اور دوسرے کا ظاہر ہونا؛ slide — ایک اسکرین باہر جاتی ہے، دوسری اندر آتی ہے؛ scale/zoom — ایک عنصر بڑھ کر تفصیلی اسکرین کھولتا ہے۔ مشترکہ ٹرانزیشن کئی اثرات کو ملاتی ہیں۔

Material Design قواعد: ایک متحد بصری زبان بنانے کے لیے ایک ایپ میں ایک ٹرانزیشن کی قسم استعمال کریں۔ تجویز کردہ: ایک ہی سطح کی اسکرینوں کے درمیان نیویگیشن کے لیے slide (ماسٹر → تفصیل)، ایک اسکرین کے اندر مواد کی تبدیلی کے لیے cross-fade (ٹیبز، ویو تبدیل کرنا)، کارڈ سے تفصیلی اسکرین میں جانے کے لیے scale/zoom (پروڈکٹ کارڈ → وضاحت)۔

iOS میں ٹرانزیشن (Swift)

iOS میں، UIView.transition ایک ہی View کے اندر مواد کی تبدیلیوں کو اینیمیٹ کرنے کا سب سے آسان طریقہ ہے۔ یہ cross-dissolve، curl-up، curl-down، flip-from-left، flip-from-right کو سپورٹ کرتا ہے۔ UIViewController کے درمیان نیویگیشن ٹرانزیشن کے لیے، UIViewControllerAnimatedTransitioning کے ساتھ UINavigationControllerDelegate استعمال کریں — یہ push/pop اینیمیشن پر مکمل کنٹرول دیتا ہے۔

import UIKit

// UIView.transition: cross-dissolve کے ساتھ تصویر کی تبدیلی
UIView.transition(with: imageView,
    duration: 0.4,
    options: [.transitionCrossDissolve, .curveEaseInOut]
) {
    self.imageView.image = UIImage(named: "new_image")
} completion: { _ in
    print("Transition completed")
}

// UIView.transition: دو ویوز کا تبادلہ
UIView.transition(from: firstView, to: secondView,
    duration: 0.5,
    options: [.transitionFlipFromRight, .showHideTransitionViews]
) { _ in
    // firstView پوشیدہ، secondView دکھایا گیا
}

// CATransition پرت کے لیے (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 iOS 10+ پر کسٹم ٹرانزیشن کے لیے ایک جدید متبادل ہے۔ UIView.transition کے برعکس، PropertyAnimator توقف، منسوخی اور ریورس اینیمیشن کو سپورٹ کرتا ہے، جو انٹرایکٹو ٹرانزیشن (سوائپ ٹو گو بیک) کے لیے اہم ہے۔ UIViewController کے درمیان اینیمیشن کے لیے، PropertyAnimator کے ساتھ UIPercentDrivenInteractiveTransition استعمال کریں — یہ انٹرایکٹو نیویگیشن کا معیاری پیٹرن ہے۔

Android میں ٹرانزیشن (Kotlin)

Android میں، FragmentTransaction setCustomAnimations کے ساتھ Fragment کے درمیان ٹرانزیشن کو اینیمیٹ کرنے کا اہم طریقہ ہے۔ پیرامیٹرز: enter (نئے Fragment کے داخلے کا اینیمیشن)، exit (پرانے Fragment کے باہر نکلنے کا اینیمیشن)، popEnter اور popExit — واپس نیویگیشن کے لیے۔ FragmentTransaction اینیمیشن وسائل (R.anim) اور Transition Framework (R.transition) کو سپورٹ کرتا ہے۔

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

// FragmentTransaction وسائل اینیمیشن کے ساتھ
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 کے ساتھ
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 شروع کرنے پر اینیمیشن
val options = ActivityOptions.makeScaleUpAnimation(
    view, 0, 0, view.width, view.height
).toBundle()
startActivity(intent, options)

Android بہترین طرز عمل: Slide() — نیویگیشن میں Fragment تبدیل کرنے کے لیے (enter = Slide(Gravity.END)، exit = Slide(Gravity.START))۔ Fade() — اوورلے اور ڈائیلاگ دکھانے/چھپانے کے لیے۔ Explode() — ایکسنٹ ٹرانزیشن کے لیے (فہرست سے آئٹم حذف کرنا)۔ پرانے آلات (API < 21) کے لیے R.anim وسائل کو فال بیک کے طور پر استعمال کریں۔ Transition Framework SurfaceView، TextureView، GLSurfaceView کو سپورٹ نہیں کرتا — ویڈیو اور کیمرہ کے لیے صرف R.anim اینیمیشن استعمال کریں۔

iOS میں کسٹم UIViewController ٹرانزیشن

UIViewControllerAnimatedTransitioning مکمل طور پر کسٹم ویو کنٹرولر ٹرانزیشن اینیمیشن بنانے کے لیے ایک iOS پروٹوکول ہے۔ یہ کنٹینر ویو (transitionContext.containerView)، سورس اور ٹارگٹ ویو تک رسائی فراہم کرتا ہے۔ UIPercentDrivenInteractiveTransition کے ساتھ مل کر، یہ طریقہ انگلی سے اسکرول کرنے کے ساتھ انٹرایکٹو ٹرانزیشن بنانے کی اجازت دیتا ہے۔

import UIKit

"> حسب ضرورت ٹرانزیشن اینیمیٹر
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 میں استعمال
extension MainViewController: UINavigationControllerDelegate {
    func navigationController(
        _ nc: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from: UIViewController, to: UIViewController
    ) -> UIViewControllerAnimatedTransitioning? {
        return ScaleTransitionAnimator(presenting: operation == .push)
    }
}

انٹرایکٹو ٹرانزیشن: سورس اسکرین پر UIPanGestureRecognizer شامل کریں۔ جب جیسچر فعال ہوتا ہے، UIPercentDrivenInteractiveTransition بنائیں اور update(CGFloat(percent)) کال کریں۔ جب حد (عام طور پر 30%) تک نہیں پہنچا جاتا تو منسوخ کرنے کے لیے cancel() کال کریں۔ یہ پیٹرن UINavigationController میں pop جیسچر کے لیے اور pagingEnabled کے ساتھ UIScrollView میں ڈیفالٹ طور پر استعمال ہوتا ہے۔ کسٹم جیسچر کے لیے، UIViewControllerInteractiveTransitioning کو لاگو کریں۔

Android میں Transition Framework: سین سے سین

Transition Framework (android.transition) ایک اعلامیاتی اینیمیشن سسٹم ہے جو دو سین (Scene) کے درمیان تبدیلیوں کو خود بخود اینیمیٹ کرتا ہے۔ سین ایک مخصوص حالت کے ساتھ Views کا ایک سیٹ ہے۔ سین A سے سین B میں جانے پر، Transition Framework فرق کا تجزیہ کرتا ہے اور اینیمیٹ کرتا ہے: پوزیشن کی تبدیلی (ChangeBounds)، سائز کی تبدیلی (ChangeClipBounds، ChangeTransform)، ظاہر ہونا (Fade) اور غائب ہونا (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 کا مجموعہ
val transition = TransitionSet().apply {
    ordering = TransitionSet.ORDERING_TOGETHER
    addTransition(ChangeBounds())
    addTransition(Fade(Fade.IN))
    duration = 400L
    interpolator = FastOutSlowInInterpolator()
}

// 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
TransitionManager.go(scene2, AutoTransition().apply {
    duration = 350L
})

// TransitionManager.beginDelayedTransition — سین کے بغیر
TransitionManager.beginDelayedTransition(sceneRoot, ChangeBounds())
itemView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
itemView.requestLayout() "> layout کی تبدیلی خودکار طور پر اینیمیٹ ہوتی ہے

ChangeBounds Android میں سب سے زیادہ استعمال ہونے والی ٹرانزیشن ہے، یہ View کی پوزیشن اور سائز کی تبدیلیوں کو اینیمیٹ کرتا ہے۔ ChangeTransform گردش اور اسکیل کو اینیمیٹ کرتا ہے۔ ChangeImageTransform — ImageView اینیمیشن کے لیے (centerCrop → fitCenter)۔ درجہ بندی کی ساخت میں تبدیلیوں کے ساتھ پیچیدہ ٹرانزیشن کے لیے، ordering = ORDERING_SEQUENTIAL کے ساتھ TransitionSet استعمال کریں (اینیمیشن متوازی میں نہیں بلکہ ترتیب سے انجام پاتے ہیں)۔ Android Developers (2026) دستاویزات کے مطابق، Transition Framework تمام معیاری Views کو سپورٹ کرتا ہے لیکن سطح اینیمیشن (SurfaceView، TextureView، VideoView) کو سپورٹ نہیں کرتا۔