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 রিসোর্স ফallback হিসাবে ব্যবহার করুন। 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) সমর্থন করে না।