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

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

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

תנועה בסיסית

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

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

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

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

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

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

בדוגמה הזו מוצג מעבר של ערך הרוויה של ImageFilterView.

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

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

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

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

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

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

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

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

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

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

CoordinatorLayout (1/2)

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

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

CoordinatorLayout (2/2)

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

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

‫DrawerLayout (1/2)

בדוגמה הזו אפשר לראות איך מוסיפים תנועה ל-DrawerLayout. הדוגמה הזו מתוארת בפירוט במאמר Introduction to MotionLayout (part III).

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

‫DrawerLayout (2/2)

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

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

חלונית צדדית

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

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

פרלקס (Parallax)

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

איור 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. מעבר בין מקטעים.

תנועה כמו ב-YouTube

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

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

KeyTrigger

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

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

בכמה מדינות

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

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