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

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

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

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

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

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

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

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

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

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

אנימציה של הניראות והתנועה של ממשק המשתמש

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

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

כדי להזיז, לחשוף או להסתיר תצוגות בפריסה הנוכחית, אפשר להשתמש מערכת האנימציה של הנכס מסופקת על ידי חבילת 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() והמערכת מפעילה את האנימציה כדי להחליף את הפריסות.

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

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

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

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

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

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