এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

Kotlin 03.2-এ উন্নত Android: MotionLayout সহ অ্যানিমেশন

১. শুরু করার আগে

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

MotionLayout হল একটি লাইব্রেরি যা আপনাকে আপনার অ্যান্ড্রয়েড অ্যাপে সমৃদ্ধ গতি যোগ করতে দেয়। এটি ConstraintLayout, এবং ConstraintLayout ব্যবহার করে আপনি যা কিছু তৈরি করতে পারেন তা অ্যানিমেট করতে দেয়।

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

অ্যানিমেশনগুলি অ্যাপের অভিজ্ঞতা উন্নত করার একটি দুর্দান্ত উপায়। আপনি অ্যানিমেশনগুলি ব্যবহার করতে পারেন:

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

পূর্বশর্ত

এই কোডল্যাবটি এমন ডেভেলপারদের জন্য ডিজাইন করা হয়েছে যাদের Android ডেভেলপমেন্টের অভিজ্ঞতা আছে। এই কোডল্যাবটি সম্পূর্ণ করার চেষ্টা করার আগে, আপনার উচিত:

কীভাবে একটি অ্যাক্টিভিটি, একটি বেসিক লেআউট সহ একটি অ্যাপ তৈরি করতে হয় এবং অ্যান্ড্রয়েড স্টুডিও ব্যবহার করে একটি ডিভাইস বা এমুলেটরে এটি চালাতে হয় তা জানুন। ConstraintLayout এর সাথে পরিচিত হন। ConstraintLayout সম্পর্কে আরও জানতে Constraint Layout কোডল্যাবটি পড়ুন।

তুমি কি করবে

ConstraintSets এবং MotionLayout ব্যবহার করে একটি অ্যানিমেশন সংজ্ঞায়িত করুন
ড্র্যাগ ইভেন্টের উপর ভিত্তি করে অ্যানিমেট করুন
KeyPosition দিয়ে অ্যানিমেশন পরিবর্তন করুন
KeyAttribute ব্যবহার করে অ্যাট্রিবিউট পরিবর্তন করুন
কোড সহ অ্যানিমেশন চালান
MotionLayout ব্যবহার করে কলাপসিবল হেডার অ্যানিমেট করুন

তোমার যা লাগবে

অ্যান্ড্রয়েড স্টুডিও ৪.০ ( MotionLayout এডিটর শুধুমাত্র অ্যান্ড্রয়েড স্টুডিওর এই সংস্করণের সাথে কাজ করে।)

2. শুরু করা

মোশন এডিটর ব্যবহার করে এই কোডল্যাবটি সম্পূর্ণ করার জন্য আপনাকে সর্বশেষ 4.2 ক্যানারি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।

এই কোডল্যাবটি অ্যান্ড্রয়েড স্টুডিও ৪.০ বা তার উচ্চতর সংস্করণে সম্পন্ন করা যেতে পারে, যদিও আপনি মোশন এডিটরে অসঙ্গত UI দেখতে পাবেন।

সর্বশেষ অ্যান্ড্রয়েড স্টুডিও ক্যানারি ডাউনলোড করুন ।

নমুনা অ্যাপটি ডাউনলোড করতে, আপনি নিম্নলিখিত যেকোনো একটি করতে পারেন:

... অথবা নিম্নলিখিত কমান্ড ব্যবহার করে কমান্ড লাইন থেকে GitHub সংগ্রহস্থলটি ক্লোন করুন:

$ git clone https://github.com/googlecodelabs/motionlayout.git

৩. MotionLayout ব্যবহার করে অ্যানিমেশন তৈরি করা

প্রথমে, আপনি এমন একটি অ্যানিমেশন তৈরি করবেন যা ব্যবহারকারীর ক্লিকের প্রতিক্রিয়ায় স্ক্রিনের উপরের শুরু থেকে নীচের প্রান্তে একটি দৃশ্য সরাবরাহ করবে।

স্টার্টার কোড থেকে একটি অ্যানিমেশন তৈরি করতে, আপনার নিম্নলিখিত প্রধান অংশগুলির প্রয়োজন হবে:

একটি MotionLayout, যা ConstraintLayout এর একটি উপশ্রেণী। আপনি MotionLayout ট্যাগের ভিতরে অ্যানিমেশন করার জন্য সমস্ত ভিউ নির্দিষ্ট করেন।
একটি MotionScene, যা একটি XML ফাইল যা MotionLayout.
একটি Transition, যা MotionScene অংশ যা অ্যানিমেশনের সময়কাল, ট্রিগার এবং ভিউগুলি কীভাবে সরাতে হয় তা নির্দিষ্ট করে।
একটি ConstraintSet যা ট্রানজিশনের শুরু এবং শেষ উভয় সীমাবদ্ধতা নির্দিষ্ট করে।

চলুন MotionLayout দিয়ে শুরু করে, একে একে দেখে নেওয়া যাক।

ধাপ ১: বিদ্যমান কোডটি অন্বেষণ করুন

MotionLayout হল ConstraintLayout এর একটি সাবক্লাস, তাই এটি অ্যানিমেশন যোগ করার সময় একই বৈশিষ্ট্যগুলি সমর্থন করে। MotionLayout ব্যবহার করার জন্য, আপনাকে একটি MotionLayout ভিউ যোগ করতে হবে যেখানে আপনি ConstraintLayout.

res/layout এ, activity_step1.xml. এখানে আপনার কাছে একটি ConstraintLayout আছে যেখানে একটি তারার একটি একক ImageView আছে, যার ভিতরে একটি রঙ প্রয়োগ করা হয়েছে।

কার্যকলাপ_পদক্ষেপ১.এক্সএমএল

<!-- initial code -->
<androidx.constraintlayout.widget.ConstraintLayout
       ...
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       >

   <ImageView
           android:id="@+id/red_star"
           ...
   />

</androidx.constraintlayout.motion.widget.MotionLayout>

এই ConstraintLayout এ কোনও সীমাবদ্ধতা নেই, তাই আপনি যদি এখন অ্যাপটি চালান তবে আপনি তারকা প্রদর্শনটি অবাধ দেখতে পাবেন, যার অর্থ হল সেগুলি একটি অজানা স্থানে অবস্থান করবে। Android Studio আপনাকে সীমাবদ্ধতার অভাব সম্পর্কে একটি সতর্কতা দেবে।

ধাপ ২: মোশন লেআউটে রূপান্তর করুন

MotionLayout, আপনাকে ConstraintLayout কে MotionLayout এ রূপান্তর করতে হবে।

আপনার লেআউটে একটি মোশন দৃশ্য ব্যবহার করার জন্য, এটিকে অবশ্যই এটির দিকে নির্দেশ করতে হবে।

এটি করার জন্য, ডিজাইন সারফেসটি খুলুন। অ্যান্ড্রয়েড স্টুডিও ৪.০-এ, আপনি লেআউট XML ফাইলটি দেখার সময় উপরের ডানদিকে স্প্লিট বা ডিজাইন আইকনটি ব্যবহার করে ডিজাইন সারফেসটি খুলতে পারেন।

a2beea710c2decb7.png সম্পর্কে

ডিজাইনের সারফেসটি খোলার পর, প্রিভিউতে ডান ক্লিক করুন এবং Convert to MotionLayout নির্বাচন করুন।

4fa936a98a8393b9.png সম্পর্কে

এটি ConstraintLayout ট্যাগকে MotionLayout ট্যাগ দিয়ে প্রতিস্থাপন করে এবং MotionLayout ট্যাগে একটি motion:layoutDescription যোগ করে যা @xml/activity_step1_scene.

কার্যকলাপ_পদক্ষেপ১.xml

<!-- explore motion:layoutDescription="@xml/activity_step1_scene" -->
<androidx.constraintlayout.motion.widget.MotionLayout
       ...
       motion:layoutDescription="@xml/activity_step1_scene">

একটি মোশন দৃশ্য হল একটি একক XML ফাইল যা একটি MotionLayout এ একটি অ্যানিমেশন বর্ণনা করে।

MotionLayout এ রূপান্তর করার সাথে সাথে, ডিজাইনের পৃষ্ঠে Motion Editor প্রদর্শিত হবে

66d0e80d5ab4daf8.png সম্পর্কে

মোশন এডিটরে তিনটি নতুন UI উপাদান রয়েছে:

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

ধাপ ৩: শুরু এবং শেষের সীমাবদ্ধতা নির্ধারণ করুন

সকল অ্যানিমেশনকে শুরু এবং শেষের পরিপ্রেক্ষিতে সংজ্ঞায়িত করা যেতে পারে। শুরু অ্যানিমেশনের আগে স্ক্রিনটি কেমন দেখাবে তা বর্ণনা করে এবং শেষ অ্যানিমেশনটি সম্পন্ন হওয়ার পরে স্ক্রিনটি কেমন দেখাবে তা বর্ণনা করে। MotionLayout শুরু এবং শেষের অবস্থার মধ্যে (সময়ের সাথে সাথে) কীভাবে অ্যানিমেট করা যায় তা নির্ধারণের জন্য দায়ী।

