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

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

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

פריטי גרפיקה וקטוריים מונפשים (ניסיוניים)

שעון חול עם אנימציה של התוכן שלו ומסתובב
איור 1. אנימציה של וקטור שניתן להזזה במצב 'כתיבה'

כדי להשתמש במשאב 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
    )
}

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