מדריך מהיר לאנימציות בכתיבה

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

הנפשה של מאפיינים נפוצים של פונקציות קומפוזביליות

ב-Compose יש ממשקי API נוחים שמאפשרים לפתור הרבה תרחישים נפוצים של שימוש באנימציה. בקטע הזה מוסבר איך להוסיף אנימציה למאפיינים נפוצים של פונקציה קומפוזבילית.

הוספת אנימציה להופעה או להיעלמות

איור 1. הנפשה של הופעה והיעלמות של פריט בעמודה

משתמשים ב-AnimatedVisibility כדי להסתיר או להציג Composable. ילדים בתוך AnimatedVisibility יכולים להשתמש ב-Modifier.animateEnterExit() למעבר כניסה או יציאה משלהם.

var visible by remember {
    mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
    // your composable here
    // ...
}
AnimationQuickGuide.kt

הפרמטרים enter ו-exit של AnimatedVisibility מאפשרים להגדיר את ההתנהגות של תוכן קומפוזבילי כשהוא מופיע ונעלם. למידע נוסף, קראו את המסמכים המלאים.

אפשרות נוספת להנפשת החשיפה של רכיב Composable היא להנפיש את האלפא לאורך זמן באמצעות animateFloatAsState:

var visible by remember {
    mutableStateOf(true)
}
val animatedAlpha by animateFloatAsState(
    targetValue = if (visible) 1.0f else 0f,
    label = "alpha"
)
Box(
    modifier = Modifier
        .size(200.dp)
        .graphicsLayer {
            alpha = animatedAlpha
        }
        .clip(RoundedCornerShape(8.dp))
        .background(colorGreen)
        .align(Alignment.TopCenter)
) {
}
AnimationQuickGuide.kt

עם זאת, שינוי ערך האלפא מגיע עם אזהרה: ה-composable נשאר בקומפוזיציה וממשיך לתפוס את המקום שבו הוא ממוקם. במצב כזה, יכול להיות שקוראי מסך ומנגנוני נגישות אחרים עדיין יתייחסו לפריט כאילו הוא מופיע במסך. לעומת זאת, AnimatedVisibility מסיר בסופו של דבר את הפריט מהקומפוזיציה.

איור 2. הנפשה של אלפא של רכיב קומפוזבילי

הוספת אנימציה לצבע הרקע

איור 3. הנפשה של צבע הרקע של רכיב Composable

val animatedColor by animateColorAsState(
    if (animateBackgroundColor) colorGreen else colorBlue,
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(animatedColor)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

האפשרות הזו יעילה יותר משימוש ב-Modifier.background(). הפונקציה Modifier.background() מתאימה להגדרת צבע חד-פעמית, אבל כשמפעילים אנימציה של צבע לאורך זמן, היא עלולה לגרום ליותר הרכבות מחדש מהנדרש.

כדי להנפיש את צבע הרקע באופן אינסופי, אפשר לעיין בקטע בנושא חזרה על אנימציה.

הנפשה של גודל הרכיב הקומפוזבילי

איור 4. רכיב Composable שמשתנה בצורה חלקה מגודל קטן לגודל גדול יותר

ב-Compose אפשר להוסיף אנימציה לגודל של רכיבים קומפוזביליים בכמה דרכים שונות. משתמשים ב-animateContentSize() לאנימציות בין שינויים בגודל של רכיבים קומפוזביליים.

לדוגמה, אם יש לכם תיבה שמכילה טקסט שיכול להתרחב משורה אחת לכמה שורות, אתם יכולים להשתמש ב-Modifier.animateContentSize() כדי להשיג מעבר חלק יותר:

var expanded by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .background(colorBlue)
        .animateContentSize()
        .height(if (expanded) 400.dp else 200.dp)
        .fillMaxWidth()
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            expanded = !expanded
        }

) {
}
AnimationQuickGuide.kt

הערה: סדר המגבילים חשוב כאן. חשוב להוסיף אותו לפני כל משנה גודל.

אפשר גם להשתמש ב-AnimatedContent עם SizeTransform כדי לתאר איך השינויים בגודל צריכים להתבצע.

הוספת אנימציה למיקום של רכיב קומפוזבילי

איור 5. ‫Composable שזז לפי היסט

