একটি ট্রানজিশন ব্যবহার করে অ্যানিমেট লেআউট পরিবর্তন

কম্পোজ পদ্ধতিটি চেষ্টা করুন
জেটপ্যাক কম্পোজ অ্যান্ড্রয়েডের জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে কীভাবে অ্যানিমেশন ব্যবহার করতে হয় তা জানুন।
অ্যানিমেটেড কন্টেন্ট →

অ্যান্ড্রয়েডের ট্রানজিশন ফ্রেমওয়ার্ক শুরুর এবং শেষের লেআউট নির্ধারণ করে দেওয়ার মাধ্যমে আপনার UI-তে সব ধরনের গতিবিধি অ্যানিমেট করার সুযোগ দেয়। আপনি কী ধরনের অ্যানিমেশন চান—যেমন ভিউকে ধীরে ধীরে দৃশ্যমান বা অদৃশ্য করা, অথবা ভিউয়ের আকার পরিবর্তন করা—তা নির্বাচন করতে পারেন এবং ট্রানজিশন ফ্রেমওয়ার্কই নির্ধারণ করে দেয় যে শুরুর লেআউট থেকে শেষের লেআউটে কীভাবে অ্যানিমেট করা হবে।

রূপান্তর কাঠামোটিতে নিম্নলিখিত বৈশিষ্ট্যগুলো অন্তর্ভুক্ত রয়েছে:

  • গ্রুপ-স্তরের অ্যানিমেশন: একটি ভিউ হায়ারার্কির সমস্ত ভিউতে অ্যানিমেশন ইফেক্ট প্রয়োগ করুন।
  • অন্তর্নির্মিত অ্যানিমেশন: ফেড আউট বা মুভমেন্টের মতো সাধারণ ইফেক্টগুলোর জন্য পূর্বনির্ধারিত অ্যানিমেশন ব্যবহার করুন।
  • রিসোর্স ফাইল সমর্থন: লেআউট রিসোর্স ফাইল থেকে ভিউ হায়ারার্কি এবং বিল্ট-ইন অ্যানিমেশন লোড করুন।
  • লাইফসাইকেল কলব্যাক: এমন কলব্যাক গ্রহণ করুন যা অ্যানিমেশন এবং হায়ারার্কি পরিবর্তন প্রক্রিয়ার উপর নিয়ন্ত্রণ প্রদান করে।

লেআউট পরিবর্তনের মধ্যে অ্যানিমেশন ঘটানোর নমুনা কোডের জন্য BasicTransition দেখুন।

দুটি লেআউটের মধ্যে অ্যানিমেট করার মৌলিক প্রক্রিয়াটি নিম্নরূপ:

  1. শুরু এবং শেষের লেআউটের জন্য একটি Scene অবজেক্ট তৈরি করুন। তবে, শুরুর লেআউটের সিন প্রায়শই বর্তমান লেআউট থেকে স্বয়ংক্রিয়ভাবে নির্ধারিত হয়।
  2. আপনি কী ধরনের অ্যানিমেশন চান তা নির্ধারণ করতে একটি Transition অবজেক্ট তৈরি করুন।
  3. TransitionManager.go() কল করলে, সিস্টেম লেআউটগুলো অদলবদল করার জন্য অ্যানিমেশনটি চালায়।

চিত্র ১-এর ডায়াগ্রামটি আপনার লেআউট, সিন, ট্রানজিশন এবং চূড়ান্ত অ্যানিমেশনের মধ্যকার সম্পর্ককে তুলে ধরে।

চিত্র ১. ট্রানজিশন ফ্রেমওয়ার্ক কীভাবে একটি অ্যানিমেশন তৈরি করে তার প্রাথমিক চিত্র।

একটি দৃশ্য তৈরি করুন

সিনগুলো একটি ভিউ হায়ারার্কির অবস্থা সংরক্ষণ করে, যার মধ্যে এর সমস্ত ভিউ এবং তাদের প্রপার্টি ভ্যালু অন্তর্ভুক্ত থাকে। ট্রানজিশন ফ্রেমওয়ার্কটি একটি শুরুর এবং একটি শেষের সিনের মধ্যে অ্যানিমেশন চালাতে পারে।

আপনি একটি লেআউট রিসোর্স ফাইল থেকে অথবা আপনার কোডের ভিউগুলোর একটি গ্রুপ থেকে আপনার সিন তৈরি করতে পারেন। তবে, আপনার ট্রানজিশনের শুরুর সিনটি প্রায়শই বর্তমান UI থেকে স্বয়ংক্রিয়ভাবে নির্ধারিত হয়।

একটি সিন তার নিজস্ব অ্যাকশনও নির্ধারণ করতে পারে, যা সিন পরিবর্তনের সময় কার্যকর হয়। কোনো সিনে ট্রানজিশন করার পর ভিউ সেটিংস গুছিয়ে নেওয়ার জন্য এই ফিচারটি বেশ উপযোগী।

একটি লেআউট রিসোর্স থেকে একটি দৃশ্য তৈরি করুন

