মোশন লেআউট উদাহরণ

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

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

মৌলিক গতি

এই উদাহরণটিতে একটিমাত্র ভিউ রয়েছে, যেটিকে আপনি স্পর্শ করে টেনে আনুভূমিকভাবে সরাতে পারেন।

চিত্র ১. একটি ভিউ ড্র্যাগ করা।

কাস্টম অ্যাট্রিবিউট - ব্যাকগ্রাউন্ডকালার

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

চিত্র ২। কোনো ভিউকে ড্র্যাগ করার সময় তার ব্যাকগ্রাউন্ডের রঙ পরিবর্তন হওয়া।

ইমেজফিল্টারভিউ - ছবির পরিবর্তন

এই উদাহরণটি দেখায় কিভাবে একটি ImageFilterView এর স্যাচুরেশন মান পরিবর্তন করতে হয়।

চিত্র ৩। একটি ছবিকে ড্র্যাগ করার ফলে এর স্যাচুরেশন পরিবর্তিত হচ্ছে।

কীফ্রেম অবস্থান

এই উদাহরণটিতে গতির সময় ভিউটির Y অবস্থান পরিবর্তন করতে <KeyFrameSet> ব্যবহার করা হয়েছে।

চিত্র ৪। একটি ভিউকে টেনে তার Y অবস্থান পরিবর্তন করা।

কীফ্রেম ইন্টারপোলেশন

এই উদাহরণটি কীফ্রেম পজিশন উদাহরণের উপর ভিত্তি করে তৈরি, যেখানে ভিউ ট্রানজিশনে রোটেশন এবং স্কেলিং যোগ করা হয়েছে।

চিত্র ৫। একটি ভিউকে টেনে তার Y অবস্থান, ঘূর্ণন এবং স্কেল পরিবর্তন করা।

কীফ্রেম চক্র

এই উদাহরণটি ভিউতে তরঙ্গসদৃশ গতি যোগ করার জন্য <KeyCycle> এলিমেন্ট যুক্ত করে।

চিত্র ৬। তরঙ্গাকৃতির গতিতে কোনো দৃশ্যকে টেনে নিয়ে তার রঙ পরিবর্তন করা।

সমন্বয়কারী লেআউট (১/২)

এই উদাহরণটি অ্যাপ বারে গতি যোগ করার জন্য একটি বিদ্যমান AppBarLayout এ একটি MotionLayout যুক্ত করে। এই উদাহরণটি "MotionLayout-এর পরিচিতি (পর্ব III)"- এ আরও বিশদভাবে বর্ণনা করা হয়েছে।

চিত্র ৭। অ্যাপ বারটি প্রসারিত হওয়ার সাথে সাথে বিষয়বস্তু স্ক্রল হওয়া।

সমন্বয়কারী লেআউট (২/২)

এই উদাহরণটি অ্যাপ বারে গতি যোগ করার জন্য একটি বিদ্যমান AppBarLayout এ একটি MotionLayout যুক্ত করে।

চিত্র ৮। অ্যাপ বারটি প্রসারিত হওয়ার সাথে সাথে কন্টেন্ট স্ক্রল হতে থাকে এবং টেক্সট অ্যানিমেট হয়ে অ্যাপ বারের ভেতরে ও বাইরে আসা-যাওয়া করে।

ড্রয়ার লেআউট (১/২)

এই উদাহরণটি দেখায় কিভাবে একটি DrawerLayout এ গতি যোগ করতে হয়। এই উদাহরণটি "MotionLayout-এর পরিচিতি (তৃতীয় পর্ব)"- এ আরও বিশদভাবে বর্ণনা করা হয়েছে।

চিত্র ৯. `DrawerLayout` সম্প্রসারণ।

ড্রয়ার লেআউট (২/২)

এই উদাহরণটি দেখায় কিভাবে একটি DrawerLayout এ গতি যোগ করতে হয়।

চিত্র ১০। অ্যানিমেটেড মেনু টেক্সট সহ `DrawerLayout`-এর সম্প্রসারণ।

পাশের প্যানেল

এই উদাহরণটি দেখায় কিভাবে মূল কন্টেন্ট এলাকাটিকে ডানদিকে টেনে নিয়ে যাওয়ার সময় একটি সাইড প্যানেল প্রদর্শন করা যায়।

