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

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

‫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 לשנייה לפי פיקסלים לשנייה במאמר Spring Animation.

כדי להגדיר את המהירות, קוראים לשיטה 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 פיקסלים.