android - studio - Animar ImageView entre dos actividades usando transiciones de elementos compartidos con ChangeImageTransform

transiciones entre fragments android

Question

Estoy tratando de animar un ImageView a otra posición entre dos actividades en el nivel 21 de la API de Android. Ya que "MoveImage" en Android L Preview se eliminó, uso " ChangeImageTransform " en su lugar, pero el código de muestra en los documentos no funciona ( Las dos imágenes animadas por separado).

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeImageTransform>
</transitionSet>

¿Hay algún ejemplo de trabajo? ¡Gracias!

Answer 1

Conseguí este trabajo siguiendo esta guía, algunos otros y el material al que se hace referencia.

Una transición ambientada en este estilo. Pongo esto bajo res / transición:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeBounds>
    <changeImageTransform>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeImageTransform>
</transitionSet>

En las ImageViews de origen y destino, debe agregar una etiqueta de nombre. El nombre debe ser el mismo.

<ImageView
...
android:transitionName="MYTRANSITIONVIEW"

/>

En styles.xml, agregue al tema de la aplicación:

<item name="android:windowContentTransitions">true</item>
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowSharedElementEnterTransition">@transition/my_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/my_transition</item>

Estoy ejecutando esto dentro de un fragmento, así que comienzo la nueva actividad de esta manera:

Bundle bundle = null;

if (activity != null) {
    ActivityOptionsCompat options =
                ActivityOptionsCompat.makeSceneTransitionAnimation(activity, Frag2_, "MYTRANSITIONVIEW");
    bundle = options.toBundle();
}
activity.startActivity(i, bundle);

Funciona en clientes API 21. No funcionó en un cliente API 16 porque las etiquetas XML no son válidas.

Espero que esto ayude.

Ligera actualización, para obtener la transición inversa en la salida, tuve que llamar

supportFinishAfterTransition();

en lugar de terminar ();

Answer 2

Para hacer una animación de transición de pantalla entre dos actividades que tienen un elemento compartido, puede leer este artículo y seguir los pasos mencionados:

1. Habilite las transiciones de contenido de la ventana en su tema.
2. Especifique una transición de elementos compartidos en su estilo.
3. Defina su transición como un recurso XML.
4. Asigne un nombre común a los elementos compartidos en ambos diseños con el atributo android: transitionName.
5. Utilice el método ActivityOptions.makeSceneTransitionAnimation ().

Sobre el 3er paso, según la ChangeImageTransform :

En combinación con ChangeBounds, ChangeImageTransform permite que ImageViews que cambian de tamaño, forma o ImageView.ScaleType para animar contenidos sin problemas.

El res / transition / your_transition.xml debería ser así:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeBounds>
    <changeImageTransform>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeImageTransform>
</transitionSet>

o simplemente de esta manera si solo ivA y ivB necesitan ser animados:

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