תרחישים לדוגמה נפוצים לשימוש ברכיבים משותפים

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

תמונות אסינכרוניות

לרוב משתמשים בספרייה כדי לטעון תמונה באופן אסינכרוני, למשל כשמשתמשים ב-AsyncImage composable של Coil. כדי שהיא תפעל בצורה חלקה בין שני רכיבים מורכבים, מומלץ להגדיר את placeholderMemoryCacheKey() ו-memoryCacheKey() לאותו מפתח כמחרוזת שמקורה במפתח של האלמנט המשותף, כך שמפתח המטמון יהיה זהה לאלמנטים המשותפים שתואמים. הרכיב המשותף החדש ישתמש במטמון של ההתאמה שלו בתור placeholder עד שהוא יטען את התמונה החדשה.

השימוש האופייני ב-AsyncImage הוא:

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("your-image-url")
        .crossfade(true)
        .placeholderMemoryCacheKey("image-key") //  same key as shared element key
        .memoryCacheKey("image-key") // same key as shared element key
        .build(),
    placeholder = null,
    contentDescription = null,
    modifier = Modifier
        .size(120.dp)
        .sharedBounds(
            rememberSharedContentState(
                key = "image-key"
            ),
            animatedVisibilityScope = this
        )
)
SharedElementCommonUseCaseSnippets.kt

טקסט

כדי להנפיש שינויים ב-fontSize, משתמשים ב-Modifier.sharedBounds(), resizeMode = ScaleToBounds(). המעבר הזה מאפשר לשינוי הגודל להתבצע בצורה חלקה יחסית. אפשר לשנות את הפרמטר contentScale כדי ליצור אנימציה של סגנון או עובי גופן ספציפיים.

Text(
    text = "This is an example of how to share text",
    modifier = Modifier
        .wrapContentWidth()
        .sharedBounds(
            rememberSharedContentState(
                key = "shared Text"
            ),
            animatedVisibilityScope = this,
            enter = fadeIn(),
            exit = fadeOut(),
            resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()
        )
)
SharedElementCommonUseCaseSnippets.kt

כברירת מחדל, לא מוצגת אנימציה לשינויים ב-TextAlign. במקום זאת, כדאי להשתמש ב-Modifier.wrapContentSize() / Modifier.wrapContentWidth() במקום ב-TextAlign שונים למעברים משותפים.