MotionScene শুরু এবং শেষ অবস্থা নির্ধারণ করতে একটি ConstraintSet ট্যাগ ব্যবহার করে। ConstraintSet হল এটির মতো শোনাচ্ছে, এটি এমন কিছু সীমাবদ্ধতার সেট যা ভিউতে প্রয়োগ করা যেতে পারে। এর মধ্যে রয়েছে প্রস্থ, উচ্চতা এবং ConstraintLayout সীমাবদ্ধতা। এতে alpha এর মতো কিছু বৈশিষ্ট্যও রয়েছে। এতে ভিউগুলি থাকে না, কেবল সেই ভিউগুলির সীমাবদ্ধতা থাকে।

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

এই ধাপে, আপনি স্টার ভিউ স্ক্রিনের উপরের প্রান্ত থেকে শুরু করে স্ক্রিনের নীচের প্রান্তে শেষ করতে সীমাবদ্ধ করবেন।

আপনি মোশন এডিটর ব্যবহার করে অথবা activity_step1_scene.xml এর টেক্সট সরাসরি সম্পাদনা করে এই ধাপটি সম্পূর্ণ করতে পারেন।

ওভারভিউ প্যানেলে start ConstraintSet নির্বাচন করুন।

6e57661ed358b860.png সম্পর্কে

নির্বাচন প্যানেলে, red_star নির্বাচন করুন। বর্তমানে এটি layout উৎস দেখায় - এর অর্থ হল এটি এই ConstraintSet এ সীমাবদ্ধ নয়। সীমাবদ্ধতা তৈরি করতে উপরের ডানদিকে পেন্সিল আইকনটি ব্যবহার করুন।

অনুসরণ

ওভারভিউ প্যানেলে start ConstraintSet নির্বাচন করা হলে red_star একটি Source of start দেখায় কিনা তা নিশ্চিত করুন।
অ্যাট্রিবিউটস প্যানেলে, start ConstraintSet এ red_star নির্বাচন করে, উপরে একটি Constraint যোগ করুন এবং নীল + বোতামে ক্লিক করে শুরু করুন।

2fce076cd7b04bd.png সম্পর্কে

এই সীমাবদ্ধতার জন্য Motion Editor যে কোডটি তৈরি করেছে তা দেখতে xml/activity_step1_scene.xml খুলুন।

কার্যকলাপ_পদক্ষেপ1_দৃশ্য.xml

<!-- Constraints to apply at the start of the animation -->
<ConstraintSet android:id="@+id/start">
   <Constraint
           android:id="@+id/red_star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           motion:layout_constraintStart_toStartOf="parent"
           motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>

ConstraintSet এর একটি id @id/start আছে এবং MotionLayout এর সকল ভিউতে প্রযোজ্য সকল সীমাবদ্ধতা নির্দিষ্ট করে। যেহেতু এই MotionLayout শুধুমাত্র একটি ভিউ আছে, তাই এর শুধুমাত্র একটি Constraint প্রয়োজন।

ConstraintSet এর ভেতরে Constraint ভিউয়ের আইডি নির্দিষ্ট করে যা এটি সীমাবদ্ধ করছে, @id/red_star activity_step1.xml এ সংজ্ঞায়িত করা হয়েছে। এটা মনে রাখা গুরুত্বপূর্ণ যে Constraint ট্যাগগুলি কেবল সীমাবদ্ধতা এবং লেআউট তথ্য নির্দিষ্ট করে। Constraint ট্যাগটি জানে না যে এটি একটি ImageView এ প্রয়োগ করা হচ্ছে।

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

ওভারভিউ প্যানেলে end সীমাবদ্ধতা সেট নির্বাচন করুন।

346e1248639b6f1e.png সম্পর্কে

end ConstraintSet এ red_star এর জন্য একটি Constraint যোগ করার জন্য আগের মতো একই ধাপগুলি অনুসরণ করুন।
এই ধাপটি সম্পূর্ণ করার জন্য Motion Editor ব্যবহার করতে, bottom একটি সীমাবদ্ধতা যোগ করুন এবং নীল + বোতামে ক্লিক করে end ।

fd33c779ff83c80a.png সম্পর্কে

XML-এ কোডটি দেখতে এরকম:

কার্যকলাপ_পদক্ষেপ_১_দৃশ্য.xml

<!-- Constraints to apply at the end of the animation -->
<ConstraintSet android:id="@+id/end">
   <Constraint
           android:id="@+id/red_star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           motion:layout_constraintEnd_toEndOf="parent"
           motion:layout_constraintBottom_toBottomOf="parent" />
</ConstraintSet>

@id/start মতোই, এই ConstraintSet এর @id/red_star এ একটি মাত্র Constraint আছে। এবার এটি স্ক্রিনের নীচের প্রান্তে সীমাবদ্ধ করে।

আপনাকে তাদের নাম @id/start এবং @id/end রাখতে হবে না, তবে এটি করা সুবিধাজনক।

ধাপ ৪: একটি রূপান্তর সংজ্ঞায়িত করুন

প্রতিটি MotionScene কমপক্ষে একটি ট্রানজিশন অন্তর্ভুক্ত থাকতে হবে। একটি ট্রানজিশন একটি অ্যানিমেশনের প্রতিটি অংশকে শুরু থেকে শেষ পর্যন্ত সংজ্ঞায়িত করে।

একটি ট্রানজিশনের জন্য একটি শুরু এবং শেষের ConstraintSet নির্দিষ্ট করতে হয়। একটি ট্রানজিশন অন্যান্য উপায়েও অ্যানিমেশনটি কীভাবে পরিবর্তন করতে হবে তা নির্দিষ্ট করতে পারে, যেমন অ্যানিমেশনটি কতক্ষণ চালাতে হবে বা ভিউ টেনে কীভাবে অ্যানিমেট করতে হবে।

একটি ট্রানজিশন একটি MotionScene একটি অ্যানিমেশন বর্ণনা করে।

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

একটি MotionScene একাধিক অ্যানিমেশন এবং একাধিক Transition থাকতে পারে।

MotionScene ফাইল তৈরি করার সময় Motion Editor আমাদের জন্য ডিফল্টভাবে একটি ট্রানজিশন তৈরি করেছিল। জেনারেট হওয়া ট্রানজিশন দেখতে activity_step1_scene.xml খুলুন।

কার্যকলাপ_পদক্ষেপ1_দৃশ্য.xml

<!-- A transition describes an animation via start and end state -->
<Transition
   motion:constraintSetEnd="@+id/end"
   motion:constraintSetStart="@id/start"
   motion:duration="1000">
  <KeyFrameSet>
  </KeyFrameSet>
</Transition>

একটি অ্যানিমেশন তৈরি করতে MotionLayout যা যা প্রয়োজন, তা এখানে দেওয়া হল। প্রতিটি বৈশিষ্ট্যের দিকে তাকালে:

অ্যানিমেশন শুরু হওয়ার সাথে সাথে ভিউগুলিতে constraintSetStart প্রয়োগ করা হবে।
অ্যানিমেশনের শেষে ভিউগুলিতে constraintSetEnd প্রয়োগ করা হবে।
duration মিলিসেকেন্ডে অ্যানিমেশনটি কত সময় নেবে তা নির্দিষ্ট করে।

এরপর MotionLayout শুরু এবং শেষের সীমাবদ্ধতার মধ্যে একটি পথ বের করবে এবং নির্দিষ্ট সময়কালের জন্য এটিকে অ্যানিমেট করবে।

ধাপ ৫: মোশন এডিটরে অ্যানিমেশনের প্রিভিউ দেখুন

অনুসরণ

অ্যানিমেশন: মোশন এডিটরে একটি ট্রানজিশন প্রিভিউ চালানোর ভিডিও

মোশন এডিটর খুলুন এবং ওভারভিউ প্যানেলে start এবং end মাঝখানে তীর চিহ্নে ক্লিক করে ট্রানজিশনটি নির্বাচন করুন।

1dc541ae8c43b250.png সম্পর্কে

যখন একটি ট্রানজিশন নির্বাচন করা হয় তখন নির্বাচন প্যানেল প্লেব্যাক নিয়ন্ত্রণ এবং একটি স্ক্রাব বার দেখায়। অ্যানিমেশনটি পূর্বরূপ দেখতে প্লেতে ক্লিক করুন অথবা বর্তমান অবস্থানটি টেনে আনুন।

a0fd2593384dfb36.png সম্পর্কে

ধাপ ৬: একটি অন-ক্লিক হ্যান্ডলার যোগ করুন

অ্যানিমেশন শুরু করার জন্য আপনার একটি উপায় প্রয়োজন। এটি করার একটি উপায় হল MotionLayout কে @id/red_star এ ক্লিক ইভেন্টগুলিতে সাড়া দিতে বাধ্য করা।

