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

כדאי לנסות את התכונה 'כתיבה מהירה'
Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך משתמשים באנימציות ב-Compose
אנימציות ב-Compose →

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

תנועה בסיסית

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

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

מאפיין מותאם אישית – backgroundColor

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

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

ImageFilterView – מעבר בין תמונות

בדוגמה הזו מוסבר איך מעבירים את ערך הרוויה של ImageFilterView.

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

מיקום של תמונה מפתח (keyframe)

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

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

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

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

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

מחזור של תמונות מפתח (keyframe)

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

איור 6. גוררים תצוגה בתנועה גלית תוך שינוי הצבע שלה.

CoordinatorLayout‏ (1/2)

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

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

CoordinatorLayout‏ (2/2)

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

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

DrawerLayout‏ (1/2)

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

איור 9. הרחבת 'DrawerLayout'.

DrawerLayout‏ (2 מתוך 2)

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

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

חלונית צדדית

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

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

פרלקס (Parallax)

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

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

ViewPager

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

איור 13. אפקט Parallax בתמונת הכותרת בזמן החלקה על 'ViewPager'.

ViewPager – Lottie

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

איור 14. תמונה שמציגה אפקט Lottie בתמונת הכותרת בזמן החלקה על ViewPager.

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

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

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

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

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

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

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

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

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

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

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

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

מעבר מקטע (2 מתוך 2)

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

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

תנועה כמו ב-YouTube

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

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

KeyTrigger

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

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

בכמה מדינות

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

איור 22. תנועות שונות בהתאם למצב.