আপনি সরাসরি একটি লেআউট রিসোর্স ফাইল থেকে একটি Scene ইনস্ট্যান্স তৈরি করতে পারেন। যখন ফাইলের ভিউ হায়ারার্কি মূলত স্থির থাকে, তখন এই পদ্ধতিটি ব্যবহার করুন। ফলস্বরূপ সিনটি, Scene ইনস্ট্যান্সটি তৈরি করার সময়কার ভিউ হায়ারার্কির অবস্থাকে উপস্থাপন করে। যদি আপনি ভিউ হায়ারার্কি পরিবর্তন করেন, তবে সিনটি পুনরায় তৈরি করুন। ফ্রেমওয়ার্কটি ফাইলের সম্পূর্ণ ভিউ হায়ারার্কি থেকে সিনটি তৈরি করে। আপনি একটি লেআউট ফাইলের অংশবিশেষ থেকে সিন তৈরি করতে পারবেন না।

একটি লেআউট রিসোর্স ফাইল থেকে একটি Scene ইনস্ট্যান্স তৈরি করতে, আপনার লেআউট থেকে সিন রুটটিকে একটি ViewGroup হিসেবে নিন। তারপর, সিন রুট এবং যে লেআউট ফাইলে সিনটির ভিউ হায়ারার্কি রয়েছে, সেই ফাইলের রিসোর্স আইডি সহ Scene.getSceneForLayout() ফাংশনটি কল করুন।

দৃশ্যগুলির জন্য লেআউট সংজ্ঞায়িত করুন

এই বিভাগের বাকি অংশে থাকা কোড স্নিপেটগুলো দেখাবে কীভাবে একই সিন রুট এলিমেন্ট ব্যবহার করে দুটি ভিন্ন সিন তৈরি করা যায়। এই স্নিপেটগুলো আরও দেখাবে যে, আপনি একাধিক সম্পর্কহীন Scene অবজেক্ট লোড করতে পারেন এবং সেক্ষেত্রে তাদের মধ্যে কোনো সম্পর্ক আছে বলে বোঝানো হবে না।

উদাহরণটিতে নিম্নলিখিত লেআউট সংজ্ঞাগুলো রয়েছে:

  • একটি টেক্সট লেবেল এবং একটি চাইল্ড FrameLayout সহ একটি অ্যাক্টিভিটির প্রধান লেআউট।
  • প্রথম দৃশ্যের জন্য দুটি টেক্সট ফিল্ড সহ একটি ConstraintLayout ।
  • দ্বিতীয় দৃশ্যের জন্য একটি ConstraintLayout , যেখানে একই দুটি টেক্সট ফিল্ড ভিন্ন ক্রমে রয়েছে।

উদাহরণটি এমনভাবে ডিজাইন করা হয়েছে যাতে সমস্ত অ্যানিমেশন অ্যাক্টিভিটির মূল লেআউটের চাইল্ড লেআউটের মধ্যে ঘটে। মূল লেআউটের টেক্সট লেবেলটি স্থির থাকে।

অ্যাক্টিভিটির প্রধান লেআউটটি নিম্নরূপভাবে সংজ্ঞায়িত করা হয়েছে:

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/master_layout">
    <TextView
        android:id="@+id/title"
        ...
        android:text="Title"/>
    <FrameLayout
        android:id="@+id/scene_root">
        <include layout="@layout/a_scene" />
    </FrameLayout>
</LinearLayout>

এই লেআউট ডেফিনিশনে একটি টেক্সট ফিল্ড এবং সিন রুটের জন্য একটি চাইল্ড FrameLayout রয়েছে। প্রথম সিনের লেআউটটি মূল লেআউট ফাইলে অন্তর্ভুক্ত করা হয়েছে। এর ফলে অ্যাপটি এটিকে প্রাথমিক ইউজার ইন্টারফেসের অংশ হিসেবে প্রদর্শন করতে এবং একটি সিনে লোডও করতে পারে, কারণ ফ্রেমওয়ার্ক শুধুমাত্র একটি সম্পূর্ণ লেআউট ফাইলই একটি সিনে লোড করতে পারে।

প্রথম দৃশ্যের বিন্যাসটি নিম্নরূপভাবে সংজ্ঞায়িত করা হয়েছে:

res/layout/a_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toBottomOf="@id/text_view1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

দ্বিতীয় দৃশ্যের লেআউটে একই আইডি সহ সেই একই দুটি টেক্সট ফিল্ড ভিন্ন ক্রমে সাজানো আছে। এটি নিম্নরূপভাবে সংজ্ঞায়িত করা হয়েছে:

res/layout/another_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toBottomOf="@id/text_view2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

লেআউট থেকে দৃশ্য তৈরি করুন

দুটি কনস্ট্রেইন্ট লেআউটের জন্য ডেফিনিশন তৈরি করার পর, আপনি সেগুলোর প্রতিটির জন্য একটি করে সিন পেতে পারেন। এটি আপনাকে দুটি UI কনফিগারেশনের মধ্যে ট্রানজিশন করতে দেয়। একটি সিন পেতে, আপনার সিন রুটের রেফারেন্স এবং লেআউট রিসোর্স আইডি প্রয়োজন।

নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে লেআউট ফাইলগুলি থেকে সিন রুটের একটি রেফারেন্স পেতে এবং দুটি Scene অবজেক্ট তৈরি করতে হয়:

কোটলিন 

val sceneRoot: ViewGroup = findViewById(R.id.scene_root)
val aScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this)
val anotherScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this)

জাভা 

Scene aScene;
Scene anotherScene;

// Create the scene root for the scenes in this app.
sceneRoot = (ViewGroup) findViewById(R.id.scene_root);

// Create the scenes.
aScene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this);
anotherScene =
    Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this);

অ্যাপটিতে এখন ভিউ হায়ারার্কির উপর ভিত্তি করে দুটি Scene অবজেক্ট রয়েছে। উভয় Scene-ই res/layout/activity_main.xml এ থাকা FrameLayout এলিমেন্ট দ্বারা সংজ্ঞায়িত সিন রুট ব্যবহার করে।

আপনার কোডে একটি দৃশ্য তৈরি করুন

আপনি আপনার কোডে একটি ViewGroup অবজেক্ট থেকেও একটি Scene ইনস্ট্যান্স তৈরি করতে পারেন। যখন আপনি সরাসরি আপনার কোডে ভিউ হায়ারার্কি পরিবর্তন করেন অথবা যখন আপনি সেগুলোকে ডায়নামিকভাবে তৈরি করেন, তখন এই পদ্ধতিটি ব্যবহার করুন।

আপনার কোডে ভিউ হায়ারার্কি থেকে একটি সিন তৈরি করতে, Scene(sceneRoot, viewHierarchy) কনস্ট্রাক্টরটি ব্যবহার করুন। এই কনস্ট্রাক্টরটি কল করা, একটি লেআউট ফাইল ইতোমধ্যে ইনফ্লেট করার পর Scene.getSceneForLayout() ফাংশনটি কল করার সমতুল্য।

নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে আপনার কোডে সিন রুট এলিমেন্ট এবং সিনের জন্য ভিউ হায়ারার্কি থেকে একটি Scene ইনস্ট্যান্স তৈরি করতে হয়:

কোটলিন 

val sceneRoot = someLayoutElement as ViewGroup
val viewHierarchy = someOtherLayoutElement as ViewGroup
val scene: Scene = Scene(sceneRoot, viewHierarchy)

জাভা 

Scene mScene;

// Obtain the scene root element.
sceneRoot = (ViewGroup) someLayoutElement;

// Obtain the view hierarchy to add as a child of
// the scene root when this scene is entered.
viewHierarchy = (ViewGroup) someOtherLayoutElement;

// Create a scene.
mScene = new Scene(sceneRoot, mViewHierarchy);

দৃশ্য ক্রিয়া তৈরি করুন

এই ফ্রেমওয়ার্কটি আপনাকে কাস্টম সিন অ্যাকশন নির্ধারণ করার সুযোগ দেয়, যা কোনো সিনে প্রবেশ বা প্রস্থান করার সময় সিস্টেম দ্বারা চালিত হয়। অনেক ক্ষেত্রে, কাস্টম সিন অ্যাকশন নির্ধারণ করার প্রয়োজন হয় না, কারণ ফ্রেমওয়ার্কটি স্বয়ংক্রিয়ভাবে সিন পরিবর্তনের অ্যানিমেশন সম্পন্ন করে।

এই পরিস্থিতিগুলো সামাল দেওয়ার জন্য সিন অ্যাকশনগুলো কার্যকর:

  • যে ভিউগুলো একই হায়ারার্কিতে নেই, সেগুলোকে অ্যানিমেট করতে আপনি এক্সিট এবং এন্ট্রি সিন অ্যাকশন ব্যবহার করে শুরুর এবং শেষের দৃশ্যের ভিউগুলোকে অ্যানিমেট করতে পারেন।
  • যেসব ভিউ ট্রানজিশন ফ্রেমওয়ার্ক স্বয়ংক্রিয়ভাবে অ্যানিমেট করতে পারে না, যেমন ListView অবজেক্ট, সেগুলোকে অ্যানিমেট করার জন্য। আরও তথ্যের জন্য, সীমাবদ্ধতা সম্পর্কিত বিভাগটি দেখুন।

কাস্টম সিন অ্যাকশন প্রদান করতে, আপনার অ্যাকশনগুলোকে Runnable অবজেক্ট হিসেবে সংজ্ঞায়িত করুন এবং সেগুলোকে Scene.setExitAction() বা Scene.setEnterAction() ফাংশনে পাস করুন। ফ্রেমওয়ার্কটি ট্রানজিশন অ্যানিমেশন চালানোর আগে শুরুর সিনে setExitAction() ফাংশনটি এবং ট্রানজিশন অ্যানিমেশন চালানোর পরে শেষের সিনে setEnterAction() ফাংশনটি কল করে।

একটি রূপান্তর প্রয়োগ করুন

