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

אפשר לנסות את הדרך של כתיבת הודעה

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

הנפשת מאפיינים →

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

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

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

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

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

הקוד הבא בפורמט XML מאחת מהדוגמאות לשימוש ב-API משמש למתיחה, ואז לסיבוב ולסיבוב של אובייקט 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 מהפריסה.

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

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

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

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

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