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

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

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

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

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

איור 1. אנימציית הנפה

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

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

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

Kotlin

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

Java

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

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

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

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

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

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

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

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

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

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

הגדרת חיכוך

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

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

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

קוד לדוגמה

הדוגמה הבאה ממחישה תנועה אופקית. המהירות שצוברת מכשיר המעקב אחר המהירות היא velocityX, והגבולות של הגלילה מוגדרים ל-0 ול-maxScroll. החיכוך מוגדר כ-1.1.

Kotlin

FlingAnimation(view, DynamicAnimation.SCROLL_X).apply {
    setStartVelocity(-velocityX)
    setMinValue(0f)
    setMaxValue(maxScroll)
    friction = 1.1f
    start()
}

Java

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() ולהעביר לה את אחת מהקבועות של השינוי המינימלי הגלוי או ערך שצריך לחשב למאפיין מותאם אישית. למידע נוסף על חישוב הערך הזה, לעיין חישוב ערך שינוי מינימלי גלוי .

Kotlin

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

Java

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

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

חישוב ערך מינימלי של שינוי גלוי

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

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

לדוגמה, הנכס שרוצים להוסיף לו אנימציה מתקדם מ-0 עד 0 100. הדבר תואם לשינוי של 200 פיקסלים. לפי הנוסחה, הערך המינימלי של השינוי הגלוי הוא 100 / 200 שווה ל-0.5 פיקסלים.