ট্রানজিশন ফ্রেমওয়ার্ক একটি Transition অবজেক্টের মাধ্যমে সিনগুলোর মধ্যে অ্যানিমেশনের ধরন উপস্থাপন করে। আপনি AutoTransition এবং Fade মতো বিল্ট-ইন সাবক্লাস ব্যবহার করে একটি Transition ইনস্ট্যানশিয়েট করতে পারেন, অথবা আপনার নিজস্ব ট্রানজিশন সংজ্ঞায়িত করতে পারেন । এরপর, TransitionManager.go() -তে আপনার শেষ Scene এবং Transition পাস করে আপনি সিনগুলোর মধ্যে অ্যানিমেশনটি চালাতে পারেন।

ট্রানজিশন লাইফসাইকেলটি অ্যাক্টিভিটি লাইফসাইকেলের অনুরূপ, এবং এটি একটি অ্যানিমেশনের শুরু থেকে শেষ পর্যন্ত ফ্রেমওয়ার্ক দ্বারা পর্যবেক্ষণ করা ট্রানজিশন স্টেটগুলোকে উপস্থাপন করে। লাইফসাইকেলের গুরুত্বপূর্ণ স্টেটগুলোতে, ফ্রেমওয়ার্ক কলব্যাক ফাংশনগুলোকে আহ্বান করে, যেগুলো আপনি ট্রানজিশনের বিভিন্ন পর্যায়ে আপনার ইউজার ইন্টারফেস সামঞ্জস্য করার জন্য প্রয়োগ করতে পারেন।

একটি রূপান্তর তৈরি করুন

পূর্ববর্তী বিভাগে দেখানো হয়েছে কীভাবে বিভিন্ন ভিউ হায়ারার্কির অবস্থা উপস্থাপনকারী সিন তৈরি করতে হয়। আপনি যে শুরু এবং শেষের সিনগুলোর মধ্যে পরিবর্তন করতে চান, তা নির্ধারণ করার পর একটি Transition অবজেক্ট তৈরি করুন যা একটি অ্যানিমেশনকে সংজ্ঞায়িত করে। ফ্রেমওয়ার্কটি আপনাকে হয় একটি রিসোর্স ফাইলে বিল্ট-ইন ট্রানজিশন নির্দিষ্ট করে আপনার কোডে তা ইনফ্লেট করার, অথবা সরাসরি আপনার কোডে একটি বিল্ট-ইন ট্রানজিশনের ইনস্ট্যান্স তৈরি করার সুযোগ দেয়।

সারণি ১. অন্তর্নির্মিত ট্রানজিশন প্রকারভেদ।

শ্রেণী ট্যাগ প্রভাব
AutoTransition <autoTransition/> ডিফল্ট ট্রানজিশন। এটি ক্রমানুসারে ভিউগুলোকে ফেড আউট, সরানো ও আকার পরিবর্তন এবং ফেড ইন করে।
ChangeBounds <changeBounds/> ভিউগুলোকে স্থানান্তরিত ও আকার পরিবর্তন করে।
ChangeClipBounds <changeClipBounds/> দৃশ্য পরিবর্তনের আগে ও পরে View.getClipBounds() ক্যাপচার করে এবং ট্রানজিশন চলাকালীন সেই পরিবর্তনগুলোকে অ্যানিমেট করে।
ChangeImageTransform <changeImageTransform/> দৃশ্য পরিবর্তনের আগে ও পরে একটি ImageView এর ম্যাট্রিক্স ধারণ করে এবং রূপান্তরের সময় সেটিকে অ্যানিমেট করে।
ChangeScroll <changeScroll/> দৃশ্য পরিবর্তনের আগে ও পরে টার্গেটগুলোর স্ক্রোল বৈশিষ্ট্য ধারণ করে এবং যেকোনো পরিবর্তনকে অ্যানিমেট করে।
ChangeTransform <changeTransform/> দৃশ্য পরিবর্তনের আগে ও পরে ভিউগুলির স্কেল এবং ঘূর্ণন ধারণ করে এবং রূপান্তরের সময় সেই পরিবর্তনগুলিকে অ্যানিমেট করে।
Explode <explode/> শুরু এবং শেষের দৃশ্যে লক্ষ্যবস্তু ভিউগুলির দৃশ্যমানতার পরিবর্তনগুলি ট্র্যাক করে এবং ভিউগুলিকে দৃশ্যের প্রান্ত থেকে ভিতরে বা বাইরে সরিয়ে দেয়।
Fade <fade/> fade_in ভিউগুলোকে ধীরে ধীরে দৃশ্যমান করে।
fade_out ভিউগুলোকে ধীরে ধীরে অদৃশ্য করে দেয়।
fade_in_out (ডিফল্ট) প্রথমে fade_out তারপর fade_in করে।
Slide <slide/> শুরু এবং শেষের দৃশ্যে থাকা টার্গেট ভিউগুলির দৃশ্যমানতার পরিবর্তনগুলি ট্র্যাক করে এবং ভিউগুলিকে দৃশ্যের যেকোনো একটি প্রান্ত থেকে ভিতরে বা বাইরে সরায়।

একটি রিসোর্স ফাইল থেকে একটি ট্রানজিশন ইনস্ট্যান্স তৈরি করুন

