דוגמאות לפריסת תנועה

במסמך הזה מפורטות דוגמאות לשימוש MotionLayout כל דוגמה כוללת סרטון שמדגים את התנועה, יחד עם לסצנה ולפריסות של התנועה.

תנועה בסיסית

בדוגמה הזו יש תצוגה אחת שאפשר לגעת בה ולגרור כדי להזיז אותה לרוחב.

איור 1. גרירת תצוגה.

מאפיין מותאם אישית – רקע בצבע

הדוגמה הזו דומה לדוגמה לתנועה בסיסית. נוסף ל- התנועה הבסיסית, צבע הרקע של התצוגה משתנה ככל שהתצוגה זזה.

איור 2. גרירת תצוגה בזמן שינויים בצבע הרקע.

ImageFilterView - מעבר תמונה

דוגמה זו מראה כיצד להעביר את ערך הרוויה של ImageFilterView

איור 3. גרירת תמונה בזמן שינויים ברוויה.

מיקום תמונות המפתח

בדוגמה זו נעשה שימוש ב-<KeyFrameSet> כדי לשנות את מיקום ה-Y של התצוגה במהלך תנועה.

איור 4. גרירת תצוגה ושינוי שלה מיקום ה-Y.

אינטרפולציה של תמונות מפתח

הדוגמה הזו מבוססת על הדוגמה מיקום תמונת מפתח, הוספת סיבוב והגדלה של התצוגה למעבר התצוגה.

איור 5. גרירת תצוגה ושינוי שלה המיקום, הסיבוב וקנה המידה של ה-Y.

מחזור תמונות מפתח

בדוגמה הזו מתווספים רכיבי <KeyCycle> כדי להוסיף לתצוגה תנועה דמוית גל.

איור 6. גרירת תצוגה בצורת גל את התנועה בזמן שהיא משנה את הצבע שלה.

פריסת Coordinator (1/2)

הדוגמה הזו מוסיפה MotionLayout ל-AppBarLayout קיים כדי להוסיף תנועה לסרגל האפליקציה. הדוגמה הזאת מתוארת בפירוט מבוא לפריסת תנועה (חלק III).

איור 7. גלילה בתוכן בזמן האפליקציה העמודה מתרחבת.

פריסת Coordinator (2/2)

הדוגמה הזו מוסיפה MotionLayout ל-AppBarLayout קיים כדי להוסיף תנועה לסרגל האפליקציה.

איור 8. גלילה בתוכן בזמן האפליקציה הסרגל מתרחב וטקסט שמכיל אנימציה בתוך סרגל האפליקציה ומחוצה לו.

פריסת מגירות (1/2)

הדוגמה הזו מראה איך להוסיף תנועה ל-DrawerLayout. הדוגמה הזאת היא שמתוארים בפירוט מבוא לפריסת תנועה (חלק III).

איור 9. הרחבה של 'DrawerLayout'.

פריסת מגירות (2/2)

הדוגמה הזו מראה איך להוסיף תנועה ל-DrawerLayout.

איור 10. הרחבת 'DrawerLayout' באמצעות טקסט מונפש של התפריט.

חלונית צדדית

בדוגמה הזו מוסבר איך להציג חלונית צדדית כשגוררים את התוכן הראשי. האזור מימין.

איור 11. הצגת חלונית צדדית באמצעות גרירה את התוכן העיקרי.

פרלקס

הדוגמה הזו ממחישה את הרקע פרלקס, שבו יש רקע שונה השכבות נעות במהירויות שונות.

איור 12. אפקט פרלקס בכותרת תמונה.

ViewPager

בדוגמה הזו אפשר לראות איך אפשר להוסיף תנועה בהחלקה בין כרטיסיות של ViewPager. הדוגמה הזאת מתוארת בפירוט מבוא לפריסת תנועה (חלק III).

איור 13. אפקט פרלקס בכותרת תוך כדי החלקה של 'ViewPager'.

ViewPager - Lottie

בדוגמה הזו אפשר לראות איך אפשר להוסיף תנועה בהחלקה בין כרטיסיות של ViewPager.

איור 14. תמונה שמוצג בה אפקט של לוטי בתמונת הכותרת תוך כדי החלקה ב-'ViewPager'.

תנועה מורכבת (1/3)

בדוגמה הזו משלבים אלמנטים מהדוגמאות הקודמות כדי להדגים תנועה.

איור 15. משלבים אפקטים כדי ליצור תנועה מורכבת.

תנועה מורכבת (2/3)

בדוגמה הזו משלבים אלמנטים מהדוגמאות הקודמות כדי להדגים תנועה.

איור 16. משלבים אפקטים כדי ליצור תנועה מורכבת.

תנועה מורכבת (3/3)

בדוגמה הזו משלבים אלמנטים מהדוגמאות הקודמות כדי להדגים תנועה.

איור 17. משלבים אפקטים כדי ליצור תנועה מורכבת.

מעבר בין מקטעים (1/2)

הדוגמה הזו ממחישה איך אפשר להשתמש ב-MotionLayout כדי לעבור בין של קטעים שונים.

איור 18. מעבר מקטע.

מעבר בין מקטעים (2/2)

הדוגמה הזו ממחישה איך אפשר להשתמש ב-MotionLayout כדי לעבור בין של קטעים שונים.

איור 19. מעבר מקטע.

תנועה כמו ב-YouTube

הדוגמה הזו ממחישה מעבר בין תצוגה קומפקטית למסך מלא ויש לו תוכן נוסף.

איור 20. מעבר מקטעים דומה ל- YouTube.

טריגר מרכזי

הדוגמה הזו ממחישה איך להציג ולהסתיר לחצן פעולה צף כאשר המעבר חוצה סף התקדמות.

איור 21. הצגה והסתרה של פעולה צפה לחצן.

מספר מדינות

בדוגמה הזו אפשר לראות איך להשתמש במצב כדי לקבוע איזו תנועה להחיל.

איור 22. תנועות שונות על סמך מצב.