نمونه های MotionLayout

روش نوشتن را امتحان کنید
Jetpack Compose ابزار رابط کاربری پیشنهادی برای اندروید است. یاد بگیرید که چگونه از انیمیشن‌ها در Compose استفاده کنید.
انیمیشن‌ها در نوشتن →

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

حرکت پایه

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

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

ویژگی سفارشی - backgroundColor

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

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

ImageFilterView - انتقال تصویر

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

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

موقعیت فریم کلیدی

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

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

درون‌یابی فریم کلیدی

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

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

چرخه فریم کلیدی

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

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

طرح هماهنگ کننده (1/2)

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

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

طرح هماهنگ کننده (۲/۲)

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

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

طرح‌بندی کشو (1/2)

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

شکل ۹. بسط دادن `DrawerLayout`.

طرح‌بندی کشو (۲/۲)

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

شکل ۱۰. گسترش `DrawerLayout` با متن منوی متحرک.

پنل کناری

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

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

اختلاف منظر

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

شکل ۱۲. اثر اختلاف منظر در تصویر سربرگ.

ویو پیجر

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

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

ویو پیجر - لوتی

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

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

حرکت مختلط (۱/۳)

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

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

حرکت مختلط (۲/۳)

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

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

حرکت مختلط (۳/۳)

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

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

انتقال قطعه (1/2)

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

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

انتقال قطعه (2/2)

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

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

حرکت شبیه یوتیوب

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

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

کلید راه‌انداز

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

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

چند حالته

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

شکل ۲۲. حرکات مختلف بر اساس حالت.