এই কৌশলটি আপনাকে আপনার অ্যাক্টিভিটির কোড পরিবর্তন না করেই ট্রানজিশন ডেফিনিশন পরিবর্তন করার সুযোগ দেয়। এই কৌশলটি জটিল ট্রানজিশন ডেফিনিশনগুলোকে আপনার অ্যাপ্লিকেশন কোড থেকে আলাদা করতেও উপযোগী, যেমনটি একাধিক ট্রানজিশন নির্দিষ্ট করার অংশে দেখানো হয়েছে।

একটি রিসোর্স ফাইলে বিল্ট-ইন ট্রানজিশন নির্দিষ্ট করতে, এই ধাপগুলো অনুসরণ করুন:

  • আপনার প্রজেক্টে res/transition/ ডিরেক্টরিটি যোগ করুন।
  • এই ডিরেক্টরির ভিতরে একটি নতুন XML রিসোর্স ফাইল তৈরি করুন।
  • বিল্ট-ইন ট্রানজিশনগুলোর একটির জন্য একটি XML নোড যোগ করুন।

উদাহরণস্বরূপ, নিম্নলিখিত রিসোর্স ফাইলটি Fade ট্রানজিশন নির্দিষ্ট করে:

res/transition/fade_transition.xml

<fade xmlns:android="http://schemas.android.com/apk/res/android" />

নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে একটি রিসোর্স ফাইল থেকে আপনার অ্যাক্টিভিটির ভিতরে একটি Transition ইনস্ট্যান্স ইনফ্লেট করতে হয়:

কোটলিন 

var fadeTransition: Transition =
    TransitionInflater.from(this)
                      .inflateTransition(R.transition.fade_transition)

জাভা 

Transition fadeTransition =
        TransitionInflater.from(this).
        inflateTransition(R.transition.fade_transition);

আপনার কোডে একটি ট্রানজিশন ইনস্ট্যান্স তৈরি করুন

আপনার কোডে ইউজার ইন্টারফেস পরিবর্তন করার ক্ষেত্রে ডায়নামিকভাবে ট্রানজিশন অবজেক্ট তৈরি করতে এবং অল্প বা কোনো প্যারামিটার ছাড়াই সহজ বিল্ট-ইন ট্রানজিশন ইনস্ট্যান্স তৈরি করতে এই কৌশলটি কার্যকর।

একটি বিল্ট-ইন ট্রানজিশনের ইনস্ট্যান্স তৈরি করতে, Transition ক্লাসের সাবক্লাসগুলিতে থাকা পাবলিক কনস্ট্রাক্টরগুলির মধ্যে একটিকে কল করুন। উদাহরণস্বরূপ, নিম্নলিখিত কোড স্নিপেটটি Fade ট্রানজিশনের একটি ইনস্ট্যান্স তৈরি করে:

কোটলিন 

var fadeTransition: Transition = Fade()

জাভা 

Transition fadeTransition = new Fade();

একটি রূপান্তর প্রয়োগ করুন

সাধারণত, ব্যবহারকারীর কোনো কার্যকলাপের মতো কোনো ইভেন্টের প্রতিক্রিয়ায় বিভিন্ন ভিউ হায়ারার্কির মধ্যে পরিবর্তন আনার জন্য ট্রানজিশন প্রয়োগ করা হয়। উদাহরণস্বরূপ, একটি সার্চ অ্যাপের কথা ভাবুন: যখন ব্যবহারকারী কোনো সার্চ টার্ম লিখে সার্চ বাটনে ট্যাপ করেন, তখন অ্যাপটি রেজাল্ট লেআউটকে উপস্থাপনকারী একটি দৃশ্যে পরিবর্তিত হয় এবং একই সাথে এমন একটি ট্রানজিশন প্রয়োগ করে যা সার্চ বাটনটিকে ফেড আউট করে ও সার্চ রেজাল্টগুলোকে ফেড ইন করে।

আপনার অ্যাক্টিভিটির কোনো ইভেন্টের প্রতিক্রিয়ায় ট্রানজিশন প্রয়োগ করার সময় দৃশ্য পরিবর্তন করতে, নিম্নলিখিত কোড স্নিপেটে দেখানো অনুযায়ী, সমাপ্তি দৃশ্য এবং অ্যানিমেশনের জন্য ব্যবহৃত ট্রানজিশন ইনস্ট্যান্স সহ TransitionManager.go() ক্লাস ফাংশনটি কল করুন:

কোটলিন 

TransitionManager.go(endingScene, fadeTransition)

জাভা 

TransitionManager.go(endingScene, fadeTransition);

ট্রানজিশন ইনস্ট্যান্স দ্বারা নির্দিষ্ট অ্যানিমেশনটি চলার সময়, ফ্রেমওয়ার্কটি সিন রুটের ভেতরের ভিউ হায়ারার্কিকে শেষ দৃশ্যের ভিউ হায়ারার্কি দিয়ে পরিবর্তন করে। শুরুর দৃশ্যটি হলো সর্বশেষ ট্রানজিশনের শেষ দৃশ্য। যদি কোনো পূর্ববর্তী ট্রানজিশন না থাকে, তবে শুরুর দৃশ্যটি ইউজার ইন্টারফেসের বর্তমান অবস্থা থেকে স্বয়ংক্রিয়ভাবে নির্ধারিত হয়।

