הוספת תמיכה באנימציות אחורה בזמן

כשמשתמשים בממשקי ה-API של המערכת, אפשר להביע הסכמה לקבלת אנימציות באפליקציה תמיכה במעברים מותאמים אישית.

סרטון: אנימציות חזויות של החזרה

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

ניתן גם לשדרג את התלות של רכיבי החומר המילוליים לגרסה 1.10.0 של MDC Android לקבלת אנימציות של רכיבים מהותיים כמו:

אפשר לעיין בהנחיות למפתחים של רכיבי חומר ב-GitHub כדי לראות מידע נוסף.

הסרטון מציג דוגמה קצרה לאנימציות אחורה של 'חזרה' פעילות שונות וחזרה הביתה באמצעות האפליקציה 'הגדרות' של Android.

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

מידע נוסף על הוספת תמיכה בתנועות חזרה חזויות

הוספה של מעברים ואנימציות בהתאמה אישית בתוך האפליקציה

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

הוספת מעברים בהתאמה אישית באמצעות Progress API

עם פעילות AndroidX מגרסה 1.8.0-alpha01 ואילך, ניתן להשתמש במנגנון החיזוי התקדמות ממשקי API לפיתוח אנימציות מותאמות אישית תנועת החזרה החזויה באפליקציה. ממשקי API להתקדמות עוזרים באנימציה אך יש לו מגבלות בהנפשה של מעברים בין מקטעים. בטווח של OnBackPressedCallback השקנו handleOnBackProgressed, handleOnBackCancelled וגם handleOnBackStarted שיטות להנפשה של אובייקטים בזמן שהמשתמש מחליק בחזרה. יש להשתמש בשיטות האלה אם צריכים להתאים אישית יותר מאנימציות ברירת המחדל שסופקו על ידי המערכת, או את האנימציות של רכיבי החומרה.

אנחנו מצפים שרוב האפליקציות ישתמשו בממשקי API של AndroidX בתאימות לאחור, אבל יש גם ממשקי API של פלטפורמות דומות OnBackAnimationCallback ממשק זמין לבדיקה ב-Android 14 Developer Preview גרסה 1 ואילך.

שימוש בממשקי Progress API עם מעברים של AndroidX

ניתן להשתמש בממשקי Progress API עם AndroidX Transits מגרסה 1.5.0-alpha01 ואילך ב-Android מגרסה 14 ואילך כדי ליצור העברות חזויות חזרה.

  1. במקום להשתמש ב-TransitionManager#controlDelayedTransition beginDelayedTransition למשחק המעברים בתור המשתמש מחליק בחזרה.
  2. יוצרים את המעבר בתוך handleOnBackStarted.
  3. מפעילים את המעבר עם אירוע 'הקודם' שמתקיים בתוך handleOnBackProgressed עד בקשר ל-currentFraction אל BackEvent.progress, שחושף את המרחק המשתמש החליף בחזרה.
  4. סיום המעבר אחרי שהמשתמש ביצע את תנועת החזרה בתוך handleOnBackPressed
  5. לסיום, צריך לאפס את מצב המעבר בתוך handleOnBackCancelled.

הסרטון הבא, קוד Kotlin ו-XML מדגימים מעבר מותאם אישית בין שתי תיבות שהוטמעו באמצעות OnBackPressedCallback:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  
<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

כשעובדים עם העברות חזויות חזרה, חשוב לזכור את הדברים הבאים:

  • צריך להשתמש בפונקציה isSeekingSupported כדי לבדוק אם המעבר תומך ב'חזרה חזויה'.
  • כדי להחזיר את הערך True להעברות בהתאמה אישית צריך לשנות את isSeekingSupported.
  • יצירת בקר אחד לכל אנימציה.
  • מעברי חזרה חזויים נתמכים עם מעברים מ-AndroidX, אבל לא במסגרת מעברים בין מסגרות. מומלץ לבצע מיגרציה מ-framework מעברים שונים.
  • העברות חזויות חזרה נתמכות במכשירים עם Android 14 ועם גרסת Android 14 גבוהים יותר ואינם תואמים לאחור.
  • יש תמיכה גם במעברים שנוצרו באמצעות סצנות XML. לחשבון handleOnBackStarted, הגדרת TransitionSeekController כתוצאה של TransitionManager.createSeekController במקום התוצאה של controlDelayedTransition.

הוספת מעברים בין פעילויות בהתאמה אישית ב-Android 14 ואילך

