نمونه های MotionLayout

روش Compose را امتحان کنید
Jetpack Compose جعبه ابزار UI توصیه شده برای اندروید است. با نحوه استفاده از انیمیشن ها در Compose آشنا شوید.
انیمیشن ها در نوشتن →

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

حرکت اساسی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CoordinatorLayout (1/2)

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

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

CoordinatorLayout (2/2)

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

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

DrawerLayout (1/2)

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

شکل 9. گسترش "DrawerLayout".

DrawerLayout (2/2)

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

شکل 10. گسترش «DrawerLayout» با متن منوی متحرک.

پانل جانبی

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

شکل 11. نمایش یک پانل جانبی با کشیدن محتوای اصلی.

اختلاف منظر

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

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

ViewPager

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

شکل 13. جلوه اختلاف منظر در تصویر هدر هنگام کشیدن «ViewPager».

ViewPager - Lottie

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

شکل 14. تصویری که جلوه Lottie را در تصویر هدر نشان می دهد در حالی که یک «ViewPager» را بکشید.

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

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

شکل 15. ترکیب افکت ها برای ایجاد حرکت پیچیده.

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

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

شکل 16. ترکیب افکت ها برای ایجاد حرکت پیچیده.

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

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

شکل 17. ترکیب افکت ها برای ایجاد حرکت پیچیده.

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

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

شکل 18. انتقال قطعه.

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

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

شکل 19. انتقال قطعه.

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

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

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

کلید تریگر

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

شکل 21. نمایش و پنهان کردن یک دکمه عمل شناور.

چند حالته

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

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