Android Academy · Lekcja

AnimatedVisibility i przejścia

Animuj pokazywanie i ukrywanie treści

AnimatedVisibility i przejścia to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Animowanie pojawiania się

Nagłe pokazywanie i ukrywanie treści może sprawiać nieprzyjemne wrażenie. Compose udostępnia AnimatedVisibility, który animuje element composable podczas jego pojawiania się i opuszczania układu.

Wystarczy opakować w niego treść i sterować widocznością za pomocą wartości logicznej. Gdy ta wartość się zmieni, Compose odtworzy animację wejścia lub wyjścia zamiast natychmiastowego pojawienia się albo zniknięcia.

@Composable
fun Greeting(show: Boolean) {
    AnimatedVisibility(visible = show) {
        Text("Welcome aboard!")
    }
}

Przejścia wejścia i wyjścia

Parametry enter i exit pozwalają dokładnie określić sposób pojawiania się i znikania treści. Typowe elementy składowe to fadeIn/fadeOut, slideIn/slideOut oraz expandVertically/shrinkVertically.

Można je łączyć operatorem +, aby uruchamiać kilka animacji jednocześnie.

@Composable
fun Toast(show: Boolean) {
    AnimatedVisibility(
        visible = show,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Text("Item added to cart")
    }
}

Dostosowywanie specyfikacji przejścia

Każde przejście wejścia i wyjścia przyjmuje parametr animationSpec, dzięki czemu można sterować czasem trwania i easingiem tak samo jak w przypadku animate*AsState.

W tym przykładzie treść pojawia się przez 300 ms, a znika szybciej — przez 150 ms. To częsty wzorzec, dzięki któremu zamykanie wydaje się dynamiczne.

AnimatedVisibility(
    visible = show,
    enter = fadeIn(animationSpec = tween(300)),
    exit = fadeOut(animationSpec = tween(150))
) {
    Card { Text("Details") }
}

Rozwijanie i zwijanie

W sekcjach, które ujawniają dodatkową treść, expandVertically i shrinkVertically animują wysokość, płynnie odsuwając otaczającą treść.

To idealne rozwiązanie dla zwijanych paneli, elementów FAQ lub sekcji „pokaż więcej”.

@Composable
fun Details(expanded: Boolean) {
    AnimatedVisibility(
        visible = expanded,
        enter = expandVertically() + fadeIn(),
        exit = shrinkVertically() + fadeOut()
    ) {
        Text("Extra details revealed when expanded.")
    }
}

updateTransition: jeden stan, wiele wartości

Gdy kilka właściwości powinno zmieniać się razem na podstawie jednego stanu, updateTransition koordynuje te zmiany. Tworzy obiekt Transition, którego elementy podrzędne animują się synchronicznie.

Należy zdefiniować stan, a następnie użyć animateColor, animateDp itd. dla każdej właściwości jako funkcji tego stanu.

enum class BoxState { Collapsed, Expanded }

@Composable
fun MorphingBox(state: BoxState) {
    val transition = updateTransition(state, label = "box")
    val size by transition.animateDp(label = "size") {
        if (it == BoxState.Expanded) 200.dp else 100.dp
    }
    val color by transition.animateColor(label = "color") {
        if (it == BoxState.Expanded) Color.Magenta else Color.Cyan
    }
    Box(Modifier.size(size).background(color))
}

Czas dla poszczególnych właściwości w przejściu

Jedną z największych zalet updateTransition jest możliwość określenia czasu dla każdej właściwości. Każdy element podrzędny animate* może dostarczyć własny transitionSpec, dzięki czemu kolor i rozmiar mogą zmieniać się z różną szybkością, pozostając skoordynowane przez ten sam stan.

val size by transition.animateDp(
    transitionSpec = { tween(durationMillis = 300) },
    label = "size"
) { if (it == BoxState.Expanded) 200.dp else 100.dp }

val corner by transition.animateDp(
    transitionSpec = { tween(durationMillis = 600) },
    label = "corner"
) { if (it == BoxState.Expanded) 0.dp else 24.dp }

AnimatedContent: zamiana treści

Gdy zmienia się sama treść, a nie tylko jej widoczność, należy użyć AnimatedContent. Animuje on przejście między starą a nową treścią, domyślnie stosując płynne przenikanie.