আপনি যদি কোনো ট্রানজিশন ইনস্ট্যান্স নির্দিষ্ট না করেন, তাহলে ট্রানজিশন ম্যানেজার একটি স্বয়ংক্রিয় ট্রানজিশন প্রয়োগ করতে পারে যা বেশিরভাগ পরিস্থিতির জন্য যুক্তিসঙ্গত কিছু একটা করে। আরও তথ্যের জন্য, TransitionManager ক্লাসের API রেফারেন্স দেখুন।

নির্দিষ্ট লক্ষ্য দৃশ্য নির্বাচন করুন

ফ্রেমওয়ার্কটি ডিফল্টরূপে শুরু এবং শেষের সিনের সমস্ত ভিউতে ট্রানজিশন প্রয়োগ করে। কিছু ক্ষেত্রে, আপনি হয়তো একটি সিনের শুধুমাত্র কিছু নির্দিষ্ট ভিউতে অ্যানিমেশন প্রয়োগ করতে চাইতে পারেন। ফ্রেমওয়ার্কটি আপনাকে নির্দিষ্ট ভিউ নির্বাচন করার সুযোগ দেয়, যেগুলোকে আপনি অ্যানিমেট করতে চান। উদাহরণস্বরূপ, ফ্রেমওয়ার্কটি ListView অবজেক্টের পরিবর্তন অ্যানিমেট করা সমর্থন করে না, তাই কোনো ট্রানজিশনের সময় সেগুলোকে অ্যানিমেট করার চেষ্টা করবেন না।

ট্রানজিশন দ্বারা অ্যানিমেট করা প্রতিটি ভিউকে টার্গেট বলা হয়। আপনি শুধুমাত্র সেই টার্গেটগুলোই নির্বাচন করতে পারবেন যেগুলো একটি সিনের সাথে যুক্ত ভিউ হায়ারার্কির অংশ।

টার্গেটের তালিকা থেকে এক বা একাধিক ভিউ সরাতে, ট্রানজিশন শুরু করার আগে removeTarget() মেথডটি কল করুন। টার্গেটের তালিকায় শুধুমাত্র আপনার নির্দিষ্ট করা ভিউগুলো যোগ করতে, addTarget() ফাংশনটি কল করুন। আরও তথ্যের জন্য, Transition ক্লাসের API রেফারেন্স দেখুন।

একাধিক ট্রানজিশন নির্দিষ্ট করুন

একটি অ্যানিমেশন থেকে সর্বাধিক প্রভাব পেতে, দৃশ্যগুলোর মধ্যে যে ধরনের পরিবর্তন ঘটে তার সাথে এটিকে মেলান। উদাহরণস্বরূপ, যদি আপনি দৃশ্যগুলোর মধ্যে কিছু ভিউ সরিয়ে ফেলেন এবং অন্য কিছু যোগ করেন, তাহলে একটি ফেড আউট বা ফেড ইন অ্যানিমেশন স্পষ্টভাবে বুঝিয়ে দেয় যে কিছু ভিউ আর উপলব্ধ নেই। যদি আপনি স্ক্রিনের বিভিন্ন স্থানে ভিউগুলো সরান, তবে সেই নড়াচড়া অ্যানিমেট করা ভালো, যাতে ব্যবহারকারীরা ভিউগুলোর নতুন অবস্থান লক্ষ্য করতে পারে।

আপনাকে শুধু একটি অ্যানিমেশন বেছে নিতে হবে না, কারণ ট্রানজিশন ফ্রেমওয়ার্কটি আপনাকে একটি ট্রানজিশন সেটে অ্যানিমেশন ইফেক্টগুলোকে একত্রিত করার সুযোগ দেয়, যেখানে একাধিক স্বতন্ত্র বিল্ট-ইন বা কাস্টম ট্রানজিশন থাকে।

XML-এ একাধিক ট্রানজিশন থেকে একটি ট্রানজিশন সেট নির্ধারণ করতে, res/transitions/ ডিরেক্টরিতে একটি রিসোর্স ফাইল তৈরি করুন এবং TransitionSet এলিমেন্টের অধীনে ট্রানজিশনগুলো তালিকাভুক্ত করুন। উদাহরণস্বরূপ, নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে AutoTransition ক্লাসের মতো একই আচরণ সম্পন্ন একটি ট্রানজিশন সেট নির্দিষ্ট করতে হয়: 

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>

আপনার কোডে ট্রানজিশন সেটটিকে একটি TransitionSet অবজেক্টে রূপান্তর করতে, আপনার অ্যাক্টিভিটিতে TransitionInflater.from() ফাংশনটি কল করুন। TransitionSet ক্লাসটি Transition ক্লাস থেকে এক্সটেন্ড করা হয়েছে, তাই আপনি এটিকে অন্য যেকোনো Transition ইনস্ট্যান্সের মতোই একটি ট্রানজিশন ম্যানেজারের সাথে ব্যবহার করতে পারেন।

দৃশ্য ছাড়া একটি ট্রানজিশন প্রয়োগ করুন