כדי להוסיף אנימציה למיקום של רכיב קומפוזבילי, משתמשים ב-Modifier.offset{ } בשילוב עם animateIntOffsetAsState().

var moved by remember { mutableStateOf(false) }
val pxToMove = with(LocalDensity.current) {
    100.dp.toPx().roundToInt()
}
val offset by animateIntOffsetAsState(
    targetValue = if (moved) {
        IntOffset(pxToMove, pxToMove)
    } else {
        IntOffset.Zero
    },
    label = "offset"
)

Box(
    modifier = Modifier
        .offset {
            offset
        }
        .background(colorBlue)
        .size(100.dp)
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            moved = !moved
        }
)
AnimationQuickGuide.kt

זהירות: הפעולה הזו לא משנה את המיקום של הרכיב ה-composable ביחס לרכיב ההורה, ולכן לא משפיעה על המיקום של הרכיבים האחים. כתוצאה מכך, יכול להיות שרכיבים אחים ישורטטו אחד מעל או מתחת לשני. ההיסט משפיע רק על המיקום של פריסות הצאצא של Modifier.offset{}.

אם אתם רוצים לוודא שרכיבים קומפוזביליים לא משורטטים מעל או מתחת לרכיבים קומפוזביליים אחרים כשמפעילים אנימציה של מיקום או גודל, השתמשו ב-Modifier.layout{ }. המשתנה הזה מעביר את השינויים בגודל ובמיקום לרכיב ההורה, וכך משפיע על רכיבי הצאצא האחרים.

לדוגמה, אם אתם מעבירים Box בתוך Column והצאצאים האחרים צריכים לזוז כשה-Box זז, צריך לכלול את פרטי ההיסט עם Modifier.layout{ } באופן הבא:

var toggled by remember {
    mutableStateOf(false)
}
val interactionSource = remember {
    MutableInteractionSource()
}
Column(
    modifier = Modifier
        .padding(16.dp)
        .fillMaxSize()
        .clickable(indication = null, interactionSource = interactionSource) {
            toggled = !toggled
        }
) {
    val offsetTarget = if (toggled) {
        IntOffset(150, 150)
    } else {
        IntOffset.Zero
    }
    val offset = animateIntOffsetAsState(
        targetValue = offsetTarget, label = "offset"
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                val offsetValue = if (isLookingAhead) offsetTarget else offset.value
                val placeable = measurable.measure(constraints)
                layout(placeable.width + offsetValue.x, placeable.height + offsetValue.y) {
                    placeable.placeRelative(offsetValue)
                }
            }
            .size(100.dp)
            .background(colorGreen)
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
}
AnimationQuickGuide.kt

איור 6. יצירת אנימציה באמצעות Modifier.layout{ }

הוספת אנימציה למרווח הפנימי של רכיב קומפוזבילי

איור 7. רכיב Composable עם אנימציה של המרווח הפנימי

כדי להוסיף אנימציה למרווח הפנימי של רכיב קומפוזבילי, משתמשים ב-animateDpAsState בשילוב עם Modifier.padding():

var toggled by remember {
    mutableStateOf(false)
}
val animatedPadding by animateDpAsState(
    if (toggled) {
        0.dp
    } else {
        20.dp
    },
    label = "padding"
)
Box(
    modifier = Modifier
        .aspectRatio(1f)
        .fillMaxSize()
        .padding(animatedPadding)
        .background(Color(0xff53D9A1))
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            toggled = !toggled
        }
)
AnimationQuickGuide.kt

הפעלת אנימציה של גובה של רכיב קומפוזבילי

איור 8. הנפשה של גובה הקומפוזבילי בלחיצה

כדי להוסיף אנימציה להגבהה של רכיב קומפוזבילי, משתמשים ב-animateDpAsState בשילוב עם Modifier.graphicsLayer{ }. לשינויים חד-פעמיים בהרשאות, משתמשים ב-Modifier.shadow(). אם אתם מוסיפים אנימציה לצל, כדאי להשתמש ב-modifier‏ Modifier.graphicsLayer{ } כדי לשפר את הביצועים.

