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

אנסה לכתוב

‫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.

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