Android Academy · Lección

Animaciones y transiciones

Anime vistas con ViewPropertyAnimator, ObjectAnimator y AnimatorSet. Añada transiciones de fragmentos, animaciones de elementos compartidos y física de resortes.

Lección 4 de 513 pasos

Animaciones y transiciones es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 4 de 5. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 5 lecciones en total.

Por qué son importantes las animaciones

Las animaciones hacen que las aplicaciones parezcan vivas y respondan mejor. Permiten:

  • Proporcionar confirmación visual de las acciones del usuario
  • Mostrar cómo se relacionan entre sí las pantallas
  • Hacer que los cambios de datos resulten menos bruscos
  • Ayudar a los usuarios a entender qué ha cambiado y por qué

La regla principal es que las animaciones deben estar al servicio de la interfaz, no distraer de ella. Manténgalas por debajo de 300 ms.

ViewPropertyAnimator — animaciones rápidas

Es la forma más sencilla de animar una vista. Encadene las llamadas y llame a 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 cualquier propiedad de cualquier objeto mediante su nombre. Es más flexible que 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 — secuencial y paralelo

AnimatorSet coordina varios animadores para que se ejecuten juntos o uno después de otro:

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

Interpoladores

Los interpoladores controlan la velocidad de cambio de una animación. Algunos habituales son:

  • LinearInterpolator — velocidad constante
  • AccelerateInterpolator — empieza despacio y acelera (salidas)
  • DecelerateInterpolator — empieza rápido y desacelera (entradas)
  • AccelerateDecelerateInterpolator — despacio → rápido → despacio (predeterminado)
  • OvershootInterpolator — sobrepasa el objetivo y rebota hacia atrás
  • BounceInterpolator — rebota al final

TransitionManager — cambios de layout

Anime automáticamente los cambios de layout llamando a TransitionManager.beginDelayedTransition() antes de cambiar la visibilidad o las propiedades 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
}

Transiciones de Fragment

Añada animaciones de entrada y salida a las transacciones de fragmentos:

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)

Transiciones de elementos compartidos

Comparta una vista entre dos pantallas para que se anime de una posición a otra (por ejemplo, una miniatura que se expande hasta convertirse en una imagen 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

Animación de resorte

Las animaciones de resorte parecen más naturales que las lineales o las de desaceleración porque simulan la física de un resorte:

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 — animaciones complejas

Lottie reproduce animaciones de After Effects exportadas como JSON. Es perfecto para indicadores de carga, introducciones y estados vacíos:

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

Prácticas recomendadas para animaciones

Directrices para crear animaciones fluidas y accesibles:

  • Use una duración de 150–300 ms para la mayoría de las animaciones de la interfaz
  • Respete siempre AnimatorUtils.areAnimatorsEnabled() o Settings.System.ANIMATOR_DURATION_SCALE
  • Los usuarios con trastornos vestibulares pueden desactivar las animaciones; compruebe el ajuste de accesibilidad Reduce Motion
  • No anime elementos que no lo necesiten; menos es más
  • Pruebe en dispositivos de gama baja (las animaciones pueden provocar pérdida de fotogramas)

Comprobación rápida

¿Qué interpolador es más adecuado para que un elemento que entra en la pantalla parezca que desacelera y se detiene suavemente?

Resumen: animaciones y transiciones

Dé vida a su aplicación con animaciones fluidas:

  • view.animate() — cambios rápidos de alfa, traslación, escala y rotación
  • ObjectAnimator — cualquier propiedad, con un control detallado
  • AnimatorSet — coordina varios animadores (con/con posterioridad)
  • TransitionManager.beginDelayedTransition() — anima automáticamente los cambios de diseño
  • Transiciones de elementos compartidos — continuidad fluida entre pantallas
  • Lottie — animaciones JSON complejas de After Effects

A continuación: navegación inferior y pestañas para aplicaciones con varias secciones.

Gratis para empezar

Aprende Kotlin con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
36
Lecciones
152

Preguntas frecuentes

¿La lección «Animaciones y transiciones» es gratis?

Sí — el texto completo de «Animaciones y transiciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 5 lecciones en total.

¿Qué aprenderé en «Animaciones y transiciones»?

Anime vistas con ViewPropertyAnimator, ObjectAnimator y AnimatorSet. Añada transiciones de fragmentos, animaciones de elementos compartidos y física de resortes. Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 5.

¿Cuánto tiempo toma la lección «Animaciones y transiciones»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Fundamentos de Material Design
  2. Temas y estilos
  3. Vistas personalizadas
  4. Animaciones y transiciones
  5. Navegación inferior y pestañas
← Volver a Android Academy