Android Academy · Lekcja

Animacje i przejścia

Animuj widoki za pomocą ViewPropertyAnimator, ObjectAnimator i AnimatorSet. Dodaj przejścia fragmentów, animacje wspólnych elementów i fizykę sprężynową.

Animacje i przejścia to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 4 z 5. 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 5 lekcji w sumie.

Dlaczego animacje mają znaczenie

Animacje sprawiają, że aplikacje wydają się żywe i responsywne. Animacje:

Zapewniają wizualną informację zwrotną o działaniach użytkownika
Pokazują, jak ekrany są ze sobą powiązane
Sprawiają, że zmiany danych są mniej gwałtowne
Pomagają użytkownikom zrozumieć, co się zmieniło i dlaczego

Najważniejsza zasada: animacje powinny służyć interfejsowi, a nie odciągać od niego uwagi. Ich czas trwania powinien być krótszy niż 300 ms.

ViewPropertyAnimator — szybkie animacje

To najprostszy sposób animowania widoku. Łącz wywołania w łańcuch i wywołaj start():

// Fade a view out:
binding.tvMessage
    .animate()
    .alpha(0f)
    .setDuration(300)
    .withEndAction { binding.tvMessage.visibility = View.GONE }
    .start()

// Slide in from bottom:
binding.cardView.translationY = 200f
binding.cardView.alpha = 0f
binding.cardView
    .animate()
    .translationY(0f)
    .alpha(1f)
    .setDuration(250)
    .setInterpolator(DecelerateInterpolator())
    .start()

ObjectAnimator

ObjectAnimator animuje dowolną właściwość dowolnego obiektu na podstawie jej nazwy. Jest bardziej elastyczny niż ViewPropertyAnimator:

// Rotate an image:
val rotateAnimator = ObjectAnimator.ofFloat(
    binding.ivLogo,
    "rotation",
    0f, 360f
).apply {
    duration = 600
    repeatCount = ObjectAnimator.INFINITE
    interpolator = LinearInterpolator()
    start()
}

// Stop it:
rotateAnimator.cancel()

AnimatorSet — sekwencyjnie i równolegle

AnimatorSet koordynuje wiele animatorów uruchamianych jednocześnie lub jeden po drugim:

val fadeIn  = ObjectAnimator.ofFloat(binding.card, "alpha", 0f, 1f).setDuration(300)
val scaleX  = ObjectAnimator.ofFloat(binding.card, "scaleX", 0.8f, 1f).setDuration(300)
val scaleY  = ObjectAnimator.ofFloat(binding.card, "scaleY", 0.8f, 1f).setDuration(300)
val slideUp = ObjectAnimator.ofFloat(binding.card, "translationY", 100f, 0f).setDuration(300)

AnimatorSet().apply {
    // Run fadeIn + scaleX + scaleY together, then slideUp
    play(fadeIn).with(scaleX).with(scaleY)
    play(slideUp).after(fadeIn)
    interpolator = DecelerateInterpolator()
    start()
}

Interpolatory

Interpolatory sterują tempem zmian podczas animacji. Typowe interpolatory:

LinearInterpolator — stała prędkość
AccelerateInterpolator — zaczyna powoli i przyspiesza (wyjścia)
DecelerateInterpolator — zaczyna szybko i zwalnia (wejścia)
AccelerateDecelerateInterpolator — powoli → szybko → powoli (domyślny)
OvershootInterpolator — przekracza położenie docelowe i odbija się z powrotem
BounceInterpolator — odbija się na końcu

TransitionManager — zmiany układu

Automatycznie animuj zmiany układu, wywołując TransitionManager.beginDelayedTransition() przed zmianą widoczności lub właściwości układu:

binding.btnToggle.setOnClickListener {
    // Tell the framework to animate the next layout change
    TransitionManager.beginDelayedTransition(
        binding.root,
        ChangeBounds().apply { duration = 300 }
    )

    // Now change visibility/size — Android animates the difference automatically
    binding.expandedSection.visibility =
        if (binding.expandedSection.isVisible) View.GONE else View.VISIBLE
}

Przejścia fragmentów