মোশন এডিটরটি খুলুন এবং ওভারভিউ প্যানেলে শুরু এবং শেষের মাঝখানে তীর চিহ্নে ক্লিক করে ট্রানজিশনটি নির্বাচন করুন।

b6f94b344ce65290.png সম্পর্কে

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

ভিউ টু ক্লিক করে red_star করুন।

b0d3f0c970604f01.png সম্পর্কে

Add এ ক্লিক করুন। ক্লিক হ্যান্ডলারটি Transition in Motion Editor-এ একটি ছোট বিন্দু দ্বারা প্রতিনিধিত্ব করা হয়।

cec3913e67fb4105.png সম্পর্কে

ওভারভিউ প্যানেলে নির্বাচিত ট্রানজিশনের মাধ্যমে, অ্যাট্রিবিউট প্যানেলে আপনার যোগ করা OnClick হ্যান্ডলারে toggle একটি clickAction অ্যাট্রিবিউট যোগ করুন।

9af6fc60673d093d.png সম্পর্কে

Motion Editor যে কোডটি তৈরি করেছে তা দেখতে activity_step1_scene.xml খুলুন।

কার্যকলাপ_পদক্ষেপ1_দৃশ্য.xml

<!-- A transition describes an animation via start and end state -->
<Transition
    motion:constraintSetStart="@+id/start"
    motion:constraintSetEnd="@+id/end"
    motion:duration="1000">
    <!-- MotionLayout will handle clicks on @id/red_star to "toggle" the animation between the start and end -->
    <OnClick
        motion:targetId="@id/red_star"
        motion:clickAction="toggle" />
</Transition>

Transition MotionLayout ক্লিক ইভেন্টের প্রতিক্রিয়ায় একটি <OnClick> ট্যাগ ব্যবহার করে অ্যানিমেশনটি চালাতে বলে। প্রতিটি অ্যাট্রিবিউটের দিকে তাকালে:

targetId হল ক্লিকের জন্য দেখার ভিউ।
toggle clickAction ক্লিক করলে শুরু এবং শেষ অবস্থার মধ্যে স্যুইচ করবে। আপনি ডকুমেন্টেশনে clickAction এর জন্য অন্যান্য বিকল্প দেখতে পারেন।

আপনার কোডটি চালান, ধাপ ১ এ ক্লিক করুন, তারপর লাল তারাটিতে ক্লিক করুন এবং অ্যানিমেশনটি দেখুন!

ধাপ ৫: অ্যানিমেশনগুলি কার্যকরভাবে

অ্যাপটি চালান! তারাটিতে ক্লিক করলেই আপনার অ্যানিমেশনটি চালু হতে দেখা যাবে।

অনুসরণ

সম্পূর্ণ মোশন দৃশ্য ফাইলটি একটি Transition সংজ্ঞায়িত করে যা একটি start এবং end ConstraintSet নির্দেশ করে।

অ্যানিমেশনের শুরুতে ( @id/start ), তারকা আইকনটি স্ক্রিনের উপরের প্রান্তে সীমাবদ্ধ থাকে। অ্যানিমেশনের শেষে ( @id/end ) তারকা আইকনটি স্ক্রিনের নীচের প্রান্তে সীমাবদ্ধ থাকে।

<?xml version="1.0" encoding="utf-8"?>

<!-- Describe the animation for activity_step1.xml -->
<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- A transition describes an animation via start and end state -->
   <Transition
           motion:constraintSetStart="@+id/start"
           motion:constraintSetEnd="@+id/end"
           motion:duration="1000">
       <!-- MotionLayout will handle clicks on @id/star to "toggle" the animation between the start and end -->
       <OnClick
               motion:targetId="@id/red_star"
               motion:clickAction="toggle" />
   </Transition>

   <!-- Constraints to apply at the end of the animation -->
   <ConstraintSet android:id="@+id/start">
       <Constraint
               android:id="@+id/red_star"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               motion:layout_constraintStart_toStartOf="parent"
               motion:layout_constraintTop_toTopOf="parent" />
   </ConstraintSet>

   <!-- Constraints to apply at the end of the animation -->
   <ConstraintSet android:id="@+id/end">
       <Constraint
               android:id="@+id/red_star"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               motion:layout_constraintEnd_toEndOf="parent"
               motion:layout_constraintBottom_toBottomOf="parent" />
   </ConstraintSet>
</MotionScene>

৪. ড্র্যাগ ইভেন্টের উপর ভিত্তি করে অ্যানিমেটিং

এই ধাপে আপনি এমন একটি অ্যানিমেশন তৈরি করবেন যা ব্যবহারকারীর ড্র্যাগ ইভেন্টে সাড়া দেবে (যখন ব্যবহারকারী স্ক্রিন সোয়াইপ করে) অ্যানিমেশনটি চালাবে। MotionLayout ভিউ সরানোর জন্য ট্র্যাকিং টাচ ইভেন্ট সমর্থন করে, সেইসাথে গতিকে তরল করার জন্য পদার্থবিদ্যা-ভিত্তিক ফ্লিং অঙ্গভঙ্গি সমর্থন করে।

ধাপ ১: প্রাথমিক কোডটি পরীক্ষা করুন

শুরু করতে, activity_step2.xml লেআউট ফাইলটি খুলুন, যার একটি বিদ্যমান MotionLayout আছে। কোডটি একবার দেখে নিন।

কার্যকলাপ_পদক্ষেপ২.এক্সএমএল

<!-- initial code -->

<androidx.constraintlayout.motion.widget.MotionLayout
       ...
       motion:layoutDescription="@xml/step2" >

   <ImageView
           android:id="@+id/left_star"
           ...
   />

   <ImageView
           android:id="@+id/right_star"
           ...
   />

   <ImageView
           android:id="@+id/red_star"
           ...
   />

   <TextView
           android:id="@+id/credits"
           ...
           motion:layout_constraintTop_toTopOf="parent"
           motion:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.motion.widget.MotionLayout>

এই লেআউটটি অ্যানিমেশনের জন্য সমস্ত দৃশ্য সংজ্ঞায়িত করে। তিন তারকা আইকনগুলি লেআউটে সীমাবদ্ধ নয় কারণ সেগুলি মোশন দৃশ্যে অ্যানিমেটেড হবে।

কৃতিত্ব হলো, TextView কিছু সীমাবদ্ধতা প্রযোজ্য, কারণ এটি সম্পূর্ণ অ্যানিমেশনের সময় একই স্থানে থাকে এবং কোনও বৈশিষ্ট্য পরিবর্তন করে না।

ধাপ ২: দৃশ্যটি অ্যানিমেট করুন

ঠিক আগের অ্যানিমেশনের মতো, অ্যানিমেশনটি একটি start এবং end ConstraintSet, এবং একটি Transition দ্বারা সংজ্ঞায়িত করা হবে।

শুরুর সীমাবদ্ধতা সেট সংজ্ঞায়িত করুন

অ্যানিমেশনটি সংজ্ঞায়িত করতে মোশন দৃশ্য xml/step2.xml খুলুন।
শুরুর সীমাবদ্ধতা start এর জন্য সীমাবদ্ধতা যোগ করুন। শুরুতে, তিনটি তারাই স্ক্রিনের নীচে কেন্দ্রীভূত থাকে। ডান এবং বাম তারার alpha মান 0.0 , যার অর্থ হল তারা সম্পূর্ণ স্বচ্ছ এবং লুকানো।

ধাপ২.xml

<!-- TODO apply starting constraints -->

<!-- Constraints to apply at the start of the animation -->
<ConstraintSet android:id="@+id/start">
   <Constraint
           android:id="@+id/red_star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           motion:layout_constraintStart_toStartOf="parent"
           motion:layout_constraintEnd_toEndOf="parent"
           motion:layout_constraintBottom_toBottomOf="parent" />

   <Constraint
           android:id="@+id/left_star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:alpha="0.0"
           motion:layout_constraintStart_toStartOf="parent"
           motion:layout_constraintEnd_toEndOf="parent"
           motion:layout_constraintBottom_toBottomOf="parent" />

   <Constraint
           android:id="@+id/right_star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:alpha="0.0"
           motion:layout_constraintStart_toStartOf="parent"
           motion:layout_constraintEnd_toEndOf="parent"
           motion:layout_constraintBottom_toBottomOf="parent" />
</ConstraintSet>

এই ConstraintSet এ, আপনি প্রতিটি তারার জন্য একটি Constraint নির্দিষ্ট করবেন। অ্যানিমেশনের শুরুতে MotionLayout দ্বারা প্রতিটি সীমাবদ্ধতা প্রয়োগ করা হবে।

প্রতিটি তারার দৃশ্য পর্দার নীচে কেন্দ্রীভূত হয় শুরু, শেষ এবং নীচের সীমাবদ্ধতা ব্যবহার করে। @id/left_star এবং @id/right_star এই দুটি তারার একটি অতিরিক্ত আলফা মান রয়েছে যা তাদের অদৃশ্য করে তোলে এবং এটি অ্যানিমেশনের শুরুতে প্রয়োগ করা হবে।