כדי לוודא שמעברים בין פעילויות בהתאמה אישית תומכים בהצגה חזויה ב-Android 14 ומעלה, אתם יכולים להשתמש ב-overrideActivityTransition overridePendingTransition כלומר אנימציית המעבר תפעל המשתמש מחליק בחזרה.

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

  • קריאה לפתיחה או לסגירה של מעברים בתוך onCreate של פעילות ב' .
  • כשהמשתמש מנווט לפעילות ב', יש להשתמש ב-OVERRIDE_TRANSITION_OPEN. מתי המשתמש מחליק כדי לחזור לפעילות א', השתמשו OVERRIDE_TRANSITION_CLOSE
  • כשמציינים את הערך OVERRIDE_TRANSITION_CLOSE, הערך enterAnim הוא הערך של פעילות א' כניסה לאנימציה, והexitAnim הוא אנימציית היציאה של פעילות ב'.

הוספת תמיכה עבור 'הקודם חזוי' עם מקטעים

במהלך יישום חיזוי חזרה עם מקטעים, יש שתי גישות.

שימוש בממשקי API קיימים

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

חשוב לזכור:

  • יבא מעברים 1.5.0 או מאוחר יותר ו-Fragments 1.7.0 או מאוחר יותר. חלק גדול מהתמיכה החזויה ב-Fragments מבוסס על יש מעברים שיכולים לחפש אנימציות, וזה אפשרי רק מעברים מגרסה 1.5.0 ואילך.
  • משתמשים ב-Fragments עם FragmentManager או עם רכיב ניווט, כדי לטפל במקבץ האחורי. חזוי אין תמיכה ב'הקודם' אם אתם מנהלים מקבץ חזרה משלכם.
  • ספריות מסוימות כוללות תמיכה חזויה לחזרה. עליך לבדוק את התיעוד כדי בטח.
  • הכיתה Animator וגם AndroidX Transition ספריות נתמך.
  • אין תמיכה במחלקה Animation ובספרייה Transition של ה-framework.
  • אנימציות חזויות פועלות רק במכשירים עם Android מגרסה 14 ואילך.

כדאי להשתמש במקטעים חוזרים של חיזוי (prediction) במצבים הבאים:

חלק מתנועות החומר תמיכה בחיזוי החל מ- 1.12.02-alpha02 ומעלה, כולל MaterialFadeThrough, MaterialSharedAxis MaterialFade. הערה: MaterialContainerTransform לא תומך בחיזויים בחזרה.

שימוש בקריאות חוזרות (callbacks)

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

יוצרים OnBackPressedCallback. בתוך handleOnBackProgressed, התאמה לעומס (scaling) להזיז את המקטע. ואז קופץ מהמקבץ האחורי. לאחר מכן, נריץ את הרכיב המשותף מעבר באמצעות setSharedElementReturnTransition מחוץ לקריאה החוזרת (callback).

מידע נוסף זמין בקטע דוגמת הקוד ב-GitHub.

הדרישות

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

קטגוריה אנימציה compileSdk targetSdk android:enableOnBackInvokedCallback תלות
אנימציות מערכת חזרה הביתה 33 כל צבע TRUE ללא
פעילות צולבת 34 כל צבע TRUE ללא
ביצוע משימות שונות 34 כל צבע TRUE ללא
פלטפורמה התאמה אישית של הפעילות הגופנית 34 כל צבע TRUE ללא
פלטפורמת Progress API 34 כל צבע TRUE ללא
רכיבי החומר גיליון תחתון 34 כל צבע TRUE רכיב חומר 1.10.0
גיליון צדדי 34 כל צבע TRUE רכיב חומר 1.10.0
חלונית הזזה לניווט 34 כל צבע TRUE רכיב חומר 1.10.0
חיפוש 34 כל צבע TRUE רכיב חומר 1.10.0
אנימציה ב-Jetpack מעבר בין מקטעים של AndroidX בהתאמה אישית 34 כל צבע TRUE מקטע AndroidX 1.7
מעברים בהתאמה אישית ל-AndroidX 34 כל צבע TRUE מעבר עם AndroidX 1.5
Jetpack ב-Progress API 34 כל צבע TRUE פעילות AndroidX גרסה 1.8

הטבלה הבאה מתייחסת לדרישות שמאפשרות למשתמשים לראות אנימציות.

קטגוריה אנימציה האפשרות למפתחים הופעלה גרסת המכשיר
אנימציות מערכת חזרה הביתה TRUE 33
פעילות צולבת TRUE 34
ביצוע משימות שונות TRUE 34
פלטפורמה התאמה אישית של הפעילות הגופנית TRUE 34
פלטפורמת Progress API לא נכון 34
רכיבי החומר גיליון תחתון לא נכון 34
גיליון צדדי לא נכון 34
חלונית הזזה לניווט לא נכון 34
חיפוש לא נכון 34
אנימציה ב-Jetpack מעבר בין מקטעים של AndroidX בהתאמה אישית לא נכון 34
מעברים בהתאמה אישית ל-AndroidX לא נכון 34
Jetpack ב-Progress API לא נכון 34

משאבים נוספים