Android Academy · Lezione

Animazioni e transizioni

Animi le view con ViewPropertyAnimator, ObjectAnimator e AnimatorSet. Aggiunga transizioni tra fragment, animazioni di elementi condivisi e fisica a molla.

Animazioni e transizioni è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 4 di 5. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 5 lezioni in totale.

Perché le animazioni sono importanti

Le animazioni rendono le app più vive e reattive. Consentono di:

Fornire un feedback visivo per le azioni dell'utente
Mostrare il rapporto tra le schermate
Rendere meno bruschi i cambiamenti dei dati
Aiutare gli utenti a capire cosa è cambiato e perché

La regola fondamentale è che le animazioni devono essere al servizio della UI, non distrarla. Le mantenga sotto i 300 ms.

ViewPropertyAnimator — animazioni rapide

Il modo più semplice per animare una view. Concateni le chiamate e chiami 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 anima qualsiasi proprietà di qualsiasi oggetto tramite il nome. È più flessibile di 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 — sequenziale e parallelo

AnimatorSet coordina più animator affinché vengano eseguiti insieme o uno dopo l'altro:

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()
}

Interpolator

Gli interpolator controllano la velocità di cambiamento di un'animazione. Alcuni comuni:

LinearInterpolator — velocità costante
AccelerateInterpolator — parte lentamente e accelera (uscite)
DecelerateInterpolator — parte rapidamente e rallenta (ingressi)
AccelerateDecelerateInterpolator — lento → veloce → lento (predefinito)
OvershootInterpolator — supera il bersaglio e torna indietro
BounceInterpolator — rimbalza alla fine

TransitionManager — modifiche al layout

Animi automaticamente le modifiche al layout chiamando TransitionManager.beginDelayedTransition() prima di modificare la visibilità o le proprietà del layout:

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
}

Transizioni tra Fragment

Aggiunga animazioni di ingresso e uscita alle transazioni dei fragment:

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)

Transizioni di elementi condivisi

Condivida una view tra due schermate, in modo che si animi spostandosi da una posizione all'altra, ad esempio un'immagine in miniatura che si espande fino a diventare un'immagine completa:

// 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

Animazione a molla

Le animazioni a molla risultano più naturali di quelle lineari o con decelerazione perché simulano il comportamento fisico di una molla:

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 — animazioni complesse

Lottie riproduce animazioni di After Effects esportate come JSON. È perfetto per indicatori di caricamento, onboarding e stati vuoti:

// 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()

Buone pratiche per le animazioni

Linee guida per animazioni fluide e accessibili:

Durata di 150–300 ms per la maggior parte delle animazioni UI
Rispetti sempre AnimatorUtils.areAnimatorsEnabled() o Settings.System.ANIMATOR_DURATION_SCALE
Gli utenti con disturbi vestibolari potrebbero disabilitare le animazioni: controlli l'impostazione di accessibilità Reduce Motion
Non animi ciò che non ne ha bisogno: meno è meglio
Esegua test su dispositivi meno potenti, perché le animazioni possono causare cali di frame

Verifica rapida

Quale interpolator è più adatto per fare in modo che un elemento che entra nello schermo deceleri e si stabilizzi?

Riepilogo: animazioni e transizioni

Dia vita alla Sua app con animazioni fluide:

view.animate() — alpha, traslazione, scala e rotazione rapide
ObjectAnimator — qualsiasi proprietà, controllo dettagliato
AnimatorSet — coordina più animatori (con/dopo)
TransitionManager.beginDelayedTransition() — anima automaticamente le modifiche al layout
Transizioni di elementi condivisi — continuità fluida tra le schermate
Lottie — animazioni JSON complesse da After Effects

Prossimo argomento: navigazione inferiore e schede per app con più sezioni.

Domande Frequenti

La lezione «Animazioni e transizioni» è gratuita?

Sì — il testo completo di «Animazioni e transizioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 5 lezioni in totale.

Cosa imparerò in «Animazioni e transizioni»?

Animi le view con ViewPropertyAnimator, ObjectAnimator e AnimatorSet. Aggiunga transizioni tra fragment, animazioni di elementi condivisi e fisica a molla. Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 5.

Quanto tempo richiede la lezione «Animazioni e transizioni»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Android Academy