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

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

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

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

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

הגדרת המהירות

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

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

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