start এবং end সীমাবদ্ধতা সেট অ্যানিমেশনের শুরু এবং শেষ নির্ধারণ করে। শুরুর উপর একটি সীমাবদ্ধতা, যেমন motion:layout_constraintStart_toStartOf একটি দৃশ্যের শুরুকে অন্য দৃশ্যের শুরুতে সীমাবদ্ধ করবে। এটি প্রথমে বিভ্রান্তিকর হতে পারে, কারণ start নামটি উভয়ের জন্য ব্যবহৃত হয় এবং উভয়ই সীমাবদ্ধতার প্রসঙ্গে ব্যবহৃত হয়। পার্থক্যটি আঁকতে সাহায্য করার জন্য, layout_constraintStart এ start দৃশ্যের "শুরু" বোঝায়, যা বাম থেকে ডান ভাষায় বাম এবং ডান থেকে বাম ভাষায় ডান। start সীমাবদ্ধতা সেটটি অ্যানিমেশনের শুরুকে বোঝায়।

আপনি Constraint এ একটি আলফা মান নির্দিষ্ট করতে পারেন। এই মানটি ভিউয়ের স্বচ্ছতা নির্ধারণ করে, যেখানে "0.0" সম্পূর্ণ স্বচ্ছ এবং "1.0" সম্পূর্ণ অস্বচ্ছ।

দুটি আলফা মানের মধ্যে অ্যানিমেট করার সময়, MotionLayout তাদের মধ্যে মসৃণভাবে স্থানান্তর করবে। উদাহরণস্বরূপ, alpha="0.0" এবং alpha="1.0" এর মধ্যে অ্যানিমেট করার সময়, MotionLayout একটি ফেড-ইন প্রভাব তৈরি করবে।

শেষ সীমাবদ্ধতা সেট সংজ্ঞায়িত করুন

@id/credits নিচে তিনটি তারা একসাথে স্থাপন করার জন্য একটি চেইন ব্যবহার করার জন্য শেষ সীমাবদ্ধতা নির্ধারণ করুন। এছাড়াও, এটি বাম এবং ডান তারার alpha শেষ মান 1.0 এ সেট করবে।

ধাপ২.xml

<!-- TODO apply ending constraints -->

<!-- Constraints to apply at the end of the animation -->
<ConstraintSet android:id="@+id/end">

   <Constraint
           android:id="@+id/left_star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:alpha="1.0"
           motion:layout_constraintHorizontal_chainStyle="packed"
           motion:layout_constraintStart_toStartOf="parent"
           motion:layout_constraintEnd_toStartOf="@id/red_star"
           motion:layout_constraintTop_toBottomOf="@id/credits" />

   <Constraint
           android:id="@+id/red_star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           motion:layout_constraintStart_toEndOf="@id/left_star"
           motion:layout_constraintEnd_toStartOf="@id/right_star"
           motion:layout_constraintTop_toBottomOf="@id/credits" />

   <Constraint
           android:id="@+id/right_star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:alpha="1.0"
           motion:layout_constraintStart_toEndOf="@id/red_star"
           motion:layout_constraintEnd_toEndOf="parent"
           motion:layout_constraintTop_toBottomOf="@id/credits" />
</ConstraintSet>

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

এছাড়াও, যেহেতু alpha প্রোপার্টিটি ConstraintSets উভয় ক্ষেত্রে @id/right_start এবং @id/left_star তে সেট করা আছে, তাই অ্যানিমেশন এগিয়ে যাওয়ার সাথে সাথে উভয় ভিউই ম্লান হয়ে যাবে।

ব্যবহারকারীর সোয়াইপের উপর ভিত্তি করে অ্যানিমেটিং

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

OnSwipe ট্যাগ যোগ করার জন্য TODO এর পরিবর্তে <OnSwipe motion:touchAnchorId="@id/red_star" /> ব্যবহার করুন।

ধাপ২.xml

<!-- TODO add OnSwipe tag -->

<!-- A transition describes an animation via start and end state -->
<Transition
       motion:constraintSetStart="@+id/start"
       motion:constraintSetEnd="@+id/end">
   <!-- MotionLayout will track swipes relative to this view -->
   <OnSwipe motion:touchAnchorId="@id/red_star" />
</Transition>

OnSwipe কয়েকটি বৈশিষ্ট্য রয়েছে, যার মধ্যে সবচেয়ে গুরুত্বপূর্ণ হল touchAnchorId ।

touchAnchorId হল ট্র্যাক করা ভিউ যা স্পর্শের প্রতিক্রিয়ায় সরে যায়। MotionLayout এই ভিউটিকে সোয়াইপ করা আঙুল থেকে একই দূরত্বে রাখবে।
touchAnchorSide নির্ধারণ করে যে ভিউয়ের কোন দিকটি ট্র্যাক করা উচিত। এটি এমন ভিউগুলির জন্য গুরুত্বপূর্ণ যেগুলি আকার পরিবর্তন করে, জটিল পথ অনুসরণ করে, অথবা যার একটি দিক অন্যটির চেয়ে দ্রুত গতিতে চলে।
dragDirection নির্ধারণ করে যে এই অ্যানিমেশনের জন্য কোন দিকটি গুরুত্বপূর্ণ (উপরে, নীচে, বাম বা ডানে)।

যখন MotionLayout ড্র্যাগ ইভেন্ট শোনে, তখন শ্রোতা MotionLayout ভিউতে নিবন্ধিত হবে, touchAnchorId দ্বারা নির্দিষ্ট ভিউতে নয়। যখন কোনও ব্যবহারকারী স্ক্রিনের যেকোনো জায়গায় একটি অঙ্গভঙ্গি শুরু করেন, তখন MotionLayout তাদের আঙুল এবং touchAnchorId ভিউয়ের touchAnchorSide এর মধ্যে দূরত্ব স্থির রাখবে। উদাহরণস্বরূপ, যদি তারা অ্যাঙ্কর পাশ থেকে 100dp দূরে স্পর্শ করে, তাহলে MotionLayout পুরো অ্যানিমেশনের জন্য সেই পাশটি তাদের আঙুল থেকে 100dp দূরে রাখবে।

চেষ্টা করে দেখো

অ্যাপটি আবার চালান, এবং ধাপ ২ স্ক্রিনটি খুলুন। আপনি অ্যানিমেশনটি দেখতে পাবেন।
MotionLayout কীভাবে তরল পদার্থবিদ্যা ভিত্তিক অ্যানিমেশন প্রদর্শন করে তা অন্বেষণ করতে অ্যানিমেশনের মাঝপথে "ফ্লিং" করার চেষ্টা করুন অথবা আপনার আঙুল ছেড়ে দিন!

অনুসরণ

MotionLayout ConstraintLayout এর বৈশিষ্ট্যগুলি ব্যবহার করে সমৃদ্ধ প্রভাব তৈরি করতে বিভিন্ন ডিজাইনের মধ্যে অ্যানিমেট করতে পারে।

এই অ্যানিমেশনে, তিনটি ভিউই শুরুতে স্ক্রিনের নীচে তাদের প্যারেন্টের সাপেক্ষে অবস্থান করা হয়েছে। শেষে, তিনটি ভিউ @id/credits এর সাপেক্ষে একটি শৃঙ্খলে অবস্থান করা হয়েছে।

এই ভিন্ন ভিন্ন লেআউট থাকা সত্ত্বেও, MotionLayout শুরু এবং শেষের মধ্যে একটি তরল অ্যানিমেশন তৈরি করবে।

৫. একটি পথ পরিবর্তন করা

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

ধাপ ১: বিদ্যমান কোডটি অন্বেষণ করুন

বিদ্যমান লেআউট এবং গতি দৃশ্য দেখতে layout/activity_step3.xml এবং xml/step3.xml খুলুন। একটি ImageView এবং TextView চাঁদ প্রদর্শন করে এবং টেক্সট জমা দেয়।
মোশন সিন ফাইলটি খুলুন ( xml/step3.xml )। আপনি দেখতে পাবেন যে @id/start থেকে @id/end এ একটি Transition সংজ্ঞায়িত করা হয়েছে। অ্যানিমেশনটি দুটি ConstraintSets ব্যবহার করে স্ক্রিনের নীচের বাম দিক থেকে স্ক্রিনের নীচের ডানদিকে চাঁদের চিত্রটি সরায়। চাঁদের গতিবিধির সাথে সাথে ক্রেডিট টেক্সট alpha="0.0" থেকে alpha="1.0" এ বিবর্ণ হয়ে যায়।
এখনই অ্যাপটি চালান এবং ধাপ ৩ নির্বাচন করুন। আপনি যখন চাঁদে ক্লিক করবেন তখন দেখতে পাবেন যে চাঁদ শুরু থেকে শেষ পর্যন্ত একটি রৈখিক পথ (অথবা একটি সরল রেখা) অনুসরণ করে।