To idealne rozwiązanie między innymi dla licznika, wskaźnika kroku lub przełączania między stanem ładowania a stanem załadowanym.

@Composable
fun Counter(count: Int) {
    AnimatedContent(
        targetState = count,
        label = "counter"
    ) { value ->
        Text("$value", style = MaterialTheme.typography.headlineLarge)
    }
}

Niestandardowe przejścia AnimatedContent

Sposób, w jaki AnimatedContent zamienia treść, można dostosować za pomocą transitionSpec. Klasycznym rozwiązaniem dla licznika jest przesuwanie nowej wartości w górę, podczas gdy stara odsuwa się, w połączeniu z zanikiem.

Słowo kluczowe using dołącza SizeTransform, dzięki czemu kontener również płynnie zmienia rozmiar.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        (slideInVertically { it } + fadeIn()) togetherWith
            (slideOutVertically { -it } + fadeOut())
    },
    label = "counter"
) { value -> Text("$value") }

Animowanie elementów listy

Wewnątrz LazyColumn elementy dodawane, usuwane lub przenoszone mogą płynnie zajmować nowe miejsce dzięki użyciu Modifier.animateItem() w treści każdego elementu.

Zapewnia to płynne zmienianie kolejności i wstawianie bez ręcznego śledzenia zmian.

LazyColumn {
    items(tasks, key = { it.id }) { task ->
        Text(
            task.title,
            modifier = Modifier.animateItem()
        )
    }
}

Crossfade dla całych ekranów

Crossfade to prosta, wyspecjalizowana funkcja pomocnicza, która wykonuje płynne przejście między dwoma stanami. Świetnie sprawdza się przy przełączaniu całych ekranów lub głównych stanów interfejsu.

Należy przekazać bieżący stan i lambdę treści. Gdy stan się zmieni, Crossfade wygasi starą treść i wyświetli nową.

@Composable
fun ScreenHost(screen: Screen) {
    Crossfade(targetState = screen, label = "screen") { current ->
        when (current) {
            Screen.Home -> HomeScreen()
            Screen.Profile -> ProfileScreen()
        }
    }
}

Koordynowanie elementów podrzędnych wejścia

Wewnątrz bloku AnimatedVisibility dostępny jest AnimatedVisibilityScope, który udostępnia Modifier.animateEnterExit(). Pozwala to poszczególnym elementom podrzędnym animować własne wejście i wyjście niezależnie od przejścia rodzica.

Na przykład panel może wsuwać się, podczas gdy jego tytuł pojawia się z niewielkim opóźnieniem, tworząc efekt warstwowy.

AnimatedVisibility(visible = show, enter = slideInVertically()) {
    Column {
        Text(
            "Title",
            modifier = Modifier.animateEnterExit(
                enter = fadeIn(tween(delayMillis = 100))
            )
        )
        Text("Body")
    }
}

Szybkie sprawdzenie

Chce Pan/Pani animować zamianę liczby 3 na liczbę 4, wygaszając i wsuwając nową wartość. Który interfejs API będzie najlepszy?

Podsumowanie: widoczność i przejścia

Potrafi już Pan/Pani animować pojawianie się, znikanie i zmiany treści:

AnimatedVisibility animuje wejście i wyjście za pomocą fadeIn/Out, slideIn/Out oraz expand/shrink, które można łączyć operatorem +.
updateTransition koordynuje wiele wartości na podstawie jednego stanu, a każda z nich może mieć własną specyfikację.
AnimatedContent animuje zamianę różnych treści; Crossfade to prosty wariant oparty na zanikaniu.
Modifier.animateItem() animuje dodawanie elementów listy i zmianę ich kolejności.

Następnie: gesty i oparte na fizyce animacje sprężynowe zapewniające naturalny, interaktywny ruch.

Często zadawane pytania

Czy lekcja „AnimatedVisibility i przejścia” jest bezpłatna?

Tak — pełny tekst „AnimatedVisibility i przejścia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „AnimatedVisibility i przejścia”?

Animuj pokazywanie i ukrywanie treści Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „AnimatedVisibility i przejścia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Android Academy