En algunas situaciones, es necesario animar las imágenes en la pantalla. Esto resulta útil si quieres mostrar una animación de carga personalizada compuesta por varias imágenes o si quieres que un ícono se transforme en otro luego de que el usuario realice una acción. Android ofrece algunas opciones para animar elementos de diseño.
La primera opción es usar un elemento de diseño de animación. De este modo, puedes especificar varios archivos de elementos de diseño estáticos que se mostrarán de a uno para crear una animación. La segunda opción es utilizar un elemento de diseño vectorial animado, que te permite animar las propiedades de un elemento de diseño vectorial.
Cómo usar AnimationDrawable
Una forma de animar Drawables es cargar una serie de
recursos de elementos de diseño uno tras otro para crear una animación. Se trata de una animación tradicional, en el
sentido de que se crea con una secuencia de imágenes diferentes que se reproducen en orden, como un rollo de película.
La clase AnimationDrawable es la base de las animaciones de elementos de diseño.
Si bien puedes definir los fotogramas de una animación en tu código con la API de la clase AnimationDrawable, es más sencillo hacerlo con un
solo archivo XML que detalla los fotogramas que componen la animación. El archivo XML para este tipo
de animación debe encontrarse en el directorio res/drawable/ de
tu proyecto de Android. En este caso, las instrucciones son el orden y la duración de cada fotograma de
la animación.
El archivo XML consta de un elemento <animation-list> como nodo raíz y una
serie de nodos secundarios <item> que definen un fotograma cada uno: un recurso de elemento de diseño para
el fotograma y la duración de este. A continuación, se incluye un ejemplo de archivo XML para una animación de elementos de diseño:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>
Esta animación se ejecuta durante solo tres fotogramas. Si configuras el atributo
android:oneshot de la lista como true, la animación se reiniciará una sola vez y, luego, se detendrá y se mantendrá en el último
fotograma. Si lo configuras como false, la animación se repetirá de manera indefinida. Con este XML guardado como
rocket_thrust.xml en el directorio res/drawable/ del proyecto, se puede
agregar como imagen de fondo a una vista y, luego, se lo puede llamar para reproducirlo. A continuación, se muestra un ejemplo de actividad
en el que la animación se agrega a una ImageView y después se anima cuando
se toca la pantalla:
Kotlin
private lateinit var rocketAnimation: AnimationDrawable
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main)
val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
setBackgroundResource(R.drawable.rocket_thrust)
rocketAnimation = background as AnimationDrawable
}
rocketImage.setOnClickListener({ rocketAnimation.start() })
}
Java
AnimationDrawable rocketAnimation;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
rocketImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
rocketAnimation.start();
}
});
}
Es importante tener en cuenta que el método start() que llamamos en el
AnimationDrawable
no se puede llamar durante el método onCreate() de la actividad porque el
AnimationDrawable aún no está completamente adjuntado a la pantalla. Si deseas
reproducir la animación
de inmediato y sin necesidad de interacción, llámalo desde el método
onStart()
en tu actividad, al cual se llamará cuando Android muestre la vista en la pantalla.
Para obtener más información sobre la sintaxis XML y las etiquetas y los atributos disponibles, consulta Recursos de animación.
Cómo usar AnimatedVectorDrawable
Un elemento de diseño vectorial
es un tipo de elemento de diseño que se puede ajustar sin volverse borroso ni pixelado. La
clase AnimatedVectorDrawable
(y
AnimatedVectorDrawableCompat para la retrocompatibilidad) te permite animar las
propiedades de un elemento de diseño vectorial, por ejemplo, girarlo o cambiar los datos de trayectoria, para transformarlo en una
imagen distinta.
Por lo general, se definen los elementos de diseño vectoriales animados en tres archivos XML:
- Un elemento de diseño vectorial con el elemento
<vector>enres/drawable/ - Un elemento de diseño vectorial animado con el elemento
<animated-vector>enres/drawable/ - Uno o más animadores de objetos con el elemento
<objectAnimator>enres/animator/
Los elementos de diseño vectoriales animados pueden animar los atributos de los elementos <group> y
<path>. El elemento <group> define un conjunto de
trayectorias o subgrupos, y el elemento <path> define las trayectorias que se van a dibujar.
Cuando definas un elemento de diseño vectorial que quieras animar, usa el atributo
android:name para asignar un nombre único a grupos y trayectorias de modo que puedas consultarlos desde las definiciones de tu
animador. Por ejemplo:
res/drawable/vectordrawable.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
<group
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" >
<path
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
</group>
</vector>
La definición del elemento de diseño vectorial animado hace referencia a los grupos y las trayectorias del elemento de diseño vectorial por sus nombres:
res/drawable/animatorvectordrawable.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable" >
<target
android:name="rotationGroup"
android:animation="@animator/rotation" />
<target
android:name="v"
android:animation="@animator/path_morph" />
</animated-vector>
Las definiciones de la animación representan objetos
ObjectAnimator o AnimatorSet. El primer animador de este ejemplo gira el grupo
de destino 360 grados:
res/animator/rotation.xml
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
El segundo animador de este ejemplo transforma la trayectoria del elemento de diseño vectorial de una forma a otra. Ambas trayectorias deben ser compatibles para la transformación: deben tener el mismo número de comandos y de parámetros para cada comando.
res/animator/path_morph.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType" />
</set>
A continuación, se muestra el AnimatedVectorDrawable resultante:
Para obtener más información, consulta la referencia de la API sobre
AnimatedVectorDrawable.