ধাপ ২: পাথ ডিবাগিং সক্ষম করুন

চাঁদের গতিতে একটি চাপ যোগ করার আগে, MotionLayout এ পাথ ডিবাগিং সক্ষম করা সহায়ক।

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

ডিবাগিং পাথ সক্রিয় করতে, layout/activity_step3.xml খুলুন এবং MotionLayout ট্যাগে motion:motionDebug="SHOW_PATH" যোগ করুন।

কার্যকলাপ_পদক্ষেপ৩.এক্সএমএল

<!-- Add motion:motionDebug="SHOW_PATH" -->

<androidx.constraintlayout.motion.widget.MotionLayout
       ...
       motion:motionDebug="SHOW_PATH" >

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

23bbb604f456f65c.png সম্পর্কে

বৃত্তগুলি একটি দৃশ্যের শুরু বা শেষ অবস্থানকে প্রতিনিধিত্ব করে।
রেখাগুলি একটি দৃশ্যের পথকে প্রতিনিধিত্ব করে।
হীরা একটি KeyPosition প্রতিনিধিত্ব করে যা পথ পরিবর্তন করে।

উদাহরণস্বরূপ, এই অ্যানিমেশনে, মাঝের বৃত্তটি হল ক্রেডিট টেক্সটের অবস্থান।

ধাপ ৩: একটি পথ পরিবর্তন করুন

MotionLayout এর সমস্ত অ্যানিমেশন একটি start এবং end ConstraintSet দ্বারা সংজ্ঞায়িত করা হয় যা অ্যানিমেশন শুরু হওয়ার আগে এবং অ্যানিমেশন সম্পন্ন হওয়ার পরে স্ক্রিনটি কেমন দেখাবে তা নির্ধারণ করে। ডিফল্টরূপে, MotionLayout প্রতিটি ভিউয়ের শুরু এবং শেষ অবস্থানের মধ্যে একটি রৈখিক পথ (একটি সরল রেখা) প্লট করে যা অবস্থান পরিবর্তন করে।

এই উদাহরণে চাঁদের বৃত্তের মতো জটিল পথ তৈরি করতে, MotionLayout একটি KeyPosition ব্যবহার করে শুরু এবং শেষের মধ্যে একটি দৃশ্য যে পথ নেয় তা পরিবর্তন করে।

একটি KeyPosition শুরু এবং শেষের মধ্যে একটি ভিউ যে পথটি নেয় তা পরিবর্তন করে ConstraintSet ।

এটি শুরু এবং শেষ অবস্থানের মধ্যে তৃতীয় (অথবা চতুর্থ, অথবা পঞ্চম, ...) বিন্দু দিয়ে যাওয়ার জন্য একটি দৃশ্যের পথকে বিকৃত করতে পারে। অথবা, এটি X বা Y অক্ষ বরাবর অগ্রগতির গতি বাড়াতে এবং ধীর করতে পারে।

একটি KeyPosition শুধুমাত্র অ্যানিমেশনের সময় পথ পরিবর্তন করতে পারে, এটি শুরু বা শেষ পরিবর্তন করতে পারে না।

ConstraintSet সর্বদা অ্যানিমেশনের শুরু এবং শেষে ভিউগুলির জন্য চূড়ান্ত অবস্থান নির্দিষ্ট করবে।

xml/step3.xml খুলুন এবং দৃশ্যে একটি KeyPosition যোগ করুন। KeyPosition ট্যাগটি Transition ট্যাগের ভিতরে স্থাপন করা হয়েছে।

eae4dae9a12d0410.png সম্পর্কে

ধাপ ৩.xml

<!-- TODO: Add KeyFrameSet and KeyPosition -->
<KeyFrameSet>
   <KeyPosition
           motion:framePosition="50"
           motion:motionTarget="@id/moon"
           motion:keyPositionType="parentRelative"
           motion:percentY="0.5"
   />
</KeyFrameSet>

একটি KeyFrameSet হল একটি Transition এর একটি শিশু, এবং এটি সমস্ত KeyFrames এর একটি সেট, যেমন KeyPosition , যা ট্রানজিশনের সময় প্রয়োগ করা উচিত।

MotionLayout যখন শুরু এবং শেষের মধ্যে চাঁদের পথ গণনা করছে, তখন এটি KeyFrameSet এ উল্লেখিত KeyPosition উপর ভিত্তি করে পথ পরিবর্তন করে। আপনি অ্যাপটি আবার চালু করে দেখতে পারেন যে এটি কীভাবে পথ পরিবর্তন করে।

একটি KeyPosition বেশ কিছু বৈশিষ্ট্য রয়েছে যা বর্ণনা করে যে এটি কীভাবে পথ পরিবর্তন করে। সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্যগুলি হল:

framePosition হলো ০ থেকে ১০০ এর মধ্যে একটি সংখ্যা। এটি নির্ধারণ করে কখন অ্যানিমেশনে এই KeyPosition প্রয়োগ করা উচিত, যেখানে অ্যানিমেশনের মাধ্যমে ১% এবং অ্যানিমেশনের মাধ্যমে ৯৯% ব্যবহার করা হবে। সুতরাং যদি মান ৫০ হয়, তাহলে আপনি এটি ঠিক মাঝখানে প্রয়োগ করবেন।
motionTarget হল সেই ভিউ যার জন্য এই KeyPosition পথ পরিবর্তন করে।
keyPositionType হল এই KeyPosition কীভাবে পথ পরিবর্তন করে। এটি parentRelative , pathRelative , অথবা deltaRelative হতে পারে (পরবর্তী ধাপে ব্যাখ্যা করা হয়েছে)।
percentX | percentY হল framePosition পাথটি কত পরিবর্তন করতে হবে (0.0 এবং 1.0 এর মধ্যে মান, নেতিবাচক মান সহ এবং মান >1 অনুমোদিত)।

তুমি এটা এভাবে ভাবতে পারো: " framePosition এ keyPositionType দ্বারা নির্ধারিত স্থানাঙ্ক অনুসারে percentX বা percentY দ্বারা সরানোর মাধ্যমে motionTarget এর পথ পরিবর্তন করো ।"

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

চেষ্টা করে দেখো

আপনি যদি আবার অ্যাপটি চালান, তাহলে আপনি এই ধাপের অ্যানিমেশন দেখতে পাবেন।

46b179c01801f19e.gif সম্পর্কে

চাঁদ একটি বৃত্তাকার বৃত্ত অনুসরণ করে কারণ এটি Transition উল্লেখিত একটি KeyPosition মধ্য দিয়ে যায়।

<KeyPosition
       motion:framePosition="50"
       motion:motionTarget="@id/moon"
       motion:keyPositionType="parentRelative"
       motion:percentY="0.5"
/>

আপনি এই KeyPosition এভাবে পড়তে পারেন: " framePosition 50 এ (অ্যানিমেশনের অর্ধেক পথ) parentRelative (সম্পূর্ণ MotionLayout দ্বারা নির্ধারিত স্থানাঙ্ক অনুসারে motionTarget @id/moon এর পথটি 50% Y (স্ক্রিনের অর্ধেক নীচে) সরানোর মাধ্যমে পরিবর্তন করুন।"

সুতরাং, অ্যানিমেশনের অর্ধেক পথ অতিক্রম করার পর, চাঁদকে এমন একটি KeyPosition মধ্য দিয়ে যেতে হবে যা স্ক্রিনের ৫০% নিচে থাকবে। এই KeyPosition X গতিকে মোটেও পরিবর্তন করে না, তাই চাঁদ এখনও শুরু থেকে শেষ পর্যন্ত অনুভূমিকভাবে যাবে। MotionLayout শুরু এবং শেষের মধ্যে চলার সময় এই KeyPosition মধ্য দিয়ে যাওয়া একটি মসৃণ পথ খুঁজে বের করবে।

যদি আপনি ভালো করে লক্ষ্য করেন, তাহলে দেখবেন চাঁদের অবস্থানের কারণেই ক্রেডিট টেক্সটটি সীমাবদ্ধ। কেন এটি উল্লম্বভাবেও নড়ছে না?

অনুসরণ

<Constraint
       android:id="@id/credits"
       ...
       motion:layout_constraintBottom_toBottomOf="@id/moon"
       motion:layout_constraintTop_toTopOf="@id/moon"
/>

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

যদি আপনি চান যে ক্রেডিটগুলি চাঁদের সাথে সাথে সরে যাক, তাহলে আপনি ক্রেডিটগুলিতে একটি KeyPosition যোগ করতে পারেন, অথবা @id/credits এর শুরুর সীমাবদ্ধতাগুলি পরিবর্তন করতে পারেন।

পরবর্তী বিভাগে আপনি MotionLayout এ বিভিন্ন ধরণের keyPositionType সম্পর্কে জানবেন।

৬. কীপজিশন টাইপ বোঝা