val mutableInteractionSource = remember {
    MutableInteractionSource()
}
val pressed = mutableInteractionSource.collectIsPressedAsState()
val elevation = animateDpAsState(
    targetValue = if (pressed.value) {
        32.dp
    } else {
        8.dp
    },
    label = "elevation"
)
Box(
    modifier = Modifier
        .size(100.dp)
        .align(Alignment.Center)
        .graphicsLayer {
            this.shadowElevation = elevation.value.toPx()
        }
        .clickable(interactionSource = mutableInteractionSource, indication = null) {
        }
        .background(colorGreen)
) {
}
AnimationQuickGuide.kt

לחלופין, אפשר להשתמש ברכיב ה-composable‏ Card ולהגדיר את מאפיין הגובה לערכים שונים לכל מצב.

הוספת אנימציה לשינוי הגודל, המיקום או הזווית של הטקסט

איור 9. טקסט עם אנימציה חלקה בין שני גדלים

כשיוצרים אנימציה של שינוי קנה מידה, תרגום או סיבוב של טקסט, מגדירים את הפרמטר textMotion ב-TextStyle לערך TextMotion.Animated. כך המעברים בין האנימציות של הטקסט יהיו חלקים יותר. אפשר להשתמש בModifier.graphicsLayer{ } כדי לתרגם, לסובב או לשנות את הגודל של הטקסט.

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val scale by infiniteTransition.animateFloat(
    initialValue = 1f,
    targetValue = 8f,
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "scale"
)
Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "Hello",
        modifier = Modifier
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
                transformOrigin = TransformOrigin.Center
            }
            .align(Alignment.Center),
        // Text composable does not take TextMotion as a parameter.
        // Provide it via style argument but make sure that we are copying from current theme
        style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated)
    )
}
AnimationQuickGuide.kt

הנפשה של צבע הטקסט

איור 10. דוגמה להנפשה של צבע הטקסט

כדי להוסיף אנימציה לצבע הטקסט, משתמשים ב-lambda של color ב-BasicText הקומפוזבילי:

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val animatedColor by infiniteTransition.animateColor(
    initialValue = Color(0xFF60DDAD),
    targetValue = Color(0xFF4285F4),
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "color"
)

BasicText(
    text = "Hello Compose",
    color = {
        animatedColor
    },
    // ...
)
AnimationQuickGuide.kt

מעבר בין סוגי תוכן שונים

איור 11. שימוש ב-AnimatedContent כדי להוסיף אנימציה לשינויים בין רכיבים קומפוזביליים שונים (בהילוך איטי)

כדי להוסיף אנימציה בין רכיבים קומפוזביליים שונים, משתמשים ב-AnimatedContent. אם רוצים רק מעבר הדרגתי רגיל בין רכיבים קומפוזביליים, משתמשים ב-Crossfade.

var state by remember {
    mutableStateOf(UiState.Loading)
}
AnimatedContent(
    state,
    transitionSpec = {
        fadeIn(
            animationSpec = tween(3000)
        ) togetherWith fadeOut(animationSpec = tween(3000))
    },
    modifier = Modifier.clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = null
    ) {
        state = when (state) {
            UiState.Loading -> UiState.Loaded
            UiState.Loaded -> UiState.Error
            UiState.Error -> UiState.Loading
        }
    },
    label = "Animated Content"
) { targetState ->
    when (targetState) {
        UiState.Loading -> {
            LoadingScreen()
        }
        UiState.Loaded -> {
            LoadedScreen()
        }
        UiState.Error -> {
            ErrorScreen()
        }
    }
}
AnimationQuickGuide.kt

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

הנפשה בזמן ניווט ליעדים שונים

איור 12. הוספת אנימציה בין רכיבים קומפוזביליים באמצעות navigation-compose

כדי להוסיף אנימציה למעברים בין רכיבים קומפוזביליים כשמשתמשים בארטיפקט navigation-compose, צריך לציין את enterTransition ו-exitTransition ברכיב קומפוזבילי. אפשר גם להגדיר את האנימציה שמוגדרת כברירת מחדל לשימוש בכל היעדים ברמה העליונה NavHost:

