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

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

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

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

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