চিত্র ১১। মূল বিষয়বস্তু টেনে একটি পার্শ্ব প্যানেল দেখানো।

প্যারালাক্স

এই উদাহরণটিতে একটি প্যারালাক্স ব্যাকগ্রাউন্ড দেখানো হয়েছে, যেখানে ব্যাকগ্রাউন্ডের বিভিন্ন স্তর ভিন্ন ভিন্ন গতিতে চলাচল করে।

চিত্র ১২। হেডার ছবিতে প্যারালাক্স প্রভাব।

ভিউপেজার

এই উদাহরণটি দেখায় যে কীভাবে আপনি ViewPager ট্যাবগুলির মধ্যে সোয়াইপ করার সময় গতি যোগ করতে পারেন। এই উদাহরণটি মোশনলেআউটের পরিচিতি (তৃতীয় পর্ব) -এ আরও বিশদভাবে বর্ণনা করা হয়েছে।

চিত্র ১৩। একটি `ViewPager` সোয়াইপ করার সময় হেডার ইমেজে প্যারালাক্স প্রভাব।

ভিউপেজার - লটি

এই উদাহরণটি দেখায় যে কীভাবে ViewPager ট্যাবগুলির মধ্যে সোয়াইপ করার সময় গতি যোগ করা যায়।

চিত্র ১৪। একটি `ভিউপেজার` সোয়াইপ করার সময় হেডার ইমেজে লটি এফেক্ট দেখানো একটি ছবি।

জটিল গতি (১/৩)

এই উদাহরণটি জটিল গতি প্রদর্শনের জন্য পূর্ববর্তী উদাহরণগুলোর উপাদানগুলোকে একত্রিত করেছে।

চিত্র ১৫। জটিল গতি সৃষ্টিতে বিভিন্ন ইফেক্টের সমন্বয়।

জটিল গতি (২/৩)

এই উদাহরণটি জটিল গতি প্রদর্শনের জন্য পূর্ববর্তী উদাহরণগুলোর উপাদানগুলোকে একত্রিত করেছে।

চিত্র ১৬। জটিল গতি সৃষ্টিতে বিভিন্ন ইফেক্টের সমন্বয়।

জটিল গতি (৩/৩)

এই উদাহরণটি জটিল গতি প্রদর্শনের জন্য পূর্ববর্তী উদাহরণগুলোর উপাদানগুলোকে একত্রিত করেছে।

চিত্র ১৭। জটিল গতি সৃষ্টিতে বিভিন্ন ইফেক্টের সমন্বয়।

খণ্ড রূপান্তর (১/২)

এই উদাহরণটি দেখায় কিভাবে আপনি ফ্র্যাগমেন্টগুলির মধ্যে ট্রানজিশন করতে MotionLayout ব্যবহার করতে পারেন।

চিত্র ১৮। খণ্ডাংশের রূপান্তর।

খণ্ড রূপান্তর (২/২)

এই উদাহরণটি দেখায় কিভাবে আপনি ফ্র্যাগমেন্টগুলির মধ্যে ট্রানজিশন করতে MotionLayout ব্যবহার করতে পারেন।

চিত্র ১৯। খণ্ডাংশের রূপান্তর।

ইউটিউবের মতো গতি

এই উদাহরণটি একটি সংক্ষিপ্ত দৃশ্য এবং অতিরিক্ত বিষয়বস্তুসহ পূর্ণ-পর্দার অভিজ্ঞতার মধ্যে রূপান্তর প্রদর্শন করে।

চিত্র ২০। ইউটিউবের অনুরূপ খণ্ডাংশের রূপান্তর।

কীট্রিগার

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

চিত্র ২১। একটি ভাসমান অ্যাকশন বাটন দেখানো এবং লুকানো।

বহু-রাজ্য

এই উদাহরণটি দেখায় যে কোন গতি প্রয়োগ করতে হবে তা নির্ধারণ করতে কীভাবে অবস্থা ব্যবহার করতে হয়।

চিত্র ২২। অবস্থার উপর ভিত্তি করে বিভিন্ন গতিবিধি।