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

ב-Compose יש פונקציות קומפוזביליות ומשתני שינוי מובְנים לטיפול בתרחישים נפוצים של אנימציה.

רכיבים מובנים של אנימציה

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

הנפשה של הופעה והיעלמות

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

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

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

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

var visible by remember { mutableStateOf(true) }
val density = LocalDensity.current
AnimatedVisibility(
    visible = visible,
    enter = slideInVertically {
        // Slide in from 40 dp from the top.
        with(density) { -40.dp.roundToPx() }
    } + expandVertically(
        // Expand from the top.
        expandFrom = Alignment.Top
    ) + fadeIn(
        // Fade in with the initial alpha of 0.3f.
        initialAlpha = 0.3f
    ),
    exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
    Text(
        "Hello",
        Modifier
            .fillMaxWidth()
            .height(200.dp)
    )
}
AnimationSnippets.kt

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

דוגמאות למעברי כניסה ויציאה

EnterTransition	ExitTransition
fadeIn	fadeOut
slideIn	slideOut
slideInHorizontally	slideOutHorizontally
slideInVertically	slideOutVertically
scaleIn	scaleOut
expandIn	shrinkOut
expandHorizontally	shrinkHorizontally
expandVertically	shrinkVertically

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

// Create a MutableTransitionState<Boolean> for the AnimatedVisibility.
val state = remember {
    MutableTransitionState(false).apply {
        // Start the animation immediately.
        targetState = true
    }
}
Column {
    AnimatedVisibility(visibleState = state) {
        Text(text = "Hello, world!")
    }

    // Use the MutableTransitionState to know the current animation state
    // of the AnimatedVisibility.
    Text(
        text = when {
            state.isIdle && state.currentState -> "Visible"
            !state.isIdle && state.currentState -> "Disappearing"
            state.isIdle && !state.currentState -> "Invisible"
            else -> "Appearing"
        }
    )
}
AnimationSnippets.kt

הנפשה של כניסה ויציאה של ילדים

תוכן בתוך AnimatedVisibility (צאצאים ישירים או עקיפים) יכול להשתמש ב-modifier animateEnterExit כדי לציין התנהגות אנימציה שונה לכל אחד מהם. האפקט החזותי של כל אחד מהרכיבים האלה הוא שילוב של האנימציות שצוינו ברכיב ה-Composable של AnimatedVisibility ואנימציות הכניסה והיציאה של הרכיב עצמו.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) {
    // Fade in/out the background and the foreground.
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.DarkGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .animateEnterExit(
                    // Slide in/out the inner box.
                    enter = slideInVertically(),
                    exit = slideOutVertically()
                )
                .sizeIn(minWidth = 256.dp, minHeight = 64.dp)
                .background(Color.Red)
        ) {
            // Content of the notification…
        }
    }
}
AnimationSnippets.kt

במקרים מסוימים, יכול להיות שתרצו ש-AnimatedVisibility לא יחיל אנימציות בכלל, כדי שלכל ילד או ילדה תהיה אנימציה ייחודית משלהם ב-animateEnterExit. כדי לעשות את זה, מציינים את EnterTransition.None ו-ExitTransition.None ב-composable של AnimatedVisibility.

הוספת אנימציה בהתאמה אישית

אם אתם רוצים להוסיף אפקטים של אנימציה בהתאמה אישית מעבר לאנימציות המובנות של הכניסה והיציאה, אתם יכולים לגשת למכונה Transition הבסיסית באמצעות המאפיין transition בתוך פונקציית הלמבדה של התוכן של AnimatedVisibility. כל מצבי האנימציה שנוספו למופע של Transition יפעלו בו-זמנית עם האנימציות של הכניסה והיציאה של AnimatedVisibility. ‫AnimatedVisibility ממתין עד שכל האנימציות ב-Transition יסתיימו לפני הסרת התוכן. אם אנימציות היציאה נוצרו בנפרד מ-Transition (למשל באמצעות animate*AsState), AnimatedVisibility לא יוכל להביא אותן בחשבון, ולכן יכול להיות שהוא יסיר את ה-composable של התוכן לפני שהן יסתיימו.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) { // this: AnimatedVisibilityScope
    // Use AnimatedVisibilityScope#transition to add a custom animation
    // to the AnimatedVisibility.
    val background by transition.animateColor(label = "color") { state ->
        if (state == EnterExitState.Visible) Color.Blue else Color.Gray
    }
    Box(
        modifier = Modifier
            .size(128.dp)
            .background(background)
    )
}
AnimationSnippets.kt

למידע נוסף על שימוש ב-Transition לניהול אנימציות, ראו הנפשה של כמה מאפיינים בו-זמנית באמצעות מעבר.

הנפשה על סמך מצב היעד

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

Row {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Add")
    }
    AnimatedContent(
        targetState = count,
        label = "animated content"
    ) { targetCount ->
        // Make sure to use `targetCount`, not `count`.
        Text(text = "Count: $targetCount")
    }
}
AnimationSnippets.kt

