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

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

  • פורמט קובץ AnimatedVectorDrawable
  • ImageVector באמצעות ממשקי API של אנימציה ב-Compose, כמו במאמר הזה ב-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
    )
}

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

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