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

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

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

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

השימוש הנפוץ ב-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 שונים למעברים משותפים.