Các trường hợp sử dụng thành phần dùng chung phổ biến

Khi tạo ảnh động cho các thành phần dùng chung, có một số trường hợp sử dụng cụ thể có các đề xuất riêng.

Hình ảnh không đồng bộ

Bạn thường sử dụng thư viện để tải hình ảnh không đồng bộ, chẳng hạn như khi sử dụng composable AsyncImage của Coil. Để tính năng này hoạt động liền mạch giữa hai thành phần kết hợp, bạn nên đặt placeholderMemoryCacheKey() và memoryCacheKey() thành cùng một khoá dưới dạng chuỗi bắt nguồn từ khoá phần tử dùng chung, để khoá bộ nhớ đệm giống với các phần tử dùng chung khớp nhau. Phần tử dùng chung mới sẽ sử dụng bộ nhớ đệm của phần tử khớp làm phần giữ chỗ cho đến khi tải hình ảnh mới.

Cách sử dụng thông thường cho AsyncImage như sau:

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

Văn bản

Để tạo ảnh động cho các thay đổi về fontSize, hãy sử dụng Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Quá trình chuyển đổi này giúp thay đổi kích thước tương đối linh hoạt. Bạn có thể điều chỉnh tham số contentScale để tạo ảnh động cho một kiểu hoặc độ đậm phông chữ cụ thể.

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

Theo mặc định, các thay đổi về TextAlign không có ảnh động. Thay vào đó, hãy sử dụng Modifier.wrapContentSize() hoặc Modifier.wrapContentWidth() thay vì dùng TextAlign khác nhau cho các hiệu ứng chuyển đổi được chia sẻ.