শেষ ধাপে আপনি পর্দার ৫০% অংশ পাথ অফসেট করার জন্য একটি keyPosition টাইপ parentRelative ব্যবহার করেছেন। keyPositionType অ্যাট্রিবিউট নির্ধারণ করে যে MotionLayout কীভাবে percentX বা percentY অনুসারে পাথ পরিবর্তন করবে।

<KeyFrameSet>
   <KeyPosition
           motion:framePosition="50"
           motion:motionTarget="@id/moon"
           motion:keyPositionType="parentRelative"
           motion:percentY="0.5"
   />
</KeyFrameSet>

তিনটি ভিন্ন ধরণের keyPosition সম্ভব: parentRelative , pathRelative , এবং deltaRelative । একটি টাইপ নির্দিষ্ট করলে percentX এবং percentY গণনা করা স্থানাঙ্ক সিস্টেমটি পরিবর্তন হবে।

স্থানাঙ্ক ব্যবস্থা কী?

স্থানাঙ্ক ব্যবস্থা স্থানের একটি বিন্দু নির্দিষ্ট করার একটি উপায় প্রদান করে। এগুলি পর্দায় একটি অবস্থান বর্ণনা করার জন্যও কার্যকর।

MotionLayout স্থানাঙ্ক সিস্টেম হল একটি কার্টেসিয়ান স্থানাঙ্ক সিস্টেম । এর অর্থ হল তাদের একটি X এবং একটি Y অক্ষ রয়েছে যা দুটি লম্ব রেখা দ্বারা সংজ্ঞায়িত। তাদের মধ্যে মূল পার্থক্য হল পর্দায় X অক্ষটি কোথায় যায় (Y অক্ষটি সর্বদা X অক্ষের সাথে লম্ব থাকে)।

MotionLayout এর সকল স্থানাঙ্ক সিস্টেম X এবং Y উভয় অক্ষেই 0.0 এবং 1.0 এর মধ্যে মান ব্যবহার করে। তারা ঋণাত্মক মান এবং 1.0 এর চেয়ে বড় মান অনুমোদন করে। সুতরাং, উদাহরণস্বরূপ, -2.0 এর percentX মানের অর্থ হল, X অক্ষের বিপরীত দিকে দুবার যেতে হবে।

যদি এগুলো বীজগণিত ক্লাসের মতো একটু বেশি শোনায়, তাহলে নিচের ছবিগুলো দেখুন!

প্যারেন্ট-রিলেটিভ স্থানাঙ্ক

a7b7568d46d9dec7.png সম্পর্কে

parentRelative এর keyPositionType স্ক্রিনের মতো একই স্থানাঙ্ক সিস্টেম ব্যবহার করে। এটি সমগ্র MotionLayout এর উপরের বাম দিকে (0, 0) এবং নীচে ডানদিকে (1, 1) সংজ্ঞায়িত করে।

আপনি যখনই parentRelative একটি অ্যানিমেশন তৈরি করতে চান যা পুরো MotionLayout জুড়ে চলে - যেমন এই উদাহরণে চাঁদের চাপ।

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

ডেল্টা-রিলেটিভ স্থানাঙ্ক

5680bf553627416c.png সম্পর্কে

ডেল্টা হল পরিবর্তনের জন্য একটি গাণিতিক শব্দ, তাই deltaRelative হল "পরিবর্তন আপেক্ষিক" বলার একটি উপায়। deltaRelative স্থানাঙ্ক (0,0) হল ভিউয়ের শুরুর অবস্থান এবং (1,1) হল শেষের অবস্থান। X এবং Y অক্ষগুলি স্ক্রিনের সাথে সারিবদ্ধ।

স্ক্রিনে X অক্ষ সর্বদা অনুভূমিক থাকে এবং Y অক্ষ সর্বদা উল্লম্ব থাকে। parentRelative এর তুলনায়, প্রধান পার্থক্য হল স্থানাঙ্কগুলি স্ক্রিনের সেই অংশটি বর্ণনা করে যেখানে ভিউটি চলমান থাকবে।

deltaRelative হল বিচ্ছিন্নভাবে অনুভূমিক বা উল্লম্ব গতি নিয়ন্ত্রণের জন্য একটি দুর্দান্ত স্থানাঙ্ক ব্যবস্থা। উদাহরণস্বরূপ, আপনি এমন একটি অ্যানিমেশন তৈরি করতে পারেন যা 50% এ তার উল্লম্ব (Y) গতি সম্পন্ন করে এবং অনুভূমিকভাবে (X) অ্যানিমেট করতে থাকে।

deltaRelative স্থানাঙ্কগুলি দৃশ্যের গতির সাথে সম্পর্কিত।

তাহলে যদি ভিউ ডানদিকে সরে যায়, তাহলে X ডানদিকে যাবে। যদি ভিউ বাম দিকে সরে যায়, তাহলে X বাম দিকে যাবে। একইভাবে, Y মাত্রা ভিউ অনুসরণ করবে এবং উপরে বা নীচে যাবে।

অবশ্যই, যদি আপনি চান যে ভিউটি শুরু বা বন্ধ অবস্থানের বাইরে চলে যাক, তাহলে আপনি সর্বদা নেতিবাচক মান অথবা 1.0 এর চেয়ে বড় মান ব্যবহার করতে পারেন!

এক্স এবং ওয়াই উভয় দিকে ভিউ কত দূরত্বে সরে তার উপর ভিত্তি করে deltaRelative স্থানাঙ্কগুলি প্রসারিত বা সঙ্কুচিত হবে।

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

আপেক্ষিক স্থানাঙ্ক

অনুসরণ

MotionLayout এর শেষ স্থানাঙ্ক সিস্টেম হল pathRelative । এটি অন্য দুটি থেকে বেশ আলাদা কারণ X অক্ষটি শুরু থেকে শেষ পর্যন্ত গতিপথ অনুসরণ করে। সুতরাং (0,0) হল শুরুর অবস্থান এবং (1,0) হল শেষের অবস্থান।

তুমি এটা কেন চাও? প্রথম নজরে এটা বেশ অবাক করার মতো, বিশেষ করে যেহেতু এই স্থানাঙ্ক সিস্টেমটি স্ক্রিন স্থানাঙ্ক সিস্টেমের সাথেও সংযুক্ত নয়।

দেখা যাচ্ছে যে pathRelative কিছু জিনিসের জন্য সত্যিই কার্যকর।

অ্যানিমেশনের কিছু অংশে গতি বাড়ানো, ধীর করা, অথবা ভিউ বন্ধ করা। যেহেতু X মাত্রা সর্বদা ভিউটি যে পথটি নেয় তার সাথে ঠিক মিলবে, তাই আপনি pathRelative KeyPosition ব্যবহার করে সেই পথের কোন নির্দিষ্ট বিন্দুতে পৌঁছানো হয়েছে তা পরিবর্তন করতে পারেন। সুতরাং framePosition framePosition="50" এ একটি KeyPosition যার percentX="0.1" থাকবে, অ্যানিমেশনটি গতির প্রথম 10% ভ্রমণ করতে 50% সময় নেবে।
একটি পথে একটি সূক্ষ্ম চাপ যোগ করা। যেহেতু Y মাত্রা সর্বদা গতির লম্ব থাকে, তাই Y পরিবর্তন করলে সামগ্রিক গতির সাপেক্ষে বক্ররেখার পথ পরিবর্তন হবে।
যখন deltaRelative কাজ করবে না তখন দ্বিতীয় মাত্রা যোগ করা । সম্পূর্ণ অনুভূমিক এবং উল্লম্ব গতির জন্য, deltaRelative শুধুমাত্র একটি কার্যকর মাত্রা তৈরি করবে। তবে, pathRelative সর্বদা ব্যবহারযোগ্য X এবং Y স্থানাঙ্ক তৈরি করবে।

In the next step you'll learn how to build even more complex paths using more than one KeyPosition .

7. Building complex paths

Looking at the animation you built in the last step, it does create a smooth curve, but the shape could be more "moon like."

Modify a path with multiple KeyPosition elements

MotionLayout can modify a path further by defining as many KeyPosition as needed to get any motion. For this animation you will build an arc, but you could make the moon jump up and down in the middle of the screen, if you wanted.

Open xml/step4.xml . You see it has the same views and the KeyFrame you added in the last step.
To round out the top of the curve, add two more KeyPositions to the path of @id/moon , one just before it reaches the top, and one after.

step4.xml

<!-- TODO: Add two more KeyPositions to the KeyFrameSet here -->
<KeyPosition
       motion:framePosition="25"
       motion:motionTarget="@id/moon"
       motion:keyPositionType="parentRelative"
       motion:percentY="0.6"
/>
<KeyPosition
       motion:framePosition="75"
       motion:motionTarget="@id/moon"
       motion:keyPositionType="parentRelative"
       motion:percentY="0.6"
/>

These KeyPositions will be applied 25% and 75% of the way through the animation, and cause @id/moon to move through a path that is 60% from the top of the screen. Combined with the existing KeyPosition at 50%, this creates a smooth arc for the moon to follow.

