training/material/animations.jd

page.title=Definir animaciones personalizadas

@jd:body

<div id="tb-wrapper">
<div id="tb">
<h2>Esta leccin te ensea a realizar lo siguiente:</h2>
<ol>
  <li><a href="#Touch">Personalizar la respuesta tctil</a></li>
  <li><a href="#Reveal">Usar el efecto Revelar</a></li>
  <li><a href="#Transitions">Personalizar transiciones de actividades</a></li>
  <li><a href="#ViewState">Animar cambios de estados de las vistas</a></li>
  <li><a href="#AnimVector">Animar interfaces dibujables en vector</a></li>
</ol>
<h2>Tambin deberas leer</h2>
<ul>
  <li><a href="http://www.google.com/design/spec">Especificacin de Material Design</a></li>
  <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li>
</ul>
</div>
</div>


<p>Las animaciones en Material Design proporcionan a los usuarios comentarios sobre sus acciones y continuidad visual
a medida que los usuarios interactan con su aplicacin. 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:</p>

<ul>
<li>Respuesta tctil</li>
<li>Efecto revelar circular</li>
<li>Transiciones de actividades</li>
<li>Movimiento curvo</li>
<li>Ver cambios de estados</li>
</ul>


<h2 id="Touch">Personalizar la respuesta tctil</h2>

<p>La respuesta tctil en Material Design proporciona una confirmacin visual instantnea en el punto
de contacto cuando los usuarios interactan con los elementos de la IU. Las animaciones predeterminadas de la respuesta tctil para
botones usan la nueva clase {@link android.graphics.drawable.RippleDrawable}, que realiza una transicin
entre diferentes estados con un efecto de ondas.</p>

<p>En la mayora de los casos, debes aplicar esta funcionalidad en la vista XML especificando el fondo
de la vista como:</p>

<ul>
<li><code>?android:attr/selectableItemBackground</code> para un efecto de ondas con lmites.</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> para un efecto de ondas que se extiende ms all de
la vista. Se lo dibujar en la vista primaria ms cercana de la vista (que lo limitar) con un fondo de valor no
nulo.</li>
</ul>

<p class="note"><strong>Nota:</strong> <code>selectableItemBackgroundBorderless</code> es un nuevo
atributo introducido en la API de nivel 21.</p>


<p>Alternativamente, puedes definir un {@link android.graphics.drawable.RippleDrawable}
como un recurso XML que usa el elemento <code>ripple</code>.</p>

<p>Puedes asignar un color a los objetos {@link android.graphics.drawable.RippleDrawable}. Para cambiar
el color predeterminado de la respuesta tctil, usa el atributo <code>android:colorControlHighlight</code>
del tema.</p>

<p>Para ms informacin, consulta la referencia de la API para la clase {@link
android.graphics.drawable.RippleDrawable}.</p>


<h2 id="Reveal">Usar el efecto revelar</h2>

<p>Las animaciones del efecto revelar proporcionan a los usuarios una continuidad visual cuando muestras u ocultas un grupo de elementos
de la IU. El mtodo {@link android.view.ViewAnimationUtils#createCircularReveal
ViewAnimationUtils.createCircularReveal()} te permite animar un crculo de recorte para
revelar u ocultar una vista.</p>

<p>Para revelar una vista previamente invisible usando este efecto:</p>

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

<p>Para ocultar una vista previamente invisible usando este efecto:</p>

<pre>
// 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() {
    &#64;Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
    }
});

// start the animation
anim.start();
</pre>


<h2 id="Transitions">Personalizar transiciones de actividades</h2>

<!-- shared transition video -->
<div style="width:290px;margin-left:35px;float:right">
  <div class="framed-nexus5-port-span-5">
  <video class="play-on-hover" autoplay="">
    <source src="{@docRoot}design/material/videos/ContactsAnim.mp4">
    <source src="{@docRoot}design/material/videos/ContactsAnim.webm">
    <source src="{@docRoot}design/material/videos/ContactsAnim.ogv">
  </video>
  </div>
  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
    <p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Figura 1</strong>: una
transicin con elementos compartidos.</p>
    <em>Para volver a reproducir la pelcula, haz clic en la pantalla del dispositivo.</em>
  </div>
</div>

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

<ul>
<li>Una transicin de <strong>entrada</strong> determina cmo entran en escena las vistas en una actividad.
Por ejemplo, en la transicin de entrada <em>expandir</em>, las vistas entran en escena desde el exterior
y vuelan hacia el centro de la pantalla.</li>

<li>Una transicin de <strong>salida</strong> determina cmo salen de escena las vistas en una actividad. Por
ejemplo, en la transicin de salida <em>expandir</em>, las vistas salen de escena lejos del
centro.</li>

<li>Una transicin de <strong>elementos compartidos</strong> determina cmo las vistas que estn compartidas entre
dos actividades realizan la transicin entre estas. Por ejemplo, si dos actividades tienen la misma
imagen en diferentes posiciones y tamaos, la transicin de elementos compartidos <em>changeImageTransform</em>
traduce y escala la imagen suavemente entre estas actividades.</li>
</ul>

<p>Android 5.0 (API nivel 21) admite estas transiciones de entrada y salida:</p>

<ul>
<li><em>expandir</em>: desplaza vistas hacia adentro o hacia afuera del centro de la escena.</li>
<li><em>deslizar</em>: desplaza vistas hacia adentro o hacia afuera de uno de los bordes de la escena.</li>
<li><em>difuminar</em>: agrega o quita una vista de la escena al cambiar su opacidad.</li>
</ul>

<p>Toda transicin que extiende la clase {@link android.transition.Visibility} se admite
como una transicin de entrada o salida. Para ms informacin, consulta la referencia de la API para la clase
{@link android.transition.Transition}.</p>

<p>Android 5.0 (API nivel 21) tambin admite estas transiciones de elementos compartidos:</p>

<ul>
<li><em>changeBounds</em>: anima los cambios en los lmites de las vistas de destino.</li>
<li><em>changeClipBounds</em>: anima los cambios en los lmites de recorte de las vistas de destino.</li>
<li><em>changeTransform</em>: anima los cambios en escala y rotacin de las vistas de destino.</li>
<li><em>changeImageTransform</em>: anima los cambios de tamao y escala de imgenes de destino.</li>
</ul>

<p>Cuando habilitas las transiciones de actividades en tu aplicacin, la transicin entre difuminados predeterminada se
activa entre las actividades que ingresan y salen.</p>

<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
<p class="img-caption">
 <strong>Figura 2</strong>: una transicin de escena con un elemento compartido.
</p>

<h3>Especificar transiciones personalizadas</h3>

<p>Primero, habilita las transiciones de contenido de la ventana con el atributo <code>android:windowContentTransitions</code>
cuando definas un estilo que herede del tema material. Tambin puedes especificar
transiciones de entrada, salida y elementos compartidos en tu definicin de estilo:</p>

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

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

  &lt;!-- specify shared element transitions -->
  &lt;item name="android:windowSharedElementEnterTransition">
    &#64;transition/change_image_transform&lt;/item>
  &lt;item name="android:windowSharedElementExitTransition">
    &#64;transition/change_image_transform&lt;/item>
&lt;/style>
</pre>

<p>La transicin <code>change_image_transform</code> en este ejemplo se define en la siguiente forma:</p>

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

<p>El elemento <code>changeImageTransform</code> corresponde a la clase
{@link android.transition.ChangeImageTransform}. Para ms informacin, consulta la referencia de la
API para {@link android.transition.Transition}.</p>

<p>Para habilitar las transiciones del contenido de las ventanas en tu cdigo, llama al mtodo
{@link android.view.Window#requestFeature Window.requestFeature()}:</p>

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

<p>Para especificar transiciones en tu cdigo, llama a estos mtodos con un objeto {@link
android.transition.Transition}:</p>

<ul>
  <li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
  <li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
  <li>{@link android.view.Window#setSharedElementEnterTransition
      Window.setSharedElementEnterTransition()}</li>
  <li>{@link android.view.Window#setSharedElementExitTransition
      Window.setSharedElementExitTransition()}</li>
</ul>

<p>Los mtodos {@link android.view.Window#setExitTransition setExitTransition()} y {@link
android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} definen
la transicin de salida para la actividad que realiza la llamada. Los mtodos {@link android.view.Window#setEnterTransition
setEnterTransition()} y {@link android.view.Window#setSharedElementEnterTransition
setSharedElementEnterTransition()} definen la transicin de entrada para la actividad invocada.</p>

<p>Para obtener el efecto completo de una transicin, 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 transicin de salida,
pero luego observars una ventana de transicin (como escalar o difuminar).</p>

<p>Para comenzar una transicin de entrada lo antes posible, usa el mtodo
{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
en la actividad invocada. Esto te permite tener transiciones de entrada ms intensas.</p>

<h3>Iniciar una actividad mediante el uso de transiciones</h3>

<p>Si permites transiciones y estableces una transicin de salida para una actividad, la transicin se activa
cuando inicias otra actividad, como alguna de las siguientes:</p>

<pre>
startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
</pre>

<p>Si estableciste una transicin de entrada para la segunda actividad, la transicin tambin se activa
cuando se inicia la actividad. Para deshabilitar las transiciones cuando inicias otra actividad, proporciona
una agrupacin de opciones <code>null</code>.</p>

<h3>Iniciar una actividad con un elemento compartido</h3>

<p>Para realizar una animacin de transiciones de pantallas entre dos actividades que tienen un elemento compartido:</p>

<ol>
<li>Habilita las transiciones de contenido de ventanas en tu tema.</li>
<li>Especifica una transicin de elementos compartidos en tu estilo.</li>
<li>Define tu transicin como un recurso XML.</li>
<li>Asigna un nombre en comn para los elementos compartidos en ambos diseos con el atributo
<code>android:transitionName</code>.</li>
<li>Usa el mtodo {@link android.app.ActivityOptions#makeSceneTransitionAnimation
ActivityOptions.makeSceneTransitionAnimation()}.</li>
</ol>

<pre>
// 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() {
    &#64;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());
    }
});
</pre>

<p>Para las vistas dinmicas compartidas que generas en tu cdigo, usa el mtodo
{@link android.view.View#setTransitionName View.setTransitionName()} para especificar un nombre de
elemento en comn en ambas actividades.</p>

<p>Para invertir la animacin de transicin de escenas cuando terminas la segunda actividad, llama al mtodo
{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
en lugar del {@link android.app.Activity#finish Activity.finish()}.</p>

<h3>Iniciar una actividad con mltiples elementos compartidos</h3>

<p>Para realizar una animacin de transicin de escenas entre dos actividades que tienen ms de un elemento
compartido, define los elementos compartidos en ambos diseos con el atributo <code>android:transitionName</code>
(o usa el mtodo {@link android.view.View#setTransitionName View.setTransitionName()}
en ambas actividades) y crea un objeto {@link android.app.ActivityOptions} como se indica a continuacin:</p>

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


<h2 id="CurvedMotion">Usar movimiento curvo</h2>

<p>Las animaciones en Material Design se basan en curvas para la interpolacin de tiempo y los modelos de movimiento
espacial. Con Android 5.0 (API nivel 21) y superior, puedes definir las curvas de sincronizacin personalizadas y
los modelos de movimientos curvos para las animaciones.</p>

<p>La clase {@link android.view.animation.PathInterpolator} es un nuevo interpolador que se basa en una curva
Bzier o un objeto {@link android.graphics.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 segn lo especificado en los argumentos del
constructor. Tambin puedes definir un interpolador para la ruta de acceso como un recurso XML:</p>

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

<p>El sistema proporciona recursos XML para las tres curvas bsicas en la especificacin
de Material Design:</p>

<ul>
  <li><code>&#64;interpolator/fast_out_linear_in.xml</code></li>
  <li><code>&#64;interpolator/fast_out_slow_in.xml</code></li>
  <li><code>&#64;interpolator/linear_out_slow_in.xml</code></li>
</ul>

<p>Puedes pasar un objeto {@link android.view.animation.PathInterpolator} al mtodo {@link
android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>

<p>La clase {@link android.animation.ObjectAnimator} tiene nuevos constructores que te permiten animar
coordenadas junto a una ruta de acceso, usando dos o ms propiedades a la vez. Por ejemplo, el siguiente animador
usa un objeto{@link android.graphics.Path} para animar las propiedades X e Y de una vista:</p>

<pre>
ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();
</pre>


<h2 id="ViewState">Animar cambios de estados de las vistas</h2>

<p>La clase {@link android.animation.StateListAnimator} te permite definir los animadores que se ejecutan cuando
cambia el estado de una vista. En el siguiente ejemplo, se muestra cmo definir un {@link
android.animation.StateListAnimator} como un recurso XML:</p>

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

<p>Para adjuntar animaciones personalizadas de los estados de visualizaciones, define un animador usando el elemento
<code>selector</code> en un archivo de recurso XML como en este ejemplo y asgnalo a tu
vista con el atributo <code>android:stateListAnimator</code>. Para asignar un animador de lista de estados
a una vista en tu cdigo, usa el mtodo {@link android.animation.AnimatorInflater#loadStateListAnimator
AnimationInflater.loadStateListAnimator()} y asigna el animador a tu vista con el mtodo
{@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>

<p>Cuando tu tema extiende al tema material, los botones tendrn una animacin Z de manera predeterminada. Para evitar este
comportamiento en los botones, establece el atributo <code>android:stateListAnimator</code> en
<code>@null</code>.</p>

<p>La clase {@link android.graphics.drawable.AnimatedStateListDrawable} te permite crear elementos de diseo
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 cmo
definir un {@link android.graphics.drawable.AnimatedStateListDrawable} como un recurso XML:</p>

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

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

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


<h2 id="AnimVector">Animar interfaces dibujables en vector</h2>

<p>Las <a href="{@docRoot}training/material/drawables.html#VectorDrawables">interfaces dibujables en vector</a> son
escalables sin perder definicin. La clase {@link android.graphics.drawable.AnimatedVectorDrawable}
te permite animar las propiedades de un elemento de diseo en vector.</p>

<p>Generalmente, las interfaces animadas dibujables en vector se definen en tres archivos XML:</p>

<ul>
<li>Una interfaz dibujable en vector con el elemento <code>&lt;vector&gt;</code> en
<code>res/drawable/</code></li>
<li>Una interfaz dibujable animada en vector con el elemento <code>&lt;animated-vector&gt;</code> en
<code>res/drawable/</code></li>
<li>Uno o ms animadores de objeto con el elemento <code>&lt;objectAnimator&gt;</code> en
<code>res/anim/</code></li>
</ul>

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

<p>Cuando definas una interfaz dibujable en vector que desees animar, usa el atributo <code>android:name</code>
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:</p>

<pre>
&lt;!-- res/drawable/vectordrawable.xml -->
&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    &lt;group
        <strong>android:name="rotationGroup"</strong>
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        &lt;path
            <strong>android:name="v"</strong>
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    &lt;/group>
&lt;/vector>
</pre>

<p>La definicin de la interfaz animada dibujable en vector hace referencia a grupos y rutas de acceso en el elemento de diseo en vector
por sus nombres:</p>

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

<p>Las definiciones de animacin representan objetos {@link android.animation.ObjectAnimator} o {@link
android.animation.AnimatorSet}. El primer animador en este ejemplo rota el grupo
objetivo unos 360 grados:</p>

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

<p>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 nmero de comandos
y el mismo nmero de parmetros para cada comando.</p>

<pre>
&lt;!-- res/anim/path_morph.xml -->
&lt;set xmlns:android="http://schemas.android.com/apk/res/android">
    &lt;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" />
&lt;/set>
</pre>

<p>Para ms informacin, consulta la referencia de la API para {@link
android.graphics.drawable.AnimatedVectorDrawable}.</p>