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

כדאי לנסות את הכתיבה

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

Spring AnimationSpec →

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

כדי לקבל מידע על נושאים קשורים, כדאי לעיין במדריכים הבאים:

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

הוספת ספריית AndroidX

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

1. פותחים את הקובץ build.gradle של מודול האפליקציה.
2. מוסיפים את ספריית AndroidX לקטע dependencies.

   Groovy

           dependencies {
               implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'
           }
           

   Kotlin

           dependencies {
               implementation("androidx.dynamicanimation:dynamicanimation:1.0.0")
           }
           

יצירת אנימציה של הטלה

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

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);

הגדרת מהירות

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

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

כדי להגדיר את המהירות, קוראים ל-method‏ setStartVelocity() ומעבירים את המהירות בפיקסלים לשנייה. השיטה מחזירה את אובייקט ההטלה שעליו מוגדרת המהירות.

הערה: כדי לאחזר ולחשב את המהירות של תנועות מגע, משתמשים במחלקות GestureDetector.OnGestureListener ו-VelocityTracker בהתאמה.

הגדרת טווח ערכים של אנימציה

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

הערה: כשהערך של אנימציית הטלה מגיע לערך המינימלי או המקסימלי, האנימציה מסתיימת.

כדי להגדיר את הערכים המינימליים והמקסימליים, קוראים לשיטות setMinValue() ו-setMaxValue(), בהתאמה. שתי השיטות מחזירות את אובייקט ההנפשה שהערך שלו הוגדר.

הגדרת חיכוך

השיטה setFriction() מאפשרת לשנות את החיכוך של האנימציה. הוא מגדיר את קצב הירידה של המהירות באנימציה.

הערה: אם לא מגדירים את החיכוך בתחילת האנימציה, האנימציה משתמשת בערך ברירת מחדל של חיכוך שהוא 1.

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

קוד לדוגמה

בדוגמה הבאה אפשר לראות תנועת החלקה אופקית. המהירות שמתקבלת ממעקב המהירות היא velocityX, והגבולות של הגלילה מוגדרים ל-0 ול-maxScroll. החיכוך מוגדר ל-1.1.

FlingAnimation(view, DynamicAnimation.SCROLL_X).apply {
    setStartVelocity(-velocityX)
    setMinValue(0f)
    setMaxValue(maxScroll)
    friction = 1.1f
    start()
}

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
fling.setStartVelocity(-velocityX)
        .setMinValue(0)
        .setMaxValue(maxScroll)
        .setFriction(1.1f)
        .start();

הגדרת השינוי המינימלי שיהיה גלוי

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

אין צורך להפעיל את השיטה הזו כשמנפישים את DynamicAnimation.ViewProperty כי השינוי המינימלי שניתן לראות נגזר מהמאפיין. לדוגמה:

• ערך השינוי המינימלי שמוגדר כברירת מחדל הוא פיקסל אחד למאפייני תצוגה כמו TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCROLL_X ו-SCROLL_Y.
• באנימציות שמשתמשות בסיבוב, כמו ROTATION,‏ ROTATION_X ו-ROTATION_Y, השינוי המינימלי שניתן לראות הוא MIN_VISIBLE_CHANGE_ROTATION_DEGREES, או 1/10 פיקסל.
• באנימציות שמשתמשות באטימות, השינוי המינימלי שניתן לראות הוא MIN_VISIBLE_CHANGE_ALPHA, או 1/256.

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

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

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

חישוב ערך מינימלי של שינוי שניתן לראות

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

השינוי הנראה המינימלי = טווח הערכים של המאפיין המותאם אישית / טווח האנימציה בפיקסלים

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