Skip to content

Most visited

Recently visited

navigation

Definir animaciones personalizadas

Las animaciones en Material Design proporcionan a los usuarios comentarios sobre sus acciones y continuidad visual a medida que los usuarios interactúan con su aplicación. El tema material proporciona algunas animaciones predeterminadas para botones y transiciones de actividades; Android 5.0 (API nivel 21) y superior te permite personalizar estas animaciones y crear unas nuevas:

Personalizar la respuesta táctil

La respuesta táctil en Material Design proporciona una confirmación visual instantánea en el punto de contacto cuando los usuarios interactúan con los elementos de la IU. Las animaciones predeterminadas de la respuesta táctil para botones usan la nueva clase RippleDrawable, que realiza una transición entre diferentes estados con un efecto de ondas.

En la mayoría de los casos, debes aplicar esta funcionalidad en la vista XML especificando el fondo de la vista como:

Nota: selectableItemBackgroundBorderless es un nuevo atributo introducido en la API de nivel 21.

Alternativamente, puedes definir un RippleDrawable como un recurso XML que usa el elemento ripple.

Puedes asignar un color a los objetos RippleDrawable. Para cambiar el color predeterminado de la respuesta táctil, usa el atributo android:colorControlHighlight del tema.

Para más información, consulta la referencia de la API para la clase RippleDrawable.

Usar el efecto revelar

Las animaciones del efecto revelar proporcionan a los usuarios una continuidad visual cuando muestras u ocultas un grupo de elementos de la IU. El método ViewAnimationUtils.createCircularReveal() te permite animar un círculo de recorte para revelar u ocultar una vista.

Para revelar una vista previamente invisible usando este efecto:

// previously invisible view
View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());

// create the animator for this view (the start radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);

// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();

Para ocultar una vista previamente invisible usando este efecto:

// previously visible view
final View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();

// create the animation (the final radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);

// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
    }
});

// start the animation
anim.start();

Personalizar transiciones de actividades

Figura 1: una transición con elementos compartidos.

Para volver a reproducir la película, haz clic en la pantalla del dispositivo.

Las transiciones de actividades en las aplicaciones de Material Design proporcionan conexiones visuales entre diferentes estados mediante el movimiento y las transformaciones entre elementos comunes. Puedes especificar las animaciones personalizadas para entrar y salir de las transiciones y para las transiciones de elementos compartidos entre actividades.

Android 5.0 (API nivel 21) admite estas transiciones de entrada y salida:

Toda transición que extiende la clase Visibility se admite como una transición de entrada o salida. Para más información, consulta la referencia de la API para la clase Transition.

Android 5.0 (API nivel 21) también admite estas transiciones de elementos compartidos:

Cuando habilitas las transiciones de actividades en tu aplicación, la transición entre difuminados predeterminada se activa entre las actividades que ingresan y salen.

  Figura 2: una transición de escena con un elemento compartido.

Especificar transiciones personalizadas

Primero, habilita las transiciones de contenido de la ventana con el atributo android:windowContentTransitions cuando definas un estilo que herede del tema material. También puedes especificar transiciones de entrada, salida y elementos compartidos en tu definición de estilo:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowContentTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

La transición change_image_transform en este ejemplo se define en la siguiente forma:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

El elemento changeImageTransform corresponde a la clase ChangeImageTransform. Para más información, consulta la referencia de la API para Transition.

Para habilitar las transiciones del contenido de las ventanas en tu código, llama al método Window.requestFeature():

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

Para especificar transiciones en tu código, llama a estos métodos con un objeto Transition:

Los métodos setExitTransition() y setSharedElementExitTransition() definen la transición de salida para la actividad que realiza la llamada. Los métodos setEnterTransition() y setSharedElementEnterTransition() definen la transición de entrada para la actividad invocada.

Para obtener el efecto completo de una transición, debes habilitar las transiciones de contenido de las ventanas tanto para las actividades que realizan la llamada como para aquellas que son invocadas. De lo contrario, la actividad que realiza la llamada comenzará la transición de salida, pero luego observarás una ventana de transición (como escalar o difuminar).

Para comenzar una transición de entrada lo antes posible, usa el método Window.setAllowEnterTransitionOverlap() en la actividad invocada. Esto te permite tener transiciones de entrada más intensas.

Iniciar una actividad mediante el uso de transiciones

Si permites transiciones y estableces una transición de salida para una actividad, la transición se activa cuando inicias otra actividad, como alguna de las siguientes:

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Si estableciste una transición de entrada para la segunda actividad, la transición también se activa cuando se inicia la actividad. Para deshabilitar las transiciones cuando inicias otra actividad, proporciona una agrupación de opciones null.

Iniciar una actividad con un elemento compartido

Para realizar una animación de transiciones de pantallas entre dos actividades que tienen un elemento compartido:

  1. Habilita las transiciones de contenido de ventanas en tu tema.
  2. Especifica una transición de elementos compartidos en tu estilo.
  3. Define tu transición como un recurso XML.
  4. Asigna un nombre en común para los elementos compartidos en ambos diseños con el atributo android:transitionName.
  5. Usa el método ActivityOptions.makeSceneTransitionAnimation().
// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());
    }
});

Para las vistas dinámicas compartidas que generas en tu código, usa el método View.setTransitionName() para especificar un nombre de elemento en común en ambas actividades.

Para invertir la animación de transición de escenas cuando terminas la segunda actividad, llama al método Activity.finishAfterTransition() en lugar del Activity.finish().

Iniciar una actividad con múltiples elementos compartidos

Para realizar una animación de transición de escenas entre dos actividades que tienen más de un elemento compartido, define los elementos compartidos en ambos diseños con el atributo android:transitionName (o usa el método View.setTransitionName() en ambas actividades) y crea un objeto ActivityOptions como se indica a continuación:

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

Usar movimiento curvo

Las animaciones en Material Design se basan en curvas para la interpolación de tiempo y los modelos de movimiento espacial. Con Android 5.0 (API nivel 21) y superior, puedes definir las curvas de sincronización personalizadas y los modelos de movimientos curvos para las animaciones.

La clase PathInterpolator es un nuevo interpolador que se basa en una curva Bézier o un objeto Path. Este interpolador especifica una curva de movimiento en un cuadrado de 1x1, con puntos de anclaje a (0,0) y (1,1), y puntos de control según lo especificado en los argumentos del constructor. También puedes definir un interpolador para la ruta de acceso como un recurso XML:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.4"
    android:controlY1="0"
    android:controlX2="1"
    android:controlY2="1"/>

El sistema proporciona recursos XML para las tres curvas básicas en la especificación de Material Design:

Puedes pasar un objeto PathInterpolator al método Animator.setInterpolator().

La clase ObjectAnimator tiene nuevos constructores que te permiten animar coordenadas junto a una ruta de acceso, usando dos o más propiedades a la vez. Por ejemplo, el siguiente animador usa un objetoPath para animar las propiedades X e Y de una vista:

ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

Animar cambios de estados de las vistas

La clase StateListAnimator te permite definir los animadores que se ejecutan cuando cambia el estado de una vista. En el siguiente ejemplo, se muestra cómo definir un StateListAnimator como un recurso XML:

<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="@android:integer/config_shortAnimTime"
        android:valueTo="2dp"
        android:valueType="floatType"/>
        <!-- you could have other objectAnimator elements
             here for "x" and "y", or other properties -->
    </set>
  </item>
  <item android:state_enabled="true"
    android:state_pressed="false"
    android:state_focused="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="0"
        android:valueType="floatType"/>
    </set>
  </item>
</selector>

Para adjuntar animaciones personalizadas de los estados de visualizaciones, define un animador usando el elemento selector en un archivo de recurso XML como en este ejemplo y asígnalo a tu vista con el atributo android:stateListAnimator. Para asignar un animador de lista de estados a una vista en tu código, usa el método AnimationInflater.loadStateListAnimator() y asigna el animador a tu vista con el método View.setStateListAnimator().

Cuando tu tema extiende al tema material, los botones tendrán una animación Z de manera predeterminada. Para evitar este comportamiento en los botones, establece el atributo android:stateListAnimator en @null.

La clase AnimatedStateListDrawable te permite crear elementos de diseño que muestren animaciones entre los cambios de estados de la vista asociada. Algunos de los widgets del sistema en Android 5.0 usan estas animaciones de manera predeterminada. En el siguiente ejemplo, se muestra cómo definir un AnimatedStateListDrawable como un recurso XML:

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

Animar interfaces dibujables en vector

Las interfaces dibujables en vector son escalables sin perder definición. La clase AnimatedVectorDrawable te permite animar las propiedades de un elemento de diseño en vector.

Generalmente, las interfaces animadas dibujables en vector se definen en tres archivos XML:

Las interfaces animadas dibujables en vector pueden animar los atributos de los elementos <group> y <path>. Los elementos <group> definen un conjunto de rutas de acceso o subgrupos y el elemento <path> define rutas de acceso para dibujar.

Cuando definas una interfaz dibujable en vector que desees animar, usa el atributo android:name para asignar un nombre único a grupos o rutas de acceso, de manera que puedas hacer referencia a ellos desde tus definiciones del 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 de la interfaz animada dibujable en vector hace referencia a grupos y rutas de acceso en el elemento de diseño en vector por sus nombres:

<!-- res/drawable/animvectordrawable.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="v"
        android:animation="@anim/path_morph" />
</animated-vector>

Las definiciones de animación representan objetos ObjectAnimator o AnimatorSet. El primer animador en este ejemplo rota el grupo objetivo unos 360 grados:

<!-- res/anim/rotation.xml -->
<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

El segundo animador en este ejemplo transforma la ruta de acceso de la interfaz dibujable en vector de una forma a otra. Ambas rutas de acceso deben ser compatibles para transformarse: deben tener el mismo número de comandos y el mismo número de parámetros para cada comando.

<!-- res/anim/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>

Para más información, consulta la referencia de la API para AnimatedVectorDrawable.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)