מבוא לאנימציות

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

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

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

כדי להבין טוב יותר מתי כדאי להשתמש באנימציות, כדאי לעיין גם במדריך של Material Design בנושא תנועה.

אנימציה של מפות סיביות

איור 1. פריט גרפי שניתן לשרטוט עם אנימציה.

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

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

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

הנפשה של הרשאות הגישה והתנועה בממשק המשתמש

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

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

כדי להעביר, לחשוף או להסתיר תצוגות בתוך הפריסה הנוכחית, אפשר להשתמש במערכת האנימציה של המאפיינים שמספקת החבילה android.animation, שזמינה ב-Android 3.0 (רמת API 11) ואילך. ממשקי ה-API האלה מעדכנים את המאפיינים של אובייקטי View לאורך זמן, ומציירים מחדש את התצוגה באופן רציף כשהמאפיינים משתנים. לדוגמה, כשמשנים את מאפייני המיקום, התצוגה זזה במסך. כשמחליפים את מאפיין האלפא, התצוגה מתעמעמת או נבדלת.

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

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

תנועה מבוססת-פיזיקה

איור 3. אנימציה שנוצרה באמצעות ObjectAnimator.

איור 4. אנימציה שנוצרה באמצעות ממשקי API מבוססי-פיזיקה.

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

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

שתי אנימציות נפוצות המבוססות על פיזיקה:

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

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

אנימציה של שינויי פריסה

איור 5. כדי להציג אנימציה עם פרטים נוספים, אפשר לשנות את הפריסה או להתחיל פעילות חדשה.

ב-Android 4.4 ואילך (API ברמה 19 ואילך), אפשר להשתמש במסגרת המעבר כדי ליצור אנימציות כשמחליפים את הפריסה בתוך הפעילות או הפלח הנוכחיים. כל מה שצריך לעשות הוא לציין את הפריסה של ההתחלה והסיום ואת סוג האנימציה שבה רוצים להשתמש. לאחר מכן המערכת מחשבת ומפעילה אנימציה בין שני הפריסות. אפשר להשתמש באפשרות הזו כדי להחליף את כל ממשק המשתמש, או כדי להעביר או להחליף רק חלק מהתצוגות.

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

פריסת ההתחלה והסיום נשמרות כל אחת ב-Scene, אבל סצנת ההתחלה נקבעת בדרך כלל באופן אוטומטי מהפריסה הנוכחית. יוצרים את Transition כדי להודיע למערכת איזה סוג אנימציה רוצים, ואז קוראים ל-TransitionManager.go() והמערכת מפעילה את האנימציה כדי להחליף את הפריסות.

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

אנימציה בין פעילויות

במכשירים עם Android מגרסה 5.0 (רמת API‏ 21) ואילך, אפשר גם ליצור אנימציות שמציגות את המעבר בין הפעילויות. האפשרות הזו מבוססת על אותה מסגרת של מעברים שמתוארת בקטע הקודם, אבל היא מאפשרת ליצור אנימציות בין פריסות בפעילויות נפרדות.

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

כרגיל, קוראים ל-startActivity(), אבל מעבירים לה חבילה של אפשרויות שמספקת ActivityOptions.makeSceneTransitionAnimation(). חבילת האפשרויות הזו עשויה לכלול את התצוגות ששותפו בין הפעילויות, כדי שמערכת המעבר תוכל לחבר אותן במהלך האנימציה.

מקורות מידע נוספים: