صور متجهات متحركة في Compose

يمكن تحريك المتّجهات في Compose بعدة طرق مختلفة. يمكنك استخدام أيٍّ ممّا يلي:

  • تنسيق ملف AnimatedVectorDrawable
  • ImageVector باستخدام واجهات برمجة التطبيقات Compose Animation API، كما هو موضّح في مقالة Medium هذه
  • حلّ تابع لجهة خارجية، مثل Lottie

الرسومات المتّجهة المتحرّكة القابلة للرسم (تجريبية)

ساعة رملية تحرّك محتواها وتدور
الشكل 1. رسم متّجه متحرّك قابل للرسم في Compose

لاستخدام مورد AnimatedVectorDrawable، عليك تحميل ملف الرسم باستخدام animatedVectorResource وتمرير boolean للتبديل بين حالتَي البداية والنهاية للرسم، ما يؤدي إلى تنفيذ التأثير المتحرّك.

@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
    )
}

لمزيد من المعلومات حول تنسيق ملف العنصر القابل للرسم، يُرجى الاطّلاع على تحريك الرسومات القابلة للرسم.