نمونه‌های MotionLayout

امتحان کردن روش Compose

Jetpack Compose جعبه‌ابزار واسط کاربر توصیه‌شده برای Android است. با نحوه استفاده از پویانمایی‌ها در Compose آشنا شوید.

پویانمایی‌ها در Compose →

این سند حاوی نمونه‌هایی از نحوه استفاده از MotionLayout است. هر مثال شامل ویدیویی است که حرکت را نشان می‌دهد، به‌همراه کد مربوطه برای صحنه حرکت و چیدمان‌ها.

حرکت پایه

این نمونه حاوی یک نمای تکی است که می‌توانید آن را لمس کنید و بکشید تا به‌صورت افقی حرکت کند.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱. کشیدن نما.

مشخصه سفارشی - backgroundColor

این مثال شبیه مثال حرکت پایه است. علاوه‌بر حرکت پایه، رنگ پس‌زمینه نما با حرکت نما تغییر می‌کند.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۲. کشیدن نما درحالی‌که رنگ پس‌زمینه آن تغییر می‌کند.

ImageFilterView - image transition

این مثال نشان می‌دهد که چگونه می‌توان مقدار اشباع یک ImageFilterView را تغییر داد.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۳. کشیدن تصویر درحالی‌که اشباع آن تغییر می‌کند.

موقعیت قاب کلیدی

این مثال از <KeyFrameSet> برای تغییر موقعیت Y نما درطول حرکت استفاده می‌کند.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۴. کشیدن نما و تغییر دادن موقعیت Y آن.

درون‌یابی قاب کلیدی

این مثال براساس مثال موقعیت فریم کلیدی ساخته شده است، و چرخش و مقیاس‌بندی را به انتقال نما اضافه می‌کند.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۵. کشیدن نما و تغییر دادن موقعیت Y، چرخش، و مقیاس آن.

چرخه قاب کلیدی

این مثال <KeyCycle> عنصر اضافه می‌کند تا حرکت موج‌مانند به نما اضافه کند.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۶. کشیدن نما با حرکتی موج‌مانند درحالی‌که رنگ آن تغییر می‌کند.

CoordinatorLayout (۱/۲)

این مثال MotionLayout را به AppBarLayout موجود اضافه می‌کند تا به نوار برنامه حرکت اضافه کند. این مثال در مقدمه‌ای بر MotionLayout (بخش سوم) بیشتر توضیح داده شده است.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۷. پیمایش محتوا درحین گسترش نوار برنامه.

CoordinatorLayout (۲/۲)

این مثال MotionLayout را به AppBarLayout موجود اضافه می‌کند تا به نوار برنامه حرکت اضافه کند.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۸. پیمایش محتوا درحالی‌که نوار برنامه گسترش می‌یابد و نوشتار در نوار برنامه پویانمایی می‌شود و از آن خارج می‌شود.

DrawerLayout (۱/۲)

این مثال نشان می‌دهد که چگونه می‌توان به DrawerLayout حرکت اضافه کرد. این مثال در مقدمه‌ای بر MotionLayout (بخش سوم) بیشتر توضیح داده شده است.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۹. در حال گسترش `DrawerLayout`.

DrawerLayout (۲/۲)

این مثال نشان می‌دهد که چگونه می‌توان به DrawerLayout حرکت اضافه کرد.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را برای محتوای اصلی مشاهده کنید.
• MotionScene XML را برای منو مشاهده کنید.

شکل ۱۰. ازهم باز کردن `DrawerLayout` با نوشتار منوی پویانمایی‌شده.

پانل کناری

این مثال نشان می‌دهد که چگونه می‌توان پانل کناری را هنگام کشیدن ناحیه محتوای اصلی به سمت راست نمایش داد.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱۱. نمایش پانل کناری با کشیدن محتوای اصلی.

اختلاف منظر

این مثال پس‌زمینه اختلاف منظر را نشان می‌دهد که در آن لایه‌های مختلف پس‌زمینه با سرعت‌های مختلف حرکت می‌کنند.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱۲. جلوه اختلاف منظر در تصویر سرایند.

ViewPager

این مثال نشان می‌دهد که چگونه می‌توانید هنگام تند کشیدن بین ViewPager برگه، حرکت اضافه کنید. این مثال در مقدمه‌ای بر MotionLayout (بخش سوم) بیشتر توضیح داده شده است.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱۳. جلوه اختلاف منظر در تصویر سرایند هنگام تند کشیدن `ViewPager`.

ViewPager - Lottie

این مثال نشان می‌دهد که چگونه می‌توانید هنگام تند کشیدن بین ViewPager برگه، حرکت اضافه کنید.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱۴. تصویری که جلوه Lottie را در تصویر سرایند هنگام تند کشیدن `ViewPager` نشان می‌دهد.

حرکت پیچیده (۱/۳)

این مثال عناصر مثال‌های قبلی را ترکیب می‌کند تا حرکت پیچیده را نشان دهد.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱۵. ترکیب کردن جلوه‌ها برای ایجاد حرکت پیچیده.

حرکت پیچیده (۲/۳)

این مثال عناصر مثال‌های قبلی را ترکیب می‌کند تا حرکت پیچیده را نشان دهد.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱۶. ترکیب کردن جلوه‌ها برای ایجاد حرکت پیچیده.

حرکت پیچیده (۳/۳)

این مثال عناصر مثال‌های قبلی را ترکیب می‌کند تا حرکت پیچیده را نشان دهد.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱۷. ترکیب کردن جلوه‌ها برای ایجاد حرکت پیچیده.

گذار بخش (۱/۲)

این مثال نشان می‌دهد که چگونه می‌توانید از MotionLayout برای انتقال بین تکه‌ها استفاده کنید.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱۸. گذار قطعه.

گذار بخش‌بندی (۲/۲)

این مثال نشان می‌دهد که چگونه می‌توانید از MotionLayout برای انتقال بین تکه‌ها استفاده کنید.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۱۹. انتقال بخش.

حرکت شبیه YouTube

این مثال انتقال بین نمای فشرده و تجربه تمام‌صفحه با محتوای اضافی را نشان می‌دهد.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۲۰. انتقال قطعات مشابه YouTube.

KeyTrigger

این مثال نشان می‌دهد که چگونه می‌توان دکمه کنش شناور را وقتی که انتقال از آستانه پیشرفت عبور می‌کند، نشان داد و پنهان کرد.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۲۱. نمایش و پنهان کردن دکمه کنش شناور.

چندایالتی

این مثال نشان می‌دهد که چگونه از حالت برای تعیین اینکه کدام حرکت اعمال شود استفاده کنید.

• XML چیدمان را مشاهده کنید.
• MotionScene XML را مشاهده کنید.

شکل ۲۲. حرکات مختلف براساس وضعیت.