Ảnh vectơ động trong Compose

Bạn có thể tạo ảnh động vectơ trong Compose theo một số cách. Bạn có thể sử dụng bất kỳ công cụ nào sau đây:

  • Định dạng tệp AnimatedVectorDrawable
  • ImageVector với API ảnh động Compose, như trong bài viết này trên Medium
  • Một giải pháp của bên thứ ba như Lottie

Vectơ ảnh động có thể vẽ (thử nghiệm)

Đồng hồ cát tạo hiệu ứng động cho nội dung bên trong và xoay
Hình 1. Vectơ ảnh động có thể vẽ trong Compose

Để sử dụng tài nguyên AnimatedVectorDrawable, hãy tải tệp có thể vẽ lên bằng animatedVectorResource rồi truyền vào boolean để chuyển đổi giữa trạng thái bắt đầu và kết thúc của đối tượng có thể vẽ, thực hiện ảnh động.

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}

Để biết thêm thông tin chi tiết về định dạng của tệp có thể vẽ được, vui lòng xem nội dung Tạo ảnh động cho đồ hoạ có thể vẽ được.