updateTransition dla skoordynowanego ruchu
Animuj wiele wartości na podstawie jednego stanu
updateTransition dla skoordynowanego ruchu to bezpłatna lekcja Jetpack Compose 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 Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Animowanie wielu wartości jednocześnie
Gdy kilka właściwości powinno zmienić się wraz ze zmianą jednego stanu, warto je zsynchronizować. updateTransition koordynuje wiele animacji na podstawie jednego stanu. ✨
Rozpoczęcie od stanu
Utwórz przejście, przekazując bieżący stan do updateTransition. Compose będzie go obserwować i uruchomi każdą animację podrzędną po zmianie stanu.
val transition = updateTransition(targetState = expanded)Wyprowadzanie animowanych wartości
Poproś przejście o każdą wartość za pomocą animateDp, animateColor i podobnych funkcji. Przekazujesz lambdę mapującą każdy stan na jego wartość docelową.
val size by transition.animateDp { if (it) 200.dp else 80.dp }Wiele wartości, jedno źródło
Dodaj dowolną liczbę child animations do tego samego przejścia. Rozmiar, kolor i promień zaokrąglenia zmienią się jednocześnie na podstawie jednej wartości logicznej.
val corner by transition.animateDp { if (it) 0.dp else 24.dp }Idealna synchronizacja
Ponieważ korzystają z jednego przejścia, wartości pozostają in lockstep. Nie ma ryzyka, że rozmiar zakończy animację przed kolorem, co może się zdarzyć przy osobnych wywołaniach animateAsState.
Używanie wartości w modyfikatorach
Odczytuj każdą animowaną wartość tak jak zwykły stan i stosuj ją. Cały element płynnie zmienia kształt, gdy przejście jest wykonywane w każdej klatce.
Box(Modifier.size(size).clip(RoundedCornerShape(corner)))Czas dla poszczególnych wartości
Każda animacja podrzędna może mieć własny transitionSpec. Spraw, aby kolor szybko przeskakiwał, a rozmiar powoli się wygładzał — wszystko nadal będzie wyzwalane tą samą zmianą stanu.
transition.animateDp(transitionSpec = { tween(600) }) { ... }Więcej niż dwa stany
Stan może być typu enum, a nie tylko wartością logiczną. Każdy przypadek można przypisać do celu, a przejście będzie animować zmianę między dowolnymi z nich.
enum class BoxState { Collapsed, Half, Expanded }Sprawdzanie bieżącego i docelowego stanu
Przejście udostępnia wartości currentState i targetState. Można sprawdzić, czy ruch nadal trwa, czy został już zakończony w punkcie docelowym.
Kiedy warto po to sięgnąć
Wybierz updateTransition, gdy jedno zdarzenie ma sterować zestawem skoordynowanych zmian, na przykład rozwijaniem karty, któremu jednocześnie towarzyszy zmiana jej koloru i wysokości. 🎬
Lżej niż wiele wywołań
Grupowanie animacji w jednym obiekcie transition jest przejrzystsze i łatwiejsze do zrozumienia niż zarządzanie kilkoma niezależnymi wartościami animate*AsState.
Szybkie sprawdzenie
Jaka jest główna zaleta updateTransition w porównaniu z oddzielnymi wywołaniami animate*AsState?
Podsumowanie: jeden stan, wiele ruchów
Poznałeś(-aś) updateTransition: wyprowadzanie kilku animowanych wartości z jednego stanu, dzięki czemu poruszają się one idealnie synchronicznie, a każda z nich ma własny czas trwania. 🎉
Ucz się Kotlin dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „updateTransition dla skoordynowanego ruchu” jest bezpłatna?
Tak — pełny tekst „updateTransition dla skoordynowanego ruchu” 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 Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „updateTransition dla skoordynowanego ruchu”?
Animuj wiele wartości na podstawie jednego stanu Ćwiczysz Jetpack Compose 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ąć Jetpack Compose Academy?
Nie wymagamy żadnego doświadczenia. Jetpack Compose 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 „updateTransition dla skoordynowanego ruchu”?
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 Jetpack Compose Academy?
Tak. Każda lekcja Jetpack Compose 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
- animate*AsState dla prostych interpolacji
- AnimatedVisibility i Crossfade
- updateTransition dla skoordynowanego ruchu
- Animacje sterowane gestami