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

כדאי לנסות את התכונה 'כתיבה מהירה'

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

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 אפשר ליצור אנימציית fling לאובייקט. כדי ליצור אנימציית fling, יוצרים מופע של הכיתה FlingAnimation ומספקים אובייקט ואת המאפיין של האובייקט שרוצים להנפיש.

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

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

הגדרת מהירות

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

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

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

הערה: משתמשים ב-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 פיקסלים.