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 phần tử dùng chung, có một số trường hợp sử dụng cụ thể có các đề xuất cụ thể.

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

Bạn thường dùng một thư viện để tải hình ảnh không đồng bộ, chẳng hạn như khi dùng thành phần kết hợp AsyncImage của Coil. Để có thể 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 một chuỗi bắt nguồn từ khoá phần tử dùng chung, sao cho khoá lưu vào bộ nhớ đệm giống nhau đối với các phần tử dùng chung được so khớp. Phần tử dùng chung mới sẽ sử dụng bộ nhớ đệm của thành phần trùng khớp làm phần giữ chỗ cho đến khi phần tử này 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 hiệu ứng cho một kiểu chữ hoặc độ đậm 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ó hiệu ứng chuyển động. Thay vào đó, hãy sử dụng Modifier.wrapContentSize() hoặc Modifier.wrapContentWidth() thay vì sử dụng TextAlign khác cho các hiệu ứng chuyển đổi dùng chung.