web-dev-qa-db-fra.com

Animer ImageView entre deux activités à l'aide de transitions d'éléments partagés avec ChangeImageTransform

J'essaie d'animer une ImageView à une autre position entre deux activités dans Android API level 21. Puisque "MoveImage" dans Android L Preview a été supprimé, je utilisez plutôt " ChangeImageTransform ", mais l'exemple de code dans les documents ne fonctionne pas (les deux images sont animées séparément).

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

Y a-t-il un exemple de travail? Merci!

androidandroid-5.0-lollipopshared-element-transitionactivity-transition
17
iForests

Pour faire une animation de transition d'écran entre deux activités qui ont un élément partagé, vous pouvez lire cet article et suivre les étapes mentionnées:

  1. Activez les transitions de contenu de fenêtre dans votre thème.
  2. Spécifiez une transition des éléments partagés dans votre style.
  3. Définissez votre transition en tant que ressource XML.
  4. Attribuez un nom commun aux éléments partagés dans les deux présentations avec l'attribut Android: transitionName.
  5. Utilisez la méthode ActivityOptions.makeSceneTransitionAnimation ().

A propos de la 3ème étape, selon la documentation :

En combinaison avec ChangeBounds, ChangeImageTransform permet à ImageViews qui modifient la taille, la forme ou ImageView.ScaleType d'animer le contenu en douceur.

Le fichier res/transition/your_transition.xml devrait ressembler à ceci:

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

ou tout simplement comme ça si seuls ivA et ivB doivent être animés:

<transitionSet xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <changeBounds/>
    <changeImageTransform/>
</transitionSet>
30
Yi-Ping Shih

J'ai ce travail en suivant ce guide, quelques autres et le matériel référencé.

Une transition dans ce style. Je mets ceci sous res/transition:

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

Dans les ImageViews source et cible, vous devez ajouter une étiquette de nom. Le nom doit être le même.

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

/>

Dans styles.xml, ajoutez au thème d'application:

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

J'exécute cela à l'intérieur d'un fragment, donc je commence la nouvelle activité comme ceci:

Bundle bundle = null;

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

Il fonctionne sur les clients API 21. Cela ne fonctionnait pas sur un client API 16 car les balises XML ne sont pas valides.

J'espère que ça aide.

Légère mise à jour, pour obtenir la transition inverse à la sortie, j'ai dû appeler

supportFinishAfterTransition();

plutôt que de terminer ();

8
formica