הצגת האנימציה

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

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

אנימציות נכסים ←

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

אנימציית tween יכולה לבצע סדרה של טרנספורמציות פשוטות (מיקום, גודל, סיבוב ושקיפות) על התוכן של אובייקט View. לכן, אם יש לכם אובייקט TextView, אתם יכולים להזיז, לסובב, להגדיל או לכווץ את הטקסט. אם יש לה תמונת רקע, תמונת הרקע תשתנה יחד עם הטקסט. animation package מציג את כל הכיתות באנימציה של גיל טרום-עשרה.

רצף של הוראות אנימציה מגדיר את אנימציית ה-tween, שמוגדר באמצעות קוד XML או קוד Android. בדומה להגדרת פריסה, מומלץ להשתמש בקובץ XML כי הוא קריא יותר, ניתן לשימוש חוזר ואפשר להחליף אותו מאשר בקידוד קשיח של האנימציה. בדוגמה הבאה אנחנו משתמשים ב-XML. (למידע נוסף על הגדרת אנימציה בקוד האפליקציה במקום ב-XML, אפשר לעיין בכיתה AnimationSet ובתת-כיתות אחרות של Animation).

הוראות האנימציה מגדירות את הטרנספורמציות שרוצים לבצע, מתי הן יתרחשו וכמה זמן ייקח להן ליישם אותן. הטרנספורמציות יכולות להיות רצופות או בו-זמניות – לדוגמה, תוכלו להזיז את התוכן של TextView משמאל לימין ואז לסובב אותו ב-180 מעלות, או להזיז את הטקסט ולסובב אותו בו-זמנית. לכל טרנספורמציה יש קבוצה של פרמטרים ספציפיים לאותה טרנספורמציה (גודל התחלה וגודל סיום לשינוי גודל, זווית התחלה וזווית סיום לסיבוב וכו'), וגם קבוצה של פרמטרים משותפים (למשל, זמן התחלה ומשך זמן). כדי לבצע כמה טרנספורמציות בו-זמנית, צריך לתת להן את אותו זמן התחלה. כדי לבצע אותן ברצף, צריך לחשב את זמן ההתחלה בתוספת משך הזמן של הטרנספורמציה הקודמת.

קובץ ה-XML של האנימציה שייך לספרייה res/anim/ של פרויקט Android. הקובץ צריך להכיל רכיב בסיס אחד: <alpha>, <scale>, <translate>, <rotate>, רכיב אינטרפולטור או <set> שמכיל קבוצות של הרכיבים האלה (שעשויות לכלול עוד <set>). כברירת מחדל, כל הוראות האנימציה יחולו בו-זמנית. כדי שהם יתרחשו ברצף, צריך לציין את המאפיין startOffset, כפי שמתואר בדוגמה הבאה.

ה-XML הבא מאחד מ-ApiDemos משמש למתיחה של אובייקט מסוג View ולסיבוב בו בו-זמנית.

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

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

אפשר לציין ערכים מסוימים, כמו pivotX, ביחס לאובייקט עצמו או ביחס להורה. חשוב להשתמש בפורמט המתאים לערכים הרצויים ('50' עבור 50% ביחס לרכיב ההורה, או '50%' עבור 50% ביחס לעצמו).

כדי לקבוע איך הטרנספורמציה תחול לאורך זמן, אפשר להקצות Interpolator. מערכת Android כוללת כמה תת-כיתות של Interpolator שמציינות עקומות מהירות שונות: לדוגמה, AccelerateInterpolator מציינת שהטרנספורמציה תתחיל לאט ותאיץ. לכל אחד מהם יש ערך מאפיין שאפשר להחיל ב-XML.

כשה-XML הזה נשמר בתור hyperspace_jump.xml בספרייה res/anim/ של הפרויקט, הקוד הבא יפנה אליו ויחיל אותו על אובייקט ImageView מהפריסה.

Kotlin

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

Java

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

לחלופין, אפשר להגדיר שעה התחלה של האנימציה באמצעות Animation.setStartTime(), ואז להקצות את האנימציה לתצוגה באמצעות View.setAnimation().

מידע נוסף על תחביר ה-XML, התגים והמאפיינים הזמינים זמין במאמר משאבי אנימציה.

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