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

רוצה לנסות את שיטת הכתיבה?

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

מפרט האנימציה לאביב ←

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

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

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

הוספה של ספריית 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 לשנייה לפיקסלים לשנייה ב- אנימציה לאביב.

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

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

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

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

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

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

הגדרת חיכוך

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

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

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

קוד לדוגמה

הדוגמה הבאה ממחישה תנועה אופקית. המהירות שנמדדה מעקב המהירות הוא 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 עד 0 100. הדבר תואם לשינוי של 200 פיקסלים. לפי הנוסחה, ערך המינימום ערך השינוי הגלוי הוא 100 / 200 שווה ל-0.5 פיקסלים.