আপনার ইউজার ইন্টারফেস পরিবর্তন করার একমাত্র উপায় ভিউ হায়ারার্কি পরিবর্তন করা নয়। আপনি বর্তমান হায়ারার্কির মধ্যে চাইল্ড ভিউ যোগ, পরিবর্তন এবং অপসারণ করেও পরিবর্তন করতে পারেন।

উদাহরণস্বরূপ, আপনি একটিমাত্র লেআউট ব্যবহার করে সার্চ ইন্টারঅ্যাকশন বাস্তবায়ন করতে পারেন। এমন একটি লেআউট দিয়ে শুরু করুন যেখানে একটি সার্চ এন্ট্রি ফিল্ড এবং একটি সার্চ আইকন রয়েছে। ইউজার ইন্টারফেস পরিবর্তন করে ফলাফল দেখানোর জন্য, ব্যবহারকারী সার্চ বাটনটি ট্যাপ করলে ViewGroup.removeView() ফাংশনটি কল করে সেটি সরিয়ে দিন এবং ViewGroup.addView() ফাংশনটি কল করে সার্চের ফলাফল যোগ করুন।

যদি বিকল্প হিসেবে প্রায় অভিন্ন দুটি হায়ারার্কি রাখার প্রয়োজন হয়, তবে আপনি এই পদ্ধতিটি ব্যবহার করতে পারেন। ইউজার ইন্টারফেসের সামান্য পার্থক্যের জন্য দুটি পৃথক লেআউট ফাইল তৈরি ও রক্ষণাবেক্ষণ করার পরিবর্তে, আপনি একটি লেআউট ফাইল রাখতে পারেন যেখানে একটি ভিউ হায়ারার্কি থাকবে, যা আপনি কোডের মাধ্যমে পরিবর্তন করতে পারবেন।

আপনি যদি বর্তমান ভিউ হায়ারার্কির মধ্যে এইভাবে পরিবর্তন করেন, তাহলে আপনার কোনো সিন তৈরি করার প্রয়োজন নেই। এর পরিবর্তে, আপনি একটি ডিলেড ট্রানজিশন ব্যবহার করে একটি ভিউ হায়ারার্কির দুটি অবস্থার মধ্যে একটি ট্রানজিশন তৈরি এবং প্রয়োগ করতে পারেন। ট্রানজিশন ফ্রেমওয়ার্কের এই বৈশিষ্ট্যটি বর্তমান ভিউ হায়ারার্কি অবস্থা থেকে শুরু হয়, এর ভিউগুলিতে আপনার করা পরিবর্তনগুলি রেকর্ড করে এবং এমন একটি ট্রানজিশন প্রয়োগ করে যা সিস্টেম যখন ইউজার ইন্টারফেসটি পুনরায় আঁকে তখন পরিবর্তনগুলিকে অ্যানিমেট করে।

একটি একক ভিউ হায়ারার্কির মধ্যে বিলম্বিত ট্রানজিশন তৈরি করতে, এই ধাপগুলো অনুসরণ করুন:

  1. যখন ট্রানজিশনটি ট্রিগার করার ইভেন্টটি ঘটে, তখন TransitionManager.beginDelayedTransition() ফাংশনটি কল করুন এবং এর সাথে আপনি যে ভিউগুলো পরিবর্তন করতে চান সেগুলোর প্যারেন্ট ভিউ ও ব্যবহৃত ট্রানজিশনটি উল্লেখ করুন। ফ্রেমওয়ার্কটি চাইল্ড ভিউগুলোর বর্তমান অবস্থা এবং তাদের প্রপার্টির মানগুলো সংরক্ষণ করে।
  2. আপনার প্রয়োজন অনুযায়ী চাইল্ড ভিউগুলোতে পরিবর্তন আনুন। ফ্রেমওয়ার্কটি চাইল্ড ভিউ এবং তাদের প্রোপার্টিগুলোতে করা পরিবর্তনগুলো রেকর্ড করে রাখে।
  3. যখন সিস্টেম আপনার পরিবর্তন অনুযায়ী ইউজার ইন্টারফেসটি পুনরায় আঁকে, তখন ফ্রেমওয়ার্কটি মূল অবস্থা এবং নতুন অবস্থার মধ্যেকার পরিবর্তনগুলোকে অ্যানিমেট করে।

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি বিলম্বিত ট্রানজিশন ব্যবহার করে একটি ভিউ হায়ারার্কিতে একটি টেক্সট ভিউ যুক্ত করার প্রক্রিয়াকে অ্যানিমেট করা যায়। প্রথম কোড স্নিপেটটি লেআউট ডেফিনিশন ফাইলটি দেখাচ্ছে:

res/layout/activity_main.xml 

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <EditText
        android:id="@+id/inputText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

পরবর্তী কোড স্নিপেটটিতে টেক্সট ভিউ যুক্ত হওয়ার প্রক্রিয়াটিকে অ্যানিমেট করার কোড দেখানো হয়েছে:

প্রধান কার্যকলাপ

কোটলিন 

setContentView(R.layout.activity_main)
val labelText = TextView(this).apply {
    text = "Label"
    id = R.id.text
}
val rootView: ViewGroup = findViewById(R.id.mainLayout)
val mFade: Fade = Fade(Fade.IN)
TransitionManager.beginDelayedTransition(rootView, mFade)
rootView.addView(labelText)

