יצירת אנימציה באמצעות הכלי לעריכת תנועה

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

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

כדי להתחיל לעבוד עם הכלי לעריכת תנועה:

  1. יצירת ConstraintLayout.
  2. לוחצים לחיצה ימנית על התצוגה המקדימה בכלי לעריכת פריסות.
  3. לוחצים על Convert to MotionLayout (המרת הפריסה ל-MotionLayout), כמו שמוצג למטה.

אחרי ש-Android Studio ממיר את ConstraintLayout ל-MotionLayout, נוסף גם קובץ MotionScene (קובץ .xml עם _scene שנוספה לשם קובץ הפריסה) לספרייה שמכילה את קובץ ה-XML.

הפריסה MotionLayout הופכת לפריסת הבסיס ומופיעה בממשק המשתמש של כלי העריכה של תנועה. הפריסה כבר כוללת התחלה ConstraintSet, סיום ConstraintSet ומעבר מההתחלה לסיום.

אפשר להשתמש בתרשים הסקירה הכללית כדי לבחור ConstraintSet או Transition ולבחור רכיבים בחלונית הבחירה.

אחר כך תוכלו לערוך את האילוצים והמאפיינים של נקודת ההתחלה או הסיום ConstraintSet באותו אופן שבו עורכים ConstraintLayout.

אם רוצים להוסיף עוד רכיבים לתרשים, אפשר להשתמש בסמלי היצירה כדי להוסיף במהירות ConstraintSet, Transition או OnClick/OnSwipe באמצעות תנועות.

כדי להוסיף מסגרת מפתח, קודם לוחצים על החץ מעבר:

לאחר מכן, בחלונית ציר הזמן מעבר, לוחצים על הפינה השמאלית העליונה ובוחרים באפשרות מיקום מרכזי:

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

אפשר גם להוסיף רכיבי handler של OnClick ושל OnSwipe למעבר בחלונית המאפיינים.

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

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