אנימציה של תמונות וקטוריות בכתיבה

יש כמה דרכים להנפיש וקטורים ב-Compose. אפשר להשתמש בכל אחת מהאפשרויות הבאות:

  • פורמט הקובץ AnimatedVectorDrawable
  • ‫ImageVector עם ממשקי API של אנימציה ב-Compose, כמו שמוסבר במאמר הזה ב-Medium
  • פתרון של צד שלישי כמו Lottie

פריטים גרפיים וקטוריים עם אנימציה (ניסיוני)

שעון חול עם אנימציה של התוכן וסיבוב
איור 1. פריט גרפי וקטורי מונפש ב-Compose

כדי להשתמש במשאב AnimatedVectorDrawable, טוענים את קובץ ה-drawable באמצעות animatedVectorResource ומעבירים boolean כדי לעבור בין מצב ההתחלה למצב הסיום של ה-drawable ולהפעיל את האנימציה.

@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
    )
}
AnimationSnippets.kt

מידע נוסף על הפורמט של קובץ ה-drawable זמין במאמר הנפשה של גרפיקת drawable.

הקודם
אנימציות מבוססות-ערך
הבא
התאמה אישית של אנימציות