הערה: תמיד צריך להשתמש בפרמטר lambda ולשקף אותו בתוכן. ה-API משתמש בערך הזה כמפתח לזיהוי התוכן שמוצג כרגע.

כברירת מחדל, התוכן הראשוני נעלם בהדרגה ואז תוכן היעד מופיע בהדרגה (ההתנהגות הזו נקראת התפוגגות). כדי להתאים אישית את התנהגות האנימציה, אפשר לציין אובייקט ContentTransform בפרמטר transitionSpec. אפשר ליצור מופע של ContentTransform על ידי שילוב של אובייקט EnterTransition עם אובייקט ExitTransition באמצעות הפונקציה with. אפשר להחיל את SizeTransform על האובייקט ContentTransform על ידי צירוף שלו באמצעות פונקציית האינפיקס using.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        // Compare the incoming number with the previous number.
        if (targetState > initialState) {
            // If the target number is larger, it slides up and fades in
            // while the initial (smaller) number slides up and fades out.
            slideInVertically { height -> height } + fadeIn() togetherWith
                slideOutVertically { height -> -height } + fadeOut()
        } else {
            // If the target number is smaller, it slides down and fades in
            // while the initial number slides down and fades out.
            slideInVertically { height -> -height } + fadeIn() togetherWith
                slideOutVertically { height -> height } + fadeOut()
        }.using(
            // Disable clipping since the faded slide-in/out should
            // be displayed out of bounds.
            SizeTransform(clip = false)
        )
    }, label = "animated content"
) { targetCount ->
    Text(text = "$targetCount")
}
AnimationSnippets.kt

‫EnterTransition מגדיר איך תוכן היעד אמור להופיע, ו-ExitTransition מגדיר איך התוכן הראשוני אמור להיעלם. בנוסף לכל הפונקציות של EnterTransition ו-ExitTransition שזמינות ב-AnimatedVisibility, ב-AnimatedContent יש גם את slideIntoContainer ו-slideOutOfContainer. אלה חלופות נוחות ל-slideInHorizontally/Vertically ול-slideOutHorizontally/Vertically שמחשבות את מרחק ההזזה על סמך הגדלים של התוכן הראשוני ותוכן היעד של תוכן ה-AnimatedContent.

‫SizeTransform מגדיר איך הגודל צריך להשתנות באנימציה בין התוכן הראשוני לתוכן היעד. כשיוצרים את האנימציה, יש גישה גם לגודל הראשוני וגם לגודל היעד. המאפיין SizeTransform גם קובע אם התוכן צריך להיחתך לגודל הרכיב במהלך אנימציות.

var expanded by remember { mutableStateOf(false) }
Surface(
    color = MaterialTheme.colorScheme.primary,
    onClick = { expanded = !expanded }
) {
    AnimatedContent(
        targetState = expanded,
        transitionSpec = {
            fadeIn(animationSpec = tween(150, 150)) togetherWith
                fadeOut(animationSpec = tween(150)) using
                SizeTransform { initialSize, targetSize ->
                    if (targetState) {
                        keyframes {
                            // Expand horizontally first.
                            IntSize(targetSize.width, initialSize.height) at 150
                            durationMillis = 300
                        }
                    } else {
                        keyframes {
                            // Shrink vertically first.
                            IntSize(initialSize.width, targetSize.height) at 150
                            durationMillis = 300
                        }
                    }
                }
        }, label = "size transform"
    ) { targetExpanded ->
        if (targetExpanded) {
            Expanded()
        } else {
            ContentIcon()
        }
    }
}
AnimationSnippets.kt

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

בדומה ל-AnimatedVisibility, המשנה animateEnterExit זמין בתוך פונקציית הלמבדה של התוכן של AnimatedContent. אפשר להשתמש בזה כדי להחיל את EnterAnimation ו-ExitAnimation על כל אחד מהצאצאים הישירים או העקיפים בנפרד.

הוספת אנימציה בהתאמה אישית

בדומה ל-AnimatedVisibility, השדה transition זמין בתוך פונקציית הלמבדה של התוכן ב-AnimatedContent. אפשר להשתמש בזה כדי ליצור אפקט אנימציה בהתאמה אישית שפועל בו-זמנית עם המעבר AnimatedContent. פרטים נוספים זמינים במאמר updateTransition.

אנימציה בין שתי פריסות

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

var currentPage by remember { mutableStateOf("A") }
Crossfade(targetState = currentPage, label = "cross fade") { screen ->
    when (screen) {
        "A" -> Text("Page A")
        "B" -> Text("Page B")
    }
}
AnimationSnippets.kt

מגדירי אנימציה מובנים

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

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

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

המשתנה animateContentSize יוצר אנימציה של שינוי גודל.

הערה: חשוב לשים לב לסדר שבו animateContentSize ממוקם בשרשרת של ה-modifier. כדי שהאנימציות יהיו חלקות, צריך להציב אותו לפני כל משנה גודל כמו size או defaultMinSize, כדי לוודא ש-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

אנימציות של פריטים ברשימה

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