জাভা 

private TextView labelText;
private Fade mFade;
private ViewGroup rootView;
...
// Load the layout.
setContentView(R.layout.activity_main);
...
// Create a new TextView and set some View properties.
labelText = new TextView(this);
labelText.setText("Label");
labelText.setId(R.id.text);

// Get the root view and create a transition.
rootView = (ViewGroup) findViewById(R.id.mainLayout);
mFade = new Fade(Fade.IN);

// Start recording changes to the view hierarchy.
TransitionManager.beginDelayedTransition(rootView, mFade);

// Add the new TextView to the view hierarchy.
rootView.addView(labelText);

// When the system redraws the screen to show this update,
// the framework animates the addition as a fade in.

ট্রানজিশন লাইফসাইকেল কলব্যাকগুলি সংজ্ঞায়িত করুন

ট্রানজিশন লাইফসাইকেলটি অ্যাক্টিভিটি লাইফসাইকেলের অনুরূপ। এটি সেই ট্রানজিশন স্টেটগুলোকে নির্দেশ করে, যা ফ্রেমওয়ার্ক TransitionManager.go() ফাংশনটি কল করার পর থেকে অ্যানিমেশনটি সম্পূর্ণ হওয়া পর্যন্ত পর্যবেক্ষণ করে। লাইফসাইকেলের গুরুত্বপূর্ণ স্টেটগুলোতে, ফ্রেমওয়ার্ক TransitionListener ইন্টারফেস দ্বারা সংজ্ঞায়িত কলব্যাকগুলোকে আহ্বান করে।

ট্রানজিশন লাইফসাইকেল কলব্যাকগুলো বেশ কার্যকর, যেমন—সিন পরিবর্তনের সময় কোনো ভিউ প্রপার্টির মান শুরুর ভিউ হায়ারার্কি থেকে শেষের ভিউ হায়ারার্কিতে কপি করার জন্য। আপনি সরাসরি শুরুর ভিউ থেকে শেষের ভিউ হায়ারার্কিতে থাকা ভিউতে মানটি কপি করতে পারবেন না, কারণ ট্রানজিশন সম্পূর্ণ না হওয়া পর্যন্ত শেষের ভিউ হায়ারার্কিটি ইনফ্লেট হয় না। এর পরিবর্তে, আপনাকে মানটি একটি ভেরিয়েবলে সংরক্ষণ করতে হবে এবং ফ্রেমওয়ার্ক ট্রানজিশন শেষ করার পর সেটিকে শেষের ভিউ হায়ারার্কিতে কপি করতে হবে। ট্রানজিশন সম্পূর্ণ হলে নোটিফিকেশন পাওয়ার জন্য, আপনার অ্যাক্টিভিটিতে TransitionListener.onTransitionEnd() ফাংশনটি ইমপ্লিমেন্ট করুন।

আরও তথ্যের জন্য, TransitionListener ক্লাসের API রেফারেন্স দেখুন।

সীমাবদ্ধতা

এই অংশে ট্রানজিশন ফ্রেমওয়ার্কের কিছু জ্ঞাত সীমাবদ্ধতা তালিকাভুক্ত করা হয়েছে:

  • একটি SurfaceView তে প্রয়োগ করা অ্যানিমেশনগুলো সঠিকভাবে প্রদর্শিত নাও হতে পারে। SurfaceView ইনস্ট্যান্সগুলো একটি নন-ইউআই থ্রেড থেকে আপডেট করা হয়, তাই এই আপডেটগুলো অন্যান্য ভিউয়ের অ্যানিমেশনের সাথে অসামঞ্জস্যপূর্ণ হতে পারে।
  • TextureView তে প্রয়োগ করা হলে কিছু নির্দিষ্ট ট্রানজিশন টাইপ কাঙ্ক্ষিত অ্যানিমেশন ইফেক্ট তৈরি করতে পারে না।
  • যেসব ক্লাস AdapterView এক্সটেন্ড করে, যেমন ListView , সেগুলো তাদের চাইল্ড ভিউগুলোকে এমনভাবে পরিচালনা করে যা ট্রানজিশন ফ্রেমওয়ার্কের সাথে সামঞ্জস্যপূর্ণ নয়। আপনি যদি AdapterView উপর ভিত্তি করে কোনো ভিউকে অ্যানিমেট করার চেষ্টা করেন, তাহলে ডিভাইসের ডিসপ্লে সাড়া দেওয়া বন্ধ করে দিতে পারে।
  • আপনি যদি অ্যানিমেশনের সাহায্যে একটি TextView আকার পরিবর্তন করার চেষ্টা করেন, তাহলে অবজেক্টটির আকার পুরোপুরি পরিবর্তিত হওয়ার আগেই লেখাটি একটি নতুন অবস্থানে চলে যায়। এই সমস্যাটি এড়াতে, যেসব ভিউতে লেখা থাকে, সেগুলোর আকার পরিবর্তনের সময় অ্যানিমেশন ব্যবহার করবেন না।