Dodaj animacje wejścia i wyjścia do transakcji fragmentów:

supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,   // enterAnim
        R.anim.slide_out_left,   // exitAnim
        R.anim.slide_in_left,    // popEnterAnim
        R.anim.slide_out_right   // popExitAnim
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// Or use MaterialSharedAxis for a modern, Material Motion feel:
val forward = MaterialSharedAxis(MaterialSharedAxis.X, true)
exitTransition = forward
enterTransition = MaterialSharedAxis(MaterialSharedAxis.X, true)

Przejścia współdzielonych elementów

Współdziel widok między dwoma ekranami, aby animował się z jednej pozycji do drugiej (np. miniatura rozwijająca się do pełnego obrazu):

// In ListFragment:
binding.ivThumbnail.transitionName = "hero_image_${item.id}"

val extras = FragmentNavigatorExtras(
    binding.ivThumbnail to "hero_image_${item.id}"
)
findNavController().navigate(R.id.action_list_to_detail, null, null, extras)

// In DetailFragment:
sharedElementEnterTransition = TransitionInflater
    .from(requireContext())
    .inflateTransition(android.R.transition.move)

// ImageView in detail layout must have the same transitionName

Animacja sprężysta

Animacje sprężyste wydają się bardziej naturalne niż liniowe lub zwalniające, ponieważ symulują fizykę sprężyny:

implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'

// Spring animation on a button press:
val spring = SpringAnimation(binding.fabAdd, DynamicAnimation.SCALE_X, 1f).apply {
    spring = SpringForce(1f).apply {
        stiffness = SpringForce.STIFFNESS_MEDIUM
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY
    }
}

binding.fabAdd.setOnClickListener {
    binding.fabAdd.scaleX = 0.8f
    spring.start()
}

Lottie — złożone animacje

Lottie odtwarza animacje z After Effects wyeksportowane w formacie JSON. Doskonale sprawdza się w przypadku wskaźników ładowania, ekranów wprowadzających i pustych stanów:

// app/build.gradle:
// implementation 'com.airbnb.android:lottie:6.4.0'

<!-- In layout XML -->
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

// Control in code:
binding.lottieView.playAnimation()
binding.lottieView.pauseAnimation()

Najlepsze praktyki dotyczące animacji

Wskazówki dotyczące płynnych i dostępnych animacji:

W przypadku większości animacji interfejsu stosuj czas trwania 150–300 ms
Zawsze respektuj AnimatorUtils.areAnimatorsEnabled() lub Settings.System.ANIMATOR_DURATION_SCALE
Użytkownicy z zaburzeniami przedsionkowymi mogą wyłączać animacje — sprawdzaj ustawienie dostępności Reduce Motion
Nie animuj elementów, które tego nie wymagają — mniej znaczy więcej
Testuj na słabszych urządzeniach (animacje mogą powodować gubienie klatek)

Szybkie sprawdzenie

Jaki interpolator najlepiej sprawdzi się w przypadku elementu wchodzącego na ekran, aby sprawiał wrażenie zwalniającego i płynnie zatrzymującego się?

Podsumowanie: animacje i przejścia

Dodaj swojej aplikacji życia dzięki płynnym animacjom:

view.animate() — szybkie animowanie przezroczystości, przesunięcia, skalowania i obrotu
ObjectAnimator — dowolna właściwość i szczegółowa kontrola
AnimatorSet — koordynowanie wielu animatorów (równocześnie lub sekwencyjnie)
TransitionManager.beginDelayedTransition() — automatyczne animowanie zmian układu
Shared element transitions — płynne zachowanie ciągłości między ekranami
Lottie — złożone animacje JSON z After Effects

Następnie: dolna nawigacja i karty w aplikacjach z wieloma sekcjami.

Często zadawane pytania

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

Tak — pełny tekst „Animacje 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 5 lekcji w sumie.

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

Animuj widoki za pomocą ViewPropertyAnimator, ObjectAnimator i AnimatorSet. Dodaj przejścia fragmentów, animacje wspólnych elementów i fizykę sprężynową. Ć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 4 z 5.

Ile czasu zajmuje lekcja „Animacje 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