Cách dễ nhất để tạo hiệu ứng Shimmer trong Jetpack Compose

Hiệu ứng Shimmer là một cách tuyệt vời để hiển thị trạng thái đang tải (loading) trong ứng dụng, mang lại trải nghiệm mượt mà và trực quan cho người dùng. Trong Jetpack Compose, việc tạo hiệu ứng này trở nên dễ dàng hơn bao giờ hết. Bài viết này sẽ hướng dẫn bạn cách triển khai hiệu ứng Shimmer đơn giản nhưng hiệu quả.

Bắt đầu với Shimmer Effect

Hiệu ứng Shimmer thường được sử dụng để hiển thị trạng thái tải, ví dụ như khi dữ liệu đang được lấy từ server. Nó tạo ra một hiệu ứng ánh sáng chuyển động trên giao diện, giúp người dùng biết rằng ứng dụng đang hoạt động. Trong Jetpack Compose, chúng ta có thể tận dụng Modifier và Canvas để tạo hiệu ứng này mà không cần thư viện phức tạp.

Code triển khai Shimmer Effect

Dưới đây là cách tạo một composable hiển thị hiệu ứng Shimmer:

@Composable
fun ShimmerEffect(
    modifier: Modifier = Modifier,
    durationMillis: Int = 1000
) {
    val infiniteTransition = rememberInfiniteTransition()
    val shimmerTranslateAnim by infiniteTransition.animateFloat(
        initialValue = -2f,
        targetValue = 2f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        )
    )

    Box(
        modifier = modifier
            .background(
                brush = Brush.linearGradient(
                    colors = listOf(
                        Color.LightGray.copy(alpha = 0.9f),
                        Color.LightGray.copy(alpha = 0.2f),
                        Color.LightGray.copy(alpha = 0.9f)
                    ),
                    start = Offset(shimmerTranslateAnim * 200f, 0f),
                    end = Offset(shimmerTranslateAnim * 200f + 200f, 0f)
                )
            )
    )
}

Giải thích code:

1. Infinite Transition: Sử dụng rememberInfiniteTransition để tạo một hoạt ảnh chạy vô hạn.
2. Animate Float: Tạo giá trị shimmerTranslateAnim để điều khiển chuyển động của gradient, chạy từ -2f đến 2f trong thời gian durationMillis.
3. Brush.linearGradient: Tạo hiệu ứng ánh sáng bằng gradient tuyến tính với các màu xám nhạt có độ trong suốt khác nhau.
4. Offset: Di chuyển gradient theo trục x dựa trên giá trị shimmerTranslateAnim để tạo hiệu ứng chuyển động.

Áp dụng Shimmer Effect

Bạn có thể sử dụng composable này để tạo placeholder cho bất kỳ thành phần giao diện nào. Ví dụ, tạo một danh sách giả lập với hiệu ứng Shimmer:

@Composable
fun ShimmerListItem() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        elevation = CardDefaults.cardElevation(4.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Box(
                modifier = Modifier
                    .size(80.dp)
                    .clip(CircleShape)
                    .shimmerEffect()
            )
            Column(
                modifier = Modifier
                    .weight(1f)
                    .padding(start = 16.dp),
                verticalArrangement = Arrangement.SpaceEvenly
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth(0.7f)
                        .height(20.dp)
                        .shimmerEffect()
                )
                Spacer(modifier = Modifier.height(8.dp))
                Box(
                    modifier = Modifier
                        .fillMaxWidth(0.4f)
                        .height(20.dp)
                        .shimmerEffect()
                )
            }
        }
    }
}

Sử dụng trong danh sách:

@Composable
fun ShimmerList() {
    LazyColumn {
        items(5) {
            ShimmerListItem()
        }
    }
}

Kết quả

Khi áp dụng, bạn sẽ thấy một danh sách các phần tử giả lập với hiệu ứng Shimmer chuyển động mượt mà. Hiệu ứng này không chỉ đẹp mắt mà còn nhẹ, không làm ảnh hưởng đến hiệu suất ứng dụng.

Mẹo tối ưu

• Tùy chỉnh màu sắc: Bạn có thể thay đổi danh sách màu trong Brush.linearGradient để phù hợp với giao diện ứng dụng.
• Tốc độ hoạt ảnh: Điều chỉnh durationMillis để tăng hoặc giảm tốc độ của hiệu ứng Shimmer.
• Hình dạng: Sử dụng clip để thay đổi hình dạng của placeholder, ví dụ như hình tròn hoặc hình chữ nhật.

Kết luận

Hiệu ứng Shimmer trong Jetpack Compose là một cách đơn giản nhưng hiệu quả để cải thiện trải nghiệm người dùng khi tải dữ liệu. Với vài dòng code, bạn có thể tạo ra một giao diện mượt mà và chuyên nghiệp. Hãy thử áp dụng vào dự án của bạn và tùy chỉnh theo ý thích!

You need to login in order to like this post: click here