יצירת אנימציה עם Motion Editor

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

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

כדי להתחיל לעבוד עם Motion Editor:

  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 באמצעות תנועות.

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

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

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

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

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

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