resolved conflicts for 4f68b784 to mnc-preview-docs

page.title=Definir animaciones personalizadas 

@jd:body

<div id="tb-wrapper">

<div id="tb">

<h2>Esta lección te enseña a</h2>

<ol>

  <li><a href="#Touch">Personalizar la respuesta táctil</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>También deberías leer</h2>

<ul>

  <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li>

  <li><a href="{@docRoot}design/material/index.html">Diseño material 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 interactúan con su aplicación. El tema material proporciona algunas animaciones predeterminadas para botones y transiciones de actividades; Android 5.0 (nivel de API 21) y superior te permite personalizar estas animaciones y crear unas nuevas:</p>

<ul>

<li>Respuesta táctil</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 táctil</h2>

<p>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 (interfaz de usuario, en inglés: UI, User Interface). Las animaciones predeterminadas de la respuesta táctil para botones usan la nueva clase {@link android.graphics.drawable.RippleDrawable}, que realiza una transición entre diferentes estados con un efecto de ondas.</p>

<p>En la mayoría de los casos, debes aplicar esta funcionalidad en tu vista XML al especificar el fondo de la vista como:</p>

<ul>

<li><code>?android:attr/selectableItemBackground</code> para un efecto de ondas con límites</li>

<li><code>?android:attr/selectableItemBackgroundBorderless</code> para un efecto de ondas que se extiende más allá de la vista</li>

</ul>

<p class="note"><strong>Nota:</strong> <code>selectableItemBackgroundBorderless</code> es un nuevo atributo introducido en el nivel de API 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 táctil, usa el atributo <code>android:colorControlHighlight</code> del tema.</p>

<p>Para más información, 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 método {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} te permite animar un círculo 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() {

    @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 transición con elementos compartidos.</p>

    <em>Para volver a reproducir la película, 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 transición de <strong>entrada</strong> determina cómo entran en escena las vistas en una actividad. Por ejemplo, en la transición de entrada <em>expandir</em>, las vistas entran en escena desde el exterior y vuelan hacia el centro de la pantalla.</li>

<li>Una transición de <strong>salida</strong> determina cómo salen de escena las vistas en una actividad. Por ejemplo, en la transición de entrada <em>expandir</em>, las vistas salen de escena lejos del centro.</li>

<li>Una transición <strong>elementos compartidos</strong> determina cómo las vistas que están compartidas entre dos actividades realizan una transición entre las mismas. Por ejemplo, si dos actividades tienen la misma imagen en diferentes posiciones y tamaños, la transición de elementos compartidos <em>changeImageTransform</em> traduce y escala la imagen suavemente entre estas actividades.</li>

</ul>

<p>Android 5.0 (nivel de API 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 transición que extiende la clase {@link android.transition.Visibility} está admitida como una transición de entrada o salida. Para más información, consulta la referencia de la API para la clase {@link android.transition.Transition}.</p>

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

<ul>

<li><em>changeBounds</em>: anima los cambios en los límites de las vistas de destino.</li>

<li><em>changeClipBounds</em>: anima los cambios en los límites de recorte de las vistas de destino.</li>

<li><em>changeTransform</em>: anima los cambios en escala y rotación de las vistas de destino.</li>

<li><em>changeImageTransform</em>: anima los cambios de tamaño y escala de imágenes de destino.</li>

</ul>

<p>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.</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 transición 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. También puedes especificar transiciones de entrada, salida y elementos compartidos en tu definición de estilo:</p>

<pre>

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

</pre>

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

<pre>

<!-- res/transition/change_image_transform.xml -->

<!-- (see also Shared Transitions below) -->

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">

  <changeImageTransform/>

</transitionSet>

</pre>

<p>El elemento <code>changeImageTransform</code> corresponde a la clase {@link android.transition.ChangeImageTransform}. Para más información, consulta la referencia de la API para {@link android.transition.Transition}.</p>

<p>Para habilitar las transiciones del contenido de las ventanas en tu código haz una llamada al método {@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 código, llama estos métodos 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 métodos {@link android.view.Window#setExitTransition setExitTransition()} y {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} definen la transición de salida para la actividad de llamada. Los métodos {@link android.view.Window#setEnterTransition setEnterTransition()} y {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} definen la transición de entrada para la actividad requerida.</p>

<p>Para obtener el efecto completo de una transición, debes habilitar las transiciones de contenido de las ventanas en las actividades de llamada o requeridas. De lo contrario, la actividad de llamada comenzará la transición de salida, pero luego observarás una ventana de transición (como escalar o difuminar).</p>

<p>Para comenzar una transición de entrada lo antes posible, usa el método {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} en la actividad requerida. Esto te permite tener transiciones de entrada más intensas.</p>

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

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

<pre>

startActivity(intent,

              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

</pre>

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

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

<p>Para realizar una animación 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 transición de elementos compartidos en tu estilo.</li>

<li>Define tu transición como un recurso XML.</li>

<li>Asigna un nombre en común para los elementos compartidos en ambos diseños con el atributo <code>android:transitionName</code>.</li>

<li>Usa el método {@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() {

    @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 dinámicas compartidas que generas en tu código, usa el método {@link android.view.View#setTransitionName View.setTransitionName()} para especificar un nombre del elemento en común en ambas actividades.</p>

<p>Para invertir la animación de transición de escenas cuando terminas la segunda actividad, llama al método {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} en lugar del {@link android.app.Activity#finish Activity.finish()}.</p>

<h3>Iniciar una actividad con múltiples elementos compartidos</h3>

<p>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 <code>android:transitionName</code> (o usa el método {@link android.view.View#setTransitionName View.setTransitionName()} en ambas actividades) y crea un objeto {@link android.app.ActivityOptions} como se indica a continuación:</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 interpolación de tiempo y los modelos de movimiento espacial. Con Android 5.0 (nivel de API 21) y superior, puedes definir las curvas de sincronización 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 Bézier 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 según lo especificado en los argumentos del constructor. También puedes definir un interpolador para la ruta de acceso como un recurso XML:</p>

<pre>

<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 básicas en la especificación 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 método {@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 más 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 cómo definir un {@link android.animation.StateListAnimator} como un recurso XML:</p>

<pre>

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

</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 asígnalo a tu vista con el atributo <code>android:stateListAnimator</code>. Para asignar un animador de lista de estados a una vista en tu código, usa el método {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} y asigna el animador a tu vista con el método {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>

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

<p>La clase {@link android.graphics.drawable.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 {@link android.graphics.drawable.AnimatedStateListDrawable} como un recurso XML:</p>

<pre>

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

</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 definición. La clase {@link android.graphics.drawable.AnimatedVectorDrawable} te permite animar las propiedades de un elemento de diseño 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 más 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>

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

        <strong>android:name="rotationGroup"</strong>

        android:pivotX="300.0"

        android:pivotY="300.0"

        android:rotation="45.0" >

        <path

            <strong>android:name="v"</strong>

            android:fillColor="#000000"

            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />

    </group>

</vector>

</pre>

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

<pre>

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

</pre>

<p>Las definiciones de animación 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>

<!-- res/anim/rotation.xml -->

<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 transformar: deben tener el mismo número de comandos y el mismo número de parámetros para cada comando.</p>

<pre>

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

</pre>

<p>Para más información, consulta la referencia de API para {@link android.graphics.drawable.AnimatedVectorDrawable}.</p> 

 No newline at end of file