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

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

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

מקובל להשתמש בספרייה כדי לטעון תמונה באופן אסינכרוני, למשל באמצעות התוכן הקומפוזבילי AsyncImage של 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 להעברות משותפות.