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

אפשר לנסות את הדרך של כתיבת הודעה

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

Spring AnimationSpec →

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

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

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

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

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

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

   מגניב

           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.

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