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

יש כמה דרכים ליצור אנימציה של וקטור ב-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 זמין במאמר אנימציה של גרפיקה ניתנת לציור.

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