val navController = rememberNavController()
NavHost(
    navController = navController, startDestination = "landing",
    enterTransition = { EnterTransition.None },
    exitTransition = { ExitTransition.None }
) {
    composable("landing") {
        ScreenLanding(
            // ...
        )
    }
    composable(
        "detail/{photoUrl}",
        arguments = listOf(navArgument("photoUrl") { type = NavType.StringType }),
        enterTransition = {
            fadeIn(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideIntoContainer(
                animationSpec = tween(300, easing = EaseIn),
                towards = AnimatedContentTransitionScope.SlideDirection.Start
            )
        },
        exitTransition = {
            fadeOut(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideOutOfContainer(
                animationSpec = tween(300, easing = EaseOut),
                towards = AnimatedContentTransitionScope.SlideDirection.End
            )
        }
    ) { backStackEntry ->
        ScreenDetails(
            // ...
        )
    }
}
AnimationQuickGuide.kt

יש הרבה סוגים שונים של מעברי כניסה ויציאה שמחילים אפקטים שונים על התוכן הנכנס והיוצא. למידע נוסף, עיינו במסמכי התיעוד.

הערה: מעברי כניסה ויציאה זמינים רק מ-navigation-compose 2.7.0-alpha01.

חזרה על אנימציה

איור 13. צבע הרקע משתנה בין שני ערכים, ללא הגבלה

כדי שהאנימציה תחזור על עצמה ברצף, משתמשים ב-rememberInfiniteTransition עם infiniteRepeatable animationSpec. משנים את RepeatModes כדי לציין איך הוא אמור לנוע קדימה ואחורה.

משתמשים ב-repeatable כדי לחזור על פעולה מספר מסוים של פעמים.

val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val color by infiniteTransition.animateColor(
    initialValue = Color.Green,
    targetValue = Color.Blue,
    animationSpec = infiniteRepeatable(
        animation = tween(1000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    ),
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(color)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

הפעלת אנימציה בהפעלה של רכיב Composable

הפונקציה LaunchedEffect פועלת כשפונקציה קומפוזבילית נכנסת לקומפוזיציה. היא מפעילה אנימציה בהפעלה של רכיב קומפוזבילי, ואפשר להשתמש בה כדי להניע את שינוי המצב של האנימציה. שימוש ב-Animatable עם ה-method‏ animateTo כדי להפעיל את האנימציה בזמן ההפעלה:

val alphaAnimation = remember {
    Animatable(0f)
}
LaunchedEffect(Unit) {
    alphaAnimation.animateTo(1f)
}
Box(
    modifier = Modifier.graphicsLayer {
        alpha = alphaAnimation.value
    }
)
AnimationQuickGuide.kt

זהירות: חשוב להיזהר כשמשתמשים ב-LaunchedEffects בתוך פריסות עם טעינה מדורגת. הם מופעלים מחדש כשהפריטים נכנסים שוב לקומפוזיציה. לדוגמה, זה יכול לקרות כשגוללים את הרשימה מחוץ למסך ובחזרה למסך. במקום זאת, העלו את המצב מחוץ לפריסה הלא-מיידית כדי לוודא שהאנימציה לא תתרחש בכל גלילה פנימה והחוצה מהקומפוזיציה.

יצירת אנימציות ברצף

איור 14. תרשים שמראה איך אנימציה רציפה מתקדמת, אחת אחרי השנייה.

משתמשים בממשקי ה-API של קורוטינות ב-Animatable כדי להפעיל אנימציות ברצף או בו-זמנית. קריאה ל-animateTo ב-Animatable בזה אחר זה גורמת לכל אנימציה להמתין עד שהאנימציות הקודמות יסתיימו לפני שהיא ממשיכה. הסיבה לכך היא שזו פונקציית השעיה.

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    alphaAnimation.animateTo(1f)
    yAnimation.animateTo(100f)
    yAnimation.animateTo(500f, animationSpec = tween(100))
}
AnimationQuickGuide.kt

יצירת אנימציות בו-זמניות

איור 15. דיאגרמה שמראה איך אנימציות בו-זמניות מתקדמות, כולן באותו זמן.

כדי ליצור אנימציות בו-זמניות, משתמשים בממשקי ה-API של פונקציות ה-coroutine‏ (Animatable#animateTo() או animate) או ב-API‏ Transition. אם משתמשים בכמה פונקציות הפעלה בהקשר של שגרת המשך (coroutine), האנימציות מופעלות בו-זמנית:

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    launch {
        alphaAnimation.animateTo(1f)
    }
    launch {
        yAnimation.animateTo(100f)
    }
}
AnimationQuickGuide.kt

אתם יכולים להשתמש ב-API‏ updateTransition כדי להשתמש באותו מצב כדי להפעיל הרבה אנימציות שונות של מאפיינים בו-זמנית. בדוגמה הבאה, שתי תכונות מונפשות באמצעות שינוי מצב, rect ו-borderWidth:

var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState, label = "transition")

val rect by transition.animateRect(label = "rect") { state ->
    when (state) {
        BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
        BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
    }
}
val borderWidth by transition.animateDp(label = "borderWidth") { state ->
    when (state) {
        BoxState.Collapsed -> 1.dp
        BoxState.Expanded -> 0.dp
    }
}
AnimationQuickGuide.kt

אופטימיזציה של ביצועי האנימציה

אנימציות ב-Compose עלולות לגרום לבעיות בביצועים. זה קשור לאופי של האנימציה: הזזה או שינוי של פיקסלים על המסך במהירות, פריים אחרי פריים, כדי ליצור אשליה של תנועה.

חשוב להביא בחשבון את השלבים השונים של Compose: קומפוזיציה, פריסה ושרטוט. אם האנימציה משנה את שלב הפריסה, כל הרכיבים הקומפוזביליים המושפעים צריכים לעבור פריסה מחדש וציור מחדש. אם האנימציה מתרחשת בשלב השרטוט, כברירת מחדל היא תהיה יעילה יותר מאשר אם הייתם מפעילים את האנימציה בשלב הפריסה, כי יהיה פחות עבודה לעשות באופן כללי.

כדי שהאפליקציה תבצע כמה שפחות פעולות בזמן האנימציה, כדאי לבחור בגרסת הלמבדה של Modifier כשאפשר. כך מדלגים על הרכבה מחדש ומפעילים את האנימציה מחוץ לשלב ההרכבה. אחרת, משתמשים ב-Modifier.graphicsLayer{ }, כי המשתנה הזה תמיד פועל בשלב השרטוט. למידע נוסף, קראו את הקטע דחיית קריאות במסמכי התיעוד בנושא ביצועים.

שינוי התזמון של האנימציה

כברירת מחדל, ב-Compose רוב האנימציות הן אנימציות של קפיץ. אנימציות קפיציות, או אנימציות שמבוססות על פיזיקה, מרגישות טבעיות יותר. אפשר גם להפריע להן, כי הן מתחשבות במהירות הנוכחית של האובייקט במקום בזמן קבוע. אם רוצים לשנות את ברירת המחדל, בכל ממשקי ה-Animation API של האנימציה שהוצגו קודם אפשר להגדיר animationSpec כדי להתאים אישית את אופן ההפעלה של האנימציה, למשל אם רוצים שהיא תפעל במשך זמן מסוים או תהיה קופצנית יותר.

הנה סיכום של האפשרויות השונות של animationSpec:

• ‫spring: אנימציה שמבוססת על פיזיקה, ברירת המחדל לכל האנימציות. אפשר לשנות את הערכים של stiffness או dampingRatio כדי לשנות את המראה והתחושה של האנימציה.
• ‫tween (קיצור של between): אנימציה שמבוססת על משך זמן, יוצרת אנימציה בין שני ערכים באמצעות פונקציית Easing.
• ‫keyframes: מפרט להגדרת ערכים בנקודות מפתח מסוימות באנימציה.
• ‫repeatable: מפרט מבוסס-משך שפועל מספר מסוים של פעמים, שצוין על ידי RepeatMode.
• ‫infiniteRepeatable: מפרט מבוסס-משך שפועל ללא הגבלת זמן.
• ‫snap: מעבר מיידי לערך הסופי בלי אנימציה.

תרשים 16. ללא מפרט לעומת מפרט של קפיץ בהתאמה אישית

למידע נוסף על animationSpecs, קראו את המסמכים המלאים.

מקורות מידע נוספים

דוגמאות נוספות לאנימציות מהנות ב-Compose:

• 5 אנימציות מהירות ב-Compose
• איך לגרום למדוזה לזוז ב-Compose
• התאמה אישית של AnimatedContent ב-Compose
• הסבר על פונקציות הדרגתיות בפיתוח נייטיב