In MotionLayout , you can add as many KeyPositions as you would need to get the motion path you want. MotionLayout will apply each KeyPosition at the specified framePosition , and figure out how to create a smooth motion that goes through all of the KeyPositions .

Try it out

Run the app again. Go to Step 4 to see the animation in action. When you click on the moon, it follows the path from start to end, going through each KeyPosition that was specified in the KeyFrameSet .

Explore on your own

Before you move on to other types of KeyFrame , try adding some more KeyPositions to the KeyFrameSet to see what kind of effects you can create just using KeyPosition .

Here's one example showing how to build a complex path that moves back and forth during the animation.

step4.xml

<!-- Complex paths example: Dancing moon -->
<KeyFrameSet>
   <KeyPosition
           motion:framePosition="25"
           motion:motionTarget="@id/moon"
           motion:keyPositionType="parentRelative"
           motion:percentY="0.6"
           motion:percentX="0.1"
   />
   <KeyPosition
           motion:framePosition="50"
           motion:motionTarget="@id/moon"
           motion:keyPositionType="parentRelative"
           motion:percentY="0.5"
           motion:percentX="0.3"
   />
   <KeyPosition
           motion:framePosition="75"
           motion:motionTarget="@id/moon"
           motion:keyPositionType="parentRelative"
           motion:percentY="0.6"
           motion:percentX="0.1"
   />
</KeyFrameSet>

Once you're done exploring KeyPosition , in the next step you'll move on to other types of KeyFrames .

8. Changing attributes during motion

Building dynamic animations often means changing the size , rotation , or alpha of views as the animation progresses. MotionLayout supports animating many attributes on any view using a KeyAttribute .

In this step, you will use KeyAttribute to make the moon scale and rotate. You will also use a KeyAttribute to delay the appearance of the text until the moon has almost completed its journey.

Step 1: Resize and rotate with KeyAttribute

Open xml/step5.xml which contains the same animation you built in the last step. For variety, this screen uses a different space picture as the background.
To make the moon expand in size and rotate, add two KeyAttribute tags in the KeyFrameSet at keyFrame="50" and keyFrame="100"

step5.xml

<!-- TODO: Add KeyAttributes to rotate and resize @id/moon -->

<KeyAttribute
       motion:framePosition="50"
       motion:motionTarget="@id/moon"
       android:scaleY="2.0"
       android:scaleX="2.0"
       android:rotation="-360"
/>
<KeyAttribute
       motion:framePosition="100"
       motion:motionTarget="@id/moon"
       android:rotation="-720"
/>

These KeyAttributes are applied at 50% and 100% of the animation. The first KeyAttribute at 50% will happen at the top of the arc, and causes the view to be doubled in size as well as rotate -360 degrees (or one full circle). The second KeyAttribute will finish the second rotation to -720 degrees (two full circles) and shrink the size back to regular since the scaleX and scaleY values default to 1.0.

Just like a KeyPosition , a KeyAttribute uses the framePosition and motionTarget to specify when to apply the KeyFrame , and which view to modify. MotionLayout will interpolate between KeyPositions to create fluid animations.

KeyAttributes support attributes that can be applied to all views. They support changing basic attributes such as the visibility , alpha , or elevation . You can also change the rotation like you're doing here, rotate in three dimensions with rotateX and rotateY , scale the size with scaleX and scaleY , or translate the view's position in X, Y, or Z.

Step 2: Delay the appearance of credits

One of the goals of this step is to update the animation so that the credits text doesn't appear until the animation is mostly complete.

To delay the appearance of credits, define one more KeyAttribute that ensures that alpha will remain 0 until keyPosition="85" . MotionLayout will still smoothly transition from 0 to 100 alpha, but it will do it over the last 15% of the animation.

step5.xml

<!-- TODO: Add KeyAttribute to delay the appearance of @id/credits -->

<KeyAttribute
       motion:framePosition="85"
       motion:motionTarget="@id/credits"
       android:alpha="0.0"
/>

This KeyAttribute keeps the alpha of @id/credits at 0.0 for the first 85% of the animation. Since it starts at an alpha of 0, this means it will be invisible for the first 85% of the animation.

The end effect of this KeyAttribute is that the credits appear towards the end of the animation. This gives the appearance of them being coordinated with the moon settling down in the right corner of the screen.

By delaying animations on one view while another view moves like this, you can build impressive animations that feel dynamic to the user.

Try it out

Run the app again and go to Step 5 to see the animation in action. When you click on the moon, it'll follow the path from start to end, going through each KeyAttribute that was specified in the KeyFrameSet .

Because you rotate the moon two full circles, it will now do a double back flip, and the credits will delay their appearance until the animation is almost done.

Explore on your own

Before you move on to the final type of KeyFrame , try modifying other standard attributes in the KeyAttributes . For example, try changing rotation to rotationX to see what animation it produces.

Here's a list of the standard attributes that you can try:

android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ

9. Changing custom attributes

Rich animations involve changing the color or other attributes of a view. While MotionLayout can use a KeyAttribute to change any of the standard attributes listed in the previous task, you use a CustomAttribute to specify any other attribute.

A CustomAttribute can be used to set any value that has a setter. For example, you can set the backgroundColor on a View using a CustomAttribute . MotionLayout will use reflection to find the setter, then call it repeatedly to animate the view.

In this step, you will use a CustomAttribute to set the colorFilter attribute on the moon to build the animation shown below.

Define custom attributes

To get started open xml/step6.xml which contains the same animation you built in the last step.
To make the moon change colors, add two KeyAttribute with a CustomAttribute in the KeyFrameSet at keyFrame="0" , keyFrame="50" and keyFrame="100".

step6.xml

<!-- TODO: Add Custom attributes here -->
<KeyAttribute
       motion:framePosition="0"
       motion:motionTarget="@id/moon">
   <CustomAttribute
           motion:attributeName="colorFilter"
           motion:customColorValue="#FFFFFF"
   />
</KeyAttribute>
<KeyAttribute
       motion:framePosition="50"
       motion:motionTarget="@id/moon">
   <CustomAttribute
           motion:attributeName="colorFilter"
           motion:customColorValue="#FFB612"
   />
</KeyAttribute>
<KeyAttribute
       motion:framePosition="100"
       motion:motionTarget="@id/moon">
   <CustomAttribute
           motion:attributeName="colorFilter"
           motion:customColorValue="#FFFFFF"
   />
</KeyAttribute>

You add a CustomAttribute inside a KeyAttribute . The CustomAttribute will be applied at the framePosition specified by the KeyAttribute .

Inside the CustomAttribute you must specify an attributeName and one value to set.

motion:attributeName is the name of the setter that will be called by this custom attribute. In this example setColorFilter on Drawable will be called.
motion:custom*Value is a custom value of the type noted in the name, in this example the custom value is a color specified.

Custom values can have any of the following types:

রঙ
Integer
ভাসা
স্ট্রিং
মাত্রা
Boolean

Using this API, MotionLayout can animate anything that provides a setter on any view.

Try it out

Run the app again and go to Step 6 to see the animation in action. When you click on the moon, it'll follow the path from start to end, going through each KeyAttribute that was specified in the KeyFrameSet .

When you add more KeyFrames , MotionLayout changes the path of the moon from a straight line to a complex curve, adding a double backflip, resize, and a color change midway through the animation.

In real animations, you'll often animate several views at the same time controlling their motion along different paths and speeds. By specifying a different KeyFrame for each view, it's possible to choreograph rich animations that animate multiple views with MotionLayout .

10. Drag events and complex paths

In this step you'll explore using OnSwipe with complex paths. So far, the animation of the moon has been triggered by an OnClick listener and runs for a fixed duration.

Controlling animations that have complex paths using OnSwipe , like the moon animation you've built in the last few steps, requires understanding how OnSwipe works.

Step 1: Explore OnSwipe behavior

Open xml/step7.xml and find the existing OnSwipe declaration.

step7.xml

<!-- Fix OnSwipe by changing touchAnchorSide →

<OnSwipe
       motion:touchAnchorId="@id/moon"
       motion:touchAnchorSide="bottom"
/>

Run the app on your device and go to Step 7 . See if you can produce a smooth animation by dragging the moon along the path of the arc.

When you run this animation, it doesn't look very good. After the moon reaches the top of the arc, it starts jumping around.

To understand the bug, consider what happens when the user is touching just below the top of the arc. Because the OnSwipe tag has an motion:touchAnchorSide="bottom" MotionLayout will try to make the distance between the finger and the bottom of the view constant throughout the animation.

But, since the bottom of the moon doesn't always go in the same direction, it goes up then comes back down, MotionLayout doesn't know what to do when the user has just passed the top of the arc. To consider this, since you're tracking the bottom of the moon, where should it be placed when the user is touching here?

Step 2: Use the right side

To avoid bugs like this, it is important to always choose a touchAnchorId and touchAnchorSide that always progresses in one direction throughout the duration of the entire animation.

In this animation, both the right side and the left side of the moon will progress across the screen in one direction.

