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 (master → detail), एक स्क्रीन के भीतर सामग्री परिवर्तन के लिए 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 विराम, रद्दीकरण और रिवर्स एनिमेशन का समर्थन करता है, जो इंटरैक्टिव ट्रांज़िशन (स्वाइप-टू-गो-बैक) के लिए महत्वपूर्ण है। UIViewControllers के बीच एनिमेशन के लिए, 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) का समर्थन नहीं करता।