התאמה אישית של מעבר רכיב משותף

כדי להתאים אישית את האופן שבו אנימציית המעבר של הרכיב המשותף פועלת, יש כמה פרמטרים שאפשר להשתמש בהם כדי לשנות את המעבר של הרכיבים המשותפים.

מפרט האנימציה

כדי לשנות את הגדרת האנימציה שמשמשת לתנועת הגודל והמיקום, אפשר לציין פרמטר boundsTransform שונה ב-Modifier.sharedElement(). המיקום ההתחלתי Rect והמיקום של היעד Rect.

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

val textBoundsTransform = BoundsTransform { initialBounds, targetBounds ->
    keyframes {
        durationMillis = boundsAnimationDurationMillis
        initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing
        targetBounds at boundsAnimationDurationMillis
    }
}
Text(
    "Cupcake", fontSize = 28.sp,
    modifier = Modifier.sharedBounds(
        rememberSharedContentState(key = "title"),
        animatedVisibilityScope = animatedVisibilityScope,
        boundsTransform = textBoundsTransform
    )
)
CustomizeSharedElementsSnippets.kt

אפשר להשתמש בכל AnimationSpec. בדוגמה הזו נעשה שימוש במפרט keyframes.

מצב שינוי גודל

כשמנפישים מעבר בין שני גבולות משותפים, אפשר להגדיר את הפרמטר resizeMode לערך RemeasureToBounds או ScaleToBounds. הפרמטר הזה קובע איך מתבצע המעבר של הרכיב המשותף בין שני המצבים. ‫ScaleToBounds first מודד את פריסת הרכיב הצאצא עם האילוצים של התצוגה המקדימה (או היעד). לאחר מכן, הפריסה היציבה של רכיב הצאצא מותאמת כך שתתאים לגבולות המשותפים. אפשר לחשוב על ScaleToBounds כעל "סולם גרפי" בין המצבים.

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

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

ההבדל בין שני מצבי שינוי הגודל מודגם בדוגמאות הבאות:

הפעלה והשבתה דינמיות של אלמנטים משותפים

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

כדי לקבוע אם מעבר הרכיב המשותף יתרחש, אפשר להתאים אישית את SharedContentConfig שמועבר אל rememberSharedContentState(). המאפיין isEnabled קובע אם הרכיב המשותף פעיל.

בדוגמה הבאה מוסבר איך להגדיר מעבר משותף שמופעל רק כשעוברים בין מסכים ספציפיים (למשל, רק מ-A ל-B), ומושבת כשעוברים בין מסכים אחרים.

SharedTransitionLayout {
    val transition = updateTransition(currentState)
    transition.AnimatedContent { targetState ->
        // Create the configuration that depends on state changing.
        fun animationConfig() : SharedTransitionScope.SharedContentConfig {
            return object : SharedTransitionScope.SharedContentConfig {
                override val SharedTransitionScope.SharedContentState.isEnabled: Boolean
                    // For this example, we only enable the transition in one direction
                    // from A -> B and not the other way around.
                    get() =
                        transition.currentState == "A" && transition.targetState == "B"
            }
        }
        when (targetState) {
            "A" -> Box(
                modifier = Modifier
                    .sharedElement(
                        rememberSharedContentState(
                            key = "shared_box",
                            config = animationConfig()
                        ),
                        animatedVisibilityScope = this
                    )
                    // ...
            ) {
                // Your content
            }
            "B" -> {
                Box(
                    modifier = Modifier
                        .sharedElement(
                            rememberSharedContentState(
                                key = "shared_box",
                                config = animationConfig()
                            ),
                            animatedVisibilityScope = this
                        )
                        // ...
                ) {
                    // Your content
                }
            }
        }
    }
}
CustomizeSharedElementsSnippets.kt

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

דילוג לפריסה הסופית

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

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

קטעי וידאו ושכבות-על

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

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

כדי לחתוך אלמנט משותף לצורה, משתמשים בפונקציה הרגילה Modifier.clip(). ממקמים אותו אחרי sharedElement():

Image(
    painter = painterResource(id = R.drawable.cupcake),
    contentDescription = "Cupcake",
    modifier = Modifier
        .size(100.dp)
        .sharedElement(
            rememberSharedContentState(key = "image"),
            animatedVisibilityScope = this@AnimatedContent
        )
        .clip(RoundedCornerShape(16.dp)),
    contentScale = ContentScale.Crop
)
CustomizeSharedElementsSnippets.kt

אם אתם רוצים לוודא שרכיב משותף אף פעם לא מוצג מחוץ למאגר אב, אתם יכולים להגדיר את clipInOverlayDuringTransition ב-sharedElement(). כברירת מחדל, כשמגדירים גבולות משותפים מקוננים, clipInOverlayDuringTransition משתמש בנתיב הגזירה מהרכיב האב sharedBounds().

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

לדוגמה, ב-Jetsnack, צריך למקם את BottomAppBar מעל הרכיב המשותף עד שהמסך לא יהיה גלוי. הוספת המודיפייר לרכיב הקומפוזבילי שומרת על המיקום שלו.

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

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)
CustomizeSharedElementsSnippets.kt

במקרים נדירים שבהם רוצים שהרכיב המשותף לא יוצג בשכבת-על, אפשר להגדיר את renderInOverlayDuringTransition ב-sharedElement() כ-false.

הודעה על שינויים בגודל של רכיב משותף בפריסות מקבילות

כברירת מחדל, sharedBounds() ו-sharedElement() לא שולחים הודעה למאגר התגים ברמת ההורה על שינויים בגודל במהלך המעבר בין הפריסות.

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