However, both the bottom and the top will reverse direction. When OnSwipe attempts to track them, it will get confused when their direction changes.

To make this animation follow touch events, change the touchAnchorSide to right .

step7.xml

<!-- Fix OnSwipe by changing touchAnchorSide →

<OnSwipe
       motion:touchAnchorId="@id/moon"
       motion:touchAnchorSide="right"
/>

Step 3: Use dragDirection

You can also combine dragDirection with touchAnchorSide to make a side track a different direction than it normally would. It's still important that the touchAnchorSide only progresses in one direction, but you can tell MotionLayout which direction to track. For example, you can keep the touchAnchorSide="bottom" , but add dragDirection="dragRight" . This will cause MotionLayout to track the position of the bottom of the view, but only consider its location when moving right (it ignores vertical motion). So, even though the bottom goes up and down, it will still animate correctly with OnSwipe .

Update OnSwipe to track the moon's motion correctly.

step7.xml

<!-- Using dragDirection to control the direction of drag tracking →

<OnSwipe
       motion:touchAnchorId="@id/moon"
       motion:touchAnchorSide="bottom"
       motion:dragDirection="dragRight"
/>

Try it out

Run the app again and try dragging the moon through the entire path. Even though it follows a complex arc, MotionLayout will be able to progress the animation in response to swipe events.

11. Running motion with code

MotionLayout can be used to build rich animations when used with CoordinatorLayout . In this step, you'll build a collapsible header using MotionLayout .

Step 1: Explore the existing code

To get started, open layout/activity_step8.xml .
In layout/activity_step8.xml , you see that a working CoordinatorLayout and AppBarLayout is already built.

activity_step8.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout
       ...>
   <com.google.android.material.appbar.AppBarLayout
           android:id="@+id/appbar_layout"
           android:layout_width="match_parent"
           android:layout_height="180dp">
       <androidx.constraintlayout.motion.widget.MotionLayout
               android:id="@+id/motion_layout"
               ... >
           ...
       </androidx.constraintlayout.motion.widget.MotionLayout>
   </com.google.android.material.appbar.AppBarLayout>
  
   <androidx.core.widget.NestedScrollView
           ...
           motion:layout_behavior="@string/appbar_scrolling_view_behavior" >
           ...
   </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

This layout uses a CoordinatorLayout to share scrolling information between the NestedScrollView and the AppBarLayout . So, when the NestedScrollView scrolls up, it will tell the AppBarLayout about the change. That's how you implement a collapsing toolbar like this on Android—the scrolling of the text will be "coordinated" with the collapsing header.

The motion scene that @id/motion_layout points to is similar to the motion scene in the last step. However, the OnSwipe declaration was removed to enable it to work with CoordinatorLayout .

Run the app and go to Step 8 . You see that when you scroll the text, the moon does not move.

Step 2: Make the MotionLayout scroll

To make the MotionLayout view scroll as soon as the NestedScrollView scrolls, add motion:minHeight and motion:layout_scrollFlags to the MotionLayout .

activity_step8.xml

<!-- Add minHeight and layout_scrollFlags to the MotionLayout -->

<androidx.constraintlayout.motion.widget.MotionLayout
       android:id="@+id/motion_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       motion:layoutDescription="@xml/step8"
       motion:motionDebug="SHOW_PATH"
       android:minHeight="80dp"
       motion:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed"  >

Run the app again and go to Step 8 . You see that the MotionLayout collapses as you scroll up. However, the animation does not progress based on the scroll behavior yet.

Step 3: Move the motion with code

Open Step8Activity.kt . Edit the coordinateMotion() function to tell MotionLayout about the changes in scroll position.

Step8Activity.kt

// TODO: set progress of MotionLayout based on an AppBarLayout.OnOffsetChangedListener

private fun coordinateMotion() {
    val appBarLayout: AppBarLayout = findViewById(R.id.appbar_layout)
    val motionLayout: MotionLayout = findViewById(R.id.motion_layout)

    val listener = AppBarLayout.OnOffsetChangedListener { unused, verticalOffset ->
        val seekPosition = -verticalOffset / appBarLayout.totalScrollRange.toFloat()
        motionLayout.progress = seekPosition
    }

    appBarLayout.addOnOffsetChangedListener(listener)
}

This code will register a OnOffsetChangedListener that will be called every time the user scrolls with the current scroll offset.

MotionLayout supports seeking its transition by setting the progress property. To convert between a verticalOffset and a percentage progress, divide by the total scroll range.

Try it out

Deploy the app again and run the Step 8 animation. You see that MotionLayout will progress the animation based on the scroll position.

It's possible to build custom dynamic collapsing toolbar animations using MotionLayout . By using a sequence of KeyFrames you can achieve very bold effects.

১২. অভিনন্দন

This codelab covered the basic API of MotionLayout .

To see more examples of MotionLayout in practice, check out the official sample . And be sure to check out the documentation !

আরও জানুন

MotionLayout supports even more features not covered in this codelab, like KeyCycle, which lets you control paths or attributes with repeating cycles, and KeyTimeCycle, which lets you animate based on clock time. Check out the samples for examples of each.

For links to other codelabs in this course, see the Advanced Android in Kotlin codelabs landing page .

Kotlin 03.2-এ উন্নত Android: MotionLayout সহ অ্যানিমেশন

১. শুরু করার আগে

পূর্বশর্ত

তুমি কি করবে

তোমার যা লাগবে

2. শুরু করা

৩. MotionLayout ব্যবহার করে অ্যানিমেশন তৈরি করা

ধাপ ১: বিদ্যমান কোডটি অন্বেষণ করুন

কার্যকলাপ_পদক্ষেপ১.এক্সএমএল

ধাপ ২: মোশন লেআউটে রূপান্তর করুন

কার্যকলাপ_পদক্ষেপ১**.xml**

ধাপ ৩: শুরু এবং শেষের সীমাবদ্ধতা নির্ধারণ করুন

কার্যকলাপ_পদক্ষেপ1_দৃশ্য.xml

কার্যকলাপ_পদক্ষেপ_১_দৃশ্য.xml

ধাপ ৪: একটি রূপান্তর সংজ্ঞায়িত করুন

কার্যকলাপ_পদক্ষেপ1_দৃশ্য.xml

ধাপ ৫: মোশন এডিটরে অ্যানিমেশনের প্রিভিউ দেখুন

ধাপ ৬: একটি অন-ক্লিক হ্যান্ডলার যোগ করুন

কার্যকলাপ_পদক্ষেপ1_দৃশ্য.xml

ধাপ ৫: অ্যানিমেশনগুলি কার্যকরভাবে

৪. ড্র্যাগ ইভেন্টের উপর ভিত্তি করে অ্যানিমেটিং

ধাপ ১: প্রাথমিক কোডটি পরীক্ষা করুন

কার্যকলাপ_পদক্ষেপ২.এক্সএমএল

ধাপ ২: দৃশ্যটি অ্যানিমেট করুন

শুরুর সীমাবদ্ধতা সেট সংজ্ঞায়িত করুন

ধাপ২.xml

শেষ সীমাবদ্ধতা সেট সংজ্ঞায়িত করুন

ধাপ২.xml

ব্যবহারকারীর সোয়াইপের উপর ভিত্তি করে অ্যানিমেটিং

ধাপ২.xml

চেষ্টা করে দেখো

৫. একটি পথ পরিবর্তন করা

ধাপ ১: বিদ্যমান কোডটি অন্বেষণ করুন

ধাপ ২: পাথ ডিবাগিং সক্ষম করুন

কার্যকলাপ_পদক্ষেপ৩.এক্সএমএল

ধাপ ৩: একটি পথ পরিবর্তন করুন

ধাপ ৩.xml

চেষ্টা করে দেখো

৬. কীপজিশন টাইপ বোঝা

স্থানাঙ্ক ব্যবস্থা কী?

প্যারেন্ট-রিলেটিভ স্থানাঙ্ক

ডেল্টা-রিলেটিভ স্থানাঙ্ক

আপেক্ষিক স্থানাঙ্ক

7. Building complex paths

Modify a path with multiple KeyPosition elements

step4.xml

Try it out

Explore on your own

step4.xml

8. Changing attributes during motion

Step 1: Resize and rotate with KeyAttribute

step5.xml

Step 2: Delay the appearance of credits

step5.xml

Try it out

Explore on your own

9. Changing custom attributes

Define custom attributes

step6.xml

Try it out

10. Drag events and complex paths

Step 1: Explore OnSwipe behavior

step7.xml

Step 2: Use the right side

step7.xml

Step 3: Use dragDirection

step7.xml

Try it out

11. Running motion with code

Step 1: Explore the existing code

activity_step8.xml

Step 2: Make the MotionLayout scroll

activity_step8.xml

Step 3: Move the motion with code

Step8Activity.kt

Try it out

১২. অভিনন্দন

আরও জানুন

কার্যকলাপ_পদক্ষেপ১.xml