অ্যানিমেশনের সাথে প্রাথমিক পরিচয়

Compose-এর মাধ্যমে চেষ্টা করুন
Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ কীভাবে অ্যানিমেশন ব্যবহার করতে হয় তা জানুন।

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

আপনি কোন ধরনের অ্যানিমেশন চান তার উপর নির্ভর করে Android-এ বিভিন্ন অ্যানিমেশন API অন্তর্ভুক্ত থাকে। এই ডকুমেন্টেশন থেকে আপনি UI-তে বিভিন্ন উপায়ে মোশন যোগ করার ওভারভিউ পাবেন।

অ্যানিমেশন কখন ব্যবহার করা উচিত তা আরও ভালোভাবে বুঝতে, মোশন সম্পর্কে মেটেরিয়াল ডিজাইন গাইড দেখুন।

বিটম্যাপ অ্যানিমেট করুন

ছবি ১. আঁকা যায় এমন অ্যানিমেশন।

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

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

আরও তথ্যের জন্য, ড্রয়েবল গ্রাফিক অ্যানিমেট করা নিবন্ধটি পড়ুন।

UI-এর দৃশ্যমানতা ও মোশন অ্যানিমেট করুন

ছবি ২. ডায়ালগ দেখানো ও বন্ধ হওয়ার সময় সূক্ষ্ম অ্যানিমেশন UI পরিবর্তনকে আরও মসৃণ করে তোলে।

আপনার লেআউটে ভিউয়ের দৃশ্যমানতা বা পজিশন পরিবর্তন করার প্রয়োজন হলে, UI কীভাবে পরিবর্তিত হচ্ছে তা ব্যবহারকারীকে বোঝাতে সূক্ষ্ম অ্যানিমেশন যোগ করা সবচেয়ে ভালো।

বর্তমান লেআউটের মধ্যে ভিউ সরাতে, দেখাতে বা লুকাতে, আপনি android.animation প্যাকেজ দ্বারা প্রদান করা প্রপার্টি অ্যানিমেশন সিস্টেম ব্যবহার করতে পারেন, যা Android 3.0 (API লেভেল 11) এবং তার পরবর্তী ভার্সনে উপলভ্য। এই API আপনার View অবজেক্টের প্রপার্টি নির্দিষ্ট সময় অন্তর আপডেট করে, প্রপার্টি পরিবর্তন হওয়ার সাথে সাথে ভিউ ক্রমাগত রিড্র করে। যেমন, আপনি পজিশন প্রপার্টি পরিবর্তন করলে, ভিউ স্ক্রিন জুড়ে সরে যায়। আপনি আলফা প্রপার্টি পরিবর্তন করলে, ভিউ ফেড ইন বা আউট হয়।

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

প্রপার্টি অ্যানিমেশন সিস্টেম ব্যবহার করে কীভাবে অ্যানিমেশন তৈরি করতে হয় তা জানতে, প্রপার্টি অ্যানিমেশন ওভারভিউ পড়ুন। এছাড়াও, সাধারণ অ্যানিমেশন তৈরি করতে আপনি নিম্নলিখিত পৃষ্ঠাগুলি দেখতে পারেন:

ফিজিক্স-ভিত্তিক মোশন

ছবি ৩. ObjectAnimator-এর সাহায্যে তৈরি করা অ্যানিমেশন।

ছবি ৪. পদার্থ বিজ্ঞান ভিত্তিক API-এর সাহায্যে অ্যানিমেশন তৈরি করা হয়েছে।

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

এইসব আচরণ প্রদান করতে, Android সাপোর্ট লাইব্রেরিতে ফিজিক্স-ভিত্তিক অ্যানিমেশন API অন্তর্ভুক্ত থাকে যা আপনার অ্যানিমেশন কীভাবে ঘটবে তা নিয়ন্ত্রণ করতে ফিজিক্সের নিয়মের উপর নির্ভর করে।

ফিজিক্স-ভিত্তিক দুটি সাধারণ অ্যানিমেশন নিচে উল্লেখ করা হল:

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

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

লেআউট পরিবর্তন অ্যানিমেট করুন

ছবি ৫. আরও বিবরণ দেখানোর জন্য অ্যানিমেশন, লেআউট পরিবর্তন করে অথবা নতুন অ্যাক্টিভিটি শুরু করে দেখানো যেতে পারে।

Android 4.4 (API লেভেল 19) এবং তার পরবর্তী যেকোনও ভার্সনে, বর্তমান অ্যাক্টিভিটি বা ফ্র্যাগমেন্টের মধ্যে লেআউট সোয়্যাপ করার সময় অ্যানিমেশন তৈরি করতে আপনি ট্রানজিশন ফ্রেমওয়ার্ক ব্যবহার করতে পারবেন। আপনাকে শুধু শুরু ও শেষের লেআউট এবং কী ধরনের অ্যানিমেশন ব্যবহার করতে চান তা উল্লেখ করতে হবে। তারপর সিস্টেম দুটি লেআউটের মধ্যে একটি অ্যানিমেশন নির্ধারণ করে এবং এক্সিকিউট করে। আপনি এটি ব্যবহার করে সম্পূর্ণ UI অদলবদল করতে পারেন অথবা শুধুমাত্র কিছু ভিউ সরাতে বা পরিবর্তন করতে পারেন।

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

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

আরও তথ্যের জন্য, ট্রানজিশন ব্যবহার করে লেআউট পরিবর্তন অ্যানিমেট করুন নিবন্ধটি পড়ুন। স্যাম্পেল কোডের জন্য, BasicTransition চেক করুন।

অ্যাক্টিভিটির মধ্যে অ্যানিমেট করুন

Android 5.0 (API লেভেল ২১) এবং তার পরবর্তী ভার্সনে, আপনি এমন অ্যানিমেশনও তৈরি করতে পারবেন যা আপনার অ্যাক্টিভিটির মধ্যে ট্রানজিশন করে। এটি আগের বিভাগে বর্ণিত একই ট্রানজিশন ফ্রেমওয়ার্কের উপর ভিত্তি করে তৈরি, তবে এটি আপনাকে আলাদা অ্যাক্টিভিটিতে লেআউটের মধ্যে অ্যানিমেশন তৈরি করতে দেয়।

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

সাধারণত, আপনি startActivity() কল করেন, কিন্তু এটি ActivityOptions.makeSceneTransitionAnimation()-এর দেওয়া বিকল্পের বান্ডেল পাস করে। এই বান্ডেলে এমন বিকল্প থাকতে পারে যার মধ্যে অ্যাক্টিভিটির মধ্যে কোন ভিউ শেয়ার করা হয়েছে তা অন্তর্ভুক্ত থাকতে পারে, যাতে ট্রানজিশন ফ্রেমওয়ার্ক অ্যানিমেশনের সময় সেগুলিকে কানেক্ট করতে পারে।

অতিরিক্ত রিসোর্সের জন্য, দেখুন: