Fresco: Transition d'élément partagé

Pouvez-vous nous donner plus de détails ? Qu'avez-vous essayé de faire exactement et que s'est-il passé à la place ?

Dans la nouvelle version Android, lollipop, nous pouvons utiliser une ImageView comme transition d'élément partagé entre les activités. Dans ce cas, l'image effectue une transition en douceur d'une activité à la suivante. Lorsque vous utilisez SimpleDraweeView, il disparaît simplement.

Le code pour le tester devrait ressembler à ceci :

thème de l'application :

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
    </style>

Activity1 Layout.xml :

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/image"
        android:layout_width="@dimen/size_1"
        android:layout_height="@dimen/size_1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>

</RelativeLayout>

Activity2 Layout.xml :

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/image"
        android:layout_width="@dimen/size_2"
        android:layout_height="@dimen/size_2"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:transitionName="image_transition"/>

</RelativeLayout>

Le code pour démarrer la deuxième activité :

    Intent intent = new Intent(activity1, Activity2.class);
    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(activity1, simpleDraweeView1, "image_transition");
    activity1.startActivity(intent, options.toBundle());

Ce code doit faire une transition entre les activités où l'image se déplace et se redimensionne du coin supérieur gauche de l'activité 1 au coin inférieur droit de l'activité 2. J'ai testé un code similaire chargeant des images depuis le réseau et il ne s'affiche pas l'animation.

Je pense que cela est aussi réel https://github.com/facebook/fresco/issues/99

Je soupçonne que cela a à voir avec les événements d'attachement/détachement que la vue obtient lors de la transition. Nous devrons enquêter là-dessus.

C'est quelque chose que je peux confirmer aussi. Les transitions d'éléments partagés semblent être interrompues sur Fresco. Ce serait formidable si nous pouvions résoudre ce problème, car il s'agit d'une fonctionnalité très importante pour l'avenir.

m'est arrivé aussi. Lors de la définition de transtitionName xml attr sur SimpleDraweeView, la méthode setImageUri() a cessé de fonctionner

Des mises à jour à ce sujet ?

Une fois que le FadeDrawable a fini d'animer l'image réelle, il y a un journal :
com.facebook.samples.comparison D/ViewRootImpl﹕ changeCanvasOpacity : opaque=false

peut-être que le changeCanvasOpacity fait que l'image ne s'affiche pas.

Le bug est-il corrigé ? C'est aussi très important pour mon projet. :)

paquet org.goodev.droidddle.drawee ;

importer com.facebook.drawee.generic.GenericDraweeHierarchy ;
importer com.facebook.drawee.view.SimpleDraweeView ;

importer android.content.Context;
importer android.graphics.Matrix ;
importer android.util.AttributeSet;

la classe publique TranslateDraweeView étend SimpleDraweeView {
public TranslateDraweeView (contexte contextuel) {
super(contexte);
}

public TranslateDraweeView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public TranslateDraweeView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public TranslateDraweeView(Context context, GenericDraweeHierarchy hierarchy) {
    super(context, hierarchy);
}

// looks like overwrite this method can fix this issue
// but still don't figure out why
public void animateTransform(Matrix matrix) {
    invalidate();
}

}

@goodev il n'y a pas une telle méthode pour écraser.

@shumin0809 ajoutez simplement cette méthode, il s'agit d'une méthode publique de masquage pour la transition.

Je constate un comportement différent, mais toujours bogué, avec SharedElementTransitions. Je ne sais pas s'il s'agit du même problème, d'un problème connexe ou d'un problème distinct.

_Reproduction _
Configuration assez standard pour un SharedElementTransition :

• RecyclerView dans un fragment avec GridLayoutManager affichant de nombreuses images en tant que SimpleDraweeViews, définissant transitionName sur elles dynamiquement dans la méthode de liaison de viewholder (où je définis également l'uri)
• OnClick déclenche une transition vers un fragment différent avec une seule vue SimpleDrawee et le même nom de transition est également défini dynamiquement

_Attendu _
Comme pour les ImageViews normales (à condition que les correspondances de scaleType), animation transparente de la ressource partagée entre les fragments

_Observé _
SharedElementTransition se produit mais il y a un scintillement avant que l'image cible n'apparaisse (il semble que l'image cible n'est pas définie assez tôt)

_Remarques _
J'ai essayé de charger des images à partir du Web et du disque, et l'image est chargée et dans le cache avant de lancer la transition. Le code du fragment cible tire exactement le même uri. J'ai essayé d'utiliser le pipeline directement (et j'ai beaucoup appris) mais je n'ai pas réussi à affecter le résultat.

_Configuration _
Appareils : Nexus 5 et Nexus 7 (2013), tous deux fonctionnant sous Android 5.1.1 (API 22)
Bibliothèque et outils à jour : fresque (0.5.0), Android Studio (1.3 Preview 3 EAP.0), compileSdk (22), outils de build (22.0.1)

_Réalisations _
En écrivant cet article, j'ai remarqué 2 choses qui pourraient être pertinentes :

• Les deux Drawees _sont_ de tailles différentes (ce n'est pas un problème pour la transition des ImageViews standard et je ne me souviens de rien de la pré-extraction qui définit les dimensions cibles)
• De mémoire, je pense que je passe les fragments de fresque en tant que contexte quelque part dans le code, ce qui signifie peut-être que les deux fragments ont chacun leur propre cache ??

@jorgemf - Votre code publié n'a-t-il pas besoin d'un attribut transitionName correspondant défini dans la mise en page de l'activité 1 ? https://developer.android.com/training/material/animations.html

_Démarrer une activité avec un élément partagé _
...
4 - Attribuez un nom commun aux éléments partagés dans les deux mises en page avec l'attribut android:transitionName .

Pour mon problème, il se peut que je doive reporter la transition. Je vais regarder ça aujourd'hui :
http://www.androiddesignpatterns.com/2015/03/activity-postponed-shared-element-transitions-part3b.html

Je suis avec le même problème. J'utilise fresco 0.5.3 et SimpleDraweeView pour ne pas charger l'image avec attr " android: transitionName ". Quelqu'un connaît une autre solution utilisant Fresco?

@jorgemf Si vous définissez "android-background" dans votre Activity1 Layout.xml, cela ne fonctionnera pas parfaitement, mais fonctionnera.
J'ai mis dans mon test : android:background= "@ android:color/transparent "

@LuizGadao Si vous définissez un arrière-plan, vous perdez tous les avantages de la bibliothèque. Je pense que c'est inutile comme vous le souhaitez pour les images téléchargées depuis Internet. Pas pour les ressources statiques en arrière-plan.
Après avoir testé certaines bibliothèques, picasso fonctionne bien pour moi. Aucun problème du tout.

@jorgemf je suis d'accord avec toi. Ce n'est qu'un hack pour le faire fonctionner.

Des nouvelles de celui-ci ?

@LuizGadao pouvez-vous publier un exemple de votre solution de contournement XML ?

Merci d'avoir signalé ce problème et merci de votre patience. Nous avons informé l'équipe principale d'une mise à jour sur ce problème. Nous attendons une réponse dans les 30 prochains jours ou le problème pourrait être résolu.

Des nouvelles de celui-ci ?

PS :
TranslateDraweeView fourni par @goodev ne fonctionne pas correctement sur certains appareils comme XiaoMi2, HuaWei P8. ReenterTransition commence à la mauvaise position.

Comme l'a dit boxcounter, Tra slateDraweeView ne fonctionne pas sur HTC One M8, ni

Si vous utilisez ChangeImageTransform Transition, je pense que la transition de l'élément de partage échoue car ChangeImageTransform anime la matrice de ImageView qui, je pense, ne prend pas en charge par défaut DraweeView.

Le problème que j'ai rencontré est que l'élément partagé commence par "fitCenter" alors qu'à l'origine c'était "centerCrop".
Le projet peut reproduire le problème
https://github.com/JackFan-Z/ActivitySharedElementTransition.git

Bien que j'aie ajouté une solution de contournement
cela ne fonctionne pas sur mon autre projet privé utilisant la fresque.
Quelqu'un pourrait-il savoir où est le vrai problème ?

Mauvais état de départ de la transition

Avant la transition

@JackFan-Z
Partager l'élément en transition définit la vue finale aux valeurs initiales et l'anime aux valeurs finales.

Normal ImageView combiné avec ChangeImageTransform capturera les valeurs de début et de fin de la matrice d'image, puis animera le changement de matrice d'image.

Cependant, DraweeView remplace certaines fonctions liées à la matrice d'image afin que le ChangeImageTransform n'ait aucun effet sur l'image.

Ainsi, seuls les ChangeBounds prennent effet.

Actuellement, je n'ai trouvé aucun moyen de manipuler la matrice d'image de DraweeView. Même le setActualImageMatrix a été marqué comme obsolète. Supposons qu'il n'est pas obsolète et qu'il fonctionne exactement comme le setImageMatrix par défaut de ImageView par défaut. Même ainsi, il n'est vraiment pas très pratique d'animer le changement en raison du fait que vous n'avez aucun moyen de changer la matrice après avoir défini le DraweeViewHierarchy . Vous devez donc créer un nouveau DraweeViewHierarchy à chaque appel de onAnimationUpdate .

Je ne sais pas pourquoi DraweeView implémente de cette manière. Et je pense que la solution possible actuelle consiste à récupérer le bitmap sous-jacent et à créer un autre ImageView pour effectuer la transition ChangeImageTransform .

@soapsign
Merci pour votre commentaire.

En fait, dans mon projet privé, j'ai essayé de créer un ImageView factice qui prend le même bitmap que l'élément partagé. Le problème existe toujours.
Je ne sais pas si le problème auquel je suis confronté est lié à la fresque ou non.
Mais c'est sûr que je peux reproduire le même problème facilement avec SimpleDraweeView.

Le ChangeImageTransform utilise les dimensions intrinsèques pour déterminer la matrice de transformation. Notre implémentation de DraweeView utilise un DraweeHierarchy dont les dimensions intrinsèques sont égales à -1 pour width et height . C'est parce que Drawee applique déjà une mise à l'échelle de type d'échelle correcte et qu'il n'est donc pas nécessaire qu'une vue le fasse. De plus, ImageView ne peut appliquer qu'un seul type d'échelle alors que la hiérarchie pouvant être dessinée peut utiliser des types d'échelle distincts pour chaque branche d'image (espace réservé, image d'échec, image réelle, etc.). Le retour des dimensions intrinsèques réelles à la vue ne fait que courir le risque d'avoir des bogues de dimensionnement.
Si vous voulez que la transition fonctionne, vous devez utiliser ChangeBounds .

Que diriez-vous d'ajouter une nouvelle option comme " fresco:ImageMatrixSrc=actual " ?

@boxcounter Pour le moment, nous pensons que ce que nous avons maintenant est ok. Mais vous pouvez créer une pull request pour votre proposition :)

@massimocarli ChangeBounds ne fonctionne bien que lorsque l'image partagée a la même taille sur les deux activités/vues. Mais lorsque l'image doit être redimensionnée pendant la transition, elle est recadrée et a l'air mauvaise.
Que proposez-vous de faire de cette manière ? ChangeImageTransform résout ce problème, mais cela ne fonctionne pas dans DraweeView.

Pareil ici...

@massimocarli ChangeBounds n'est pas assez bon.

C'est ce que j'essaie de réaliser (c'est en utilisant ImageView): https://gfycat.com/HideousEarlyAndalusianhorse

Voici à quoi cela ressemble en utilisant SimpleDraweeView : https://gfycat.com/PracticalCorruptGrouper
Notez la façon dont l'image d'origine se redimensionne de manière incorrecte derrière l'image animée.

Voici à quoi cela ressemble avec juste ChangeBounds comme transition : https://gfycat.com/SorrowfulExemplaryAntlion

Salut les gens, j'ai le même problème. ChangeBounds ne fonctionne pas correctement. S'il existe une solution de contournement ou un correctif, veuillez nous en informer. La transition d'éléments partagés est l'une des meilleures choses introduites par la conception de matériaux et la fresque est l'une des meilleures bibliothèques que j'ai utilisées jusqu'à présent. Veuillez laisser les développeurs utiliser les deux de manière transparente.

Quelqu'un a-t-il pu trouver une solution de contournement puisque Fresco ne résoudra pas ce problème ?

Voici la solution de contournement que j'utilise qui fonctionne bien:
https://github.com/bumptech/glide

Bonjour tout le monde,

La méthode ChangeBounds elle-même n'est pas suffisante et je suis étonné par la réponse de Facebook selon laquelle l'état actuel des transitions d'éléments partagés est ok.

J'ai finalement trouvé une solution assez simple qui semble fonctionner pour moi sur un exemple de projet.
Étant donné que la transition ChangeBounds ne met pas à jour la mise en page elle-même via onMeasure() mais via onSizeChanged(), qui n'est actuellement remplacée par aucune vue tirée, l'échelle du dessin n'est jamais mise à jour pendant la transition.

Voici notre CustomDraweeView qui met à jour le TopLevelDrawable pendant la transition :

public class CustomDraweeView extends SimpleDraweeView {

    public CustomDraweeView(Context context, GenericDraweeHierarchy hierarchy) {
        super(context, hierarchy);
    }

    public CustomDraweeView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    <strong i="10">@Override</strong>
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        Drawable drawable = getTopLevelDrawable();
        if (drawable != null) {
            drawable.setBounds(0, 0, w, h);
        }
    }
}

Voici le xml du jeu de transition que vous devrez gonfler :

<?xml version="1.0" encoding="utf-8"?>
<transitionSet
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:duration="<strong i="14">@android</strong>:integer/config_mediumAnimTime"
    android:transitionOrdering="together"
    tools:targetApi="LOLLIPOP" >
    <changeBounds
        android:interpolator="<strong i="15">@android</strong>:interpolator/accelerate_decelerate"/>
    <changeTransform
        android:interpolator="<strong i="16">@android</strong>:interpolator/accelerate_decelerate"/>
</transitionSet>

Le seul inconvénient que j'ai avec cette méthode est que le type d'échelle des drawables ne correspond pas entre les fragments ou les activités, ce que vous devriez éviter de toute façon si vous souhaitez utiliser des transitions d'éléments partagés.

@massimocarli @tyronen
Quelqu'un chez Facebook peut-il expliquer pourquoi DraweeView ne remplace pas actuellement cette méthode et les problèmes possibles qui pourraient survenir avec cette modification ? Si aucun n'est trouvé, je serais heureux de créer une pull-request pour cela.

Salut tout le monde! Dans la nouvelle version 0.10 de Fresco, la transformation de ScaleType personnalisée entre différents ScaleTypes est triviale. voici ma réalisation
https://gist.github.com/burzumrus/a589aa7e36ca003ddaf2334218c50ad0

L'utilisation est simple

TransitionSet transitionSet = new TransitionSet();
transitionSet.addTransition(new ChangeBounds());
transitionSet.addTransition(new DraweeTransform(ScalingUtils.ScaleType.CENTER_CROP, ScalingUtils.ScaleType.FIT_CENTER));
getWindow().setSharedElementEnterTransition(transitionSet);

@burzumrus c'est incroyable ! Merci de l'avoir mis en œuvre. C'est exactement ce que j'avais en tête avec InterpolatingScaleType . Envisagez de faire une pull-request pour Fresco si ce n'est déjà fait.

@plamenko j'utilise fresque 0.12 et

getWindow().setSharedElementEnterTransition(DraweeTransition.createTransitionSet(
                    ScalingUtils.ScaleType.CENTER_CROP, ScalingUtils.ScaleType.CENTER_CROP));
getWindow().setSharedElementEnterTransition(DraweeTransition.createTransitionSet(
                    ScalingUtils.ScaleType.CENTER_CROP, ScalingUtils.ScaleType.CENTER_CROP));

L'animation fonctionne parfaitement. Mais au retour à la première activité l'image disparaît

Est-ce que quelqu'un les a essayés avec des animations fragment à fragment ? Parce que cela ne semble pas fonctionner sur la v0.12.
Edit : est-il possible que le RecyclerView cause des problèmes ?
Edit 2 : On dirait que le problème est que ChangeBounds lui-même n'utilise que les coordonnées _window_ X et Y si le reparentage est défini sur true. Le définir via ChangeBounds 's setReparenting(true) est obsolète et ChangeTransform est recommandé à la place. Ainsi, pour un RecyclerView , transitionSet.addTransition(new ChangeTransform()); est également requis. (L'animation de retour semble toujours mauvaise, mais au moins l'animation d'entrée est correcte ( sauf que le type d'échelle n'a aucun effet en changeant startValues.view en endValues.view dans createAnimator(...) résout ce problème) avec cette.)

@Gericop et @ladia12 0.12 fonctionnent bien dans mon projet d'animations fragment à fragment.
Je l'utilise aussi dans RecyclerView.
Le fait est que vous ne pouvez utiliser que la transaction de fragment « remplacer ». Vous ne pouvez pas utiliser la transaction « ajouter ».
Si cela peut vous aider, voici un exemple (sans fresque) de transition fragment à fragment qui m'a aidé à démarrer sur quelque chose qui a fonctionné (vous pouvez télécharger le code du projet sur github)
http://www.androidauthority.com/using-shared-element-transitions-activities-fragments-631996/

@sperochon J'utilise replace et c'est dans un RecyclerView mais cela ne fonctionne pas (et honnêtement, c'est surprenant que cela fonctionne pour vous, peut-être que vous utilisez une version différente de RecyclerView ? J'utilise la v24.1.1). J'ai dû faire quelques modifications pour que les animations fonctionnent :

• ajouté ChangeTransform à l'ensemble de transition via transitionSet.addTransition(new ChangeTransform());
  
  
  
  • cela est dû au fait que le ChangeBounds rapporte une position incorrecte de la vue de départ dans un RecyclerView (il renvoie toujours les coordonnées X,Y du premier élément)
  
  
• dans createAnimator(...) remplacer if (mFromScale == mToScale) par if(mFromScale == mToScale && startBounds.equals(endBounds))
  
  
  
  • la transformation ne se produira pas autrement si les deux tirés partagent le même type d'échelle, même si leurs tailles ne sont pas les mêmes
  
  
• dans createAnimator(...) remplacer final GenericDraweeView draweeView = (GenericDraweeView) startValues.view; par final GenericDraweeView draweeView = (GenericDraweeView) endValues.view; (attention au changement startValues -> endValues )
  
  
  
  • utiliser le tiré de fin au lieu de celui de départ
  
  
• dans AnimatorUpdateListener après l'appel scaleType.setValue(fraction) , insérez les lignes suivantes :

Drawable drawable = draweeView.getTopLevelDrawable();

if (drawable != null) {
    drawable.setBounds(0, 0, draweeView.getWidth(), draweeView.getHeight());
}

Ce dernier morceau de code est basé sur la solution de @Aohayou (parce que je ne pouvais pas faire fonctionner CustomDraweeView ).
Testé sur Android 5.0.2 avec prise en charge de la version lib v24.1.1.

NOTEZ que cette solution ne fonctionnera pas si vous animez entre des images de mêmes tailles.

@Gericop Voici une démo qui fonctionne bien. Je viens de le commiter sur github. J'ai essayé de nettoyer le code au maximum. Attention : je n'ai utilisé qu'une seule image dans ma vue recycleur car le nom de la transition doit être différent sur chaque élément de la vue recycleur pour que Fresco fonctionne. Donc, pour simplifier, j'ai utilisé seulement 1 image avec 1 nom de transition.
https://github.com/sperochon/DemoFrescoFragment2Fragment

J'espère que cette aide!

@sperochon Essayez-le avec plusieurs images.
Au fait, j'ai testé votre démo avec des sources non modifiées. Voici le résultat :

C'est complètement faux. La vue finale commence à partir d'une position différente et le type d'échelle n'a aucun effet. Je ne sais pas comment pouvez-vous dire pour cela que "ça marche bien" parce que ce n'est clairement pas le cas.

@Gericop Je viens de mettre à jour le code. J'ai oublié de spécifier une mise en page différente pour le fragment de fin. Réessayez, s'il vous plaît.

@sperochon Dans l'émulateur API 23, cela fonctionne bien. Sur mon appareil (API 21), ce n'est pas le cas. Testé aussi dans un émulateur API 21, ça ne marche pas là non plus.
Le fait est donc que l'implémentation actuelle ne fonctionne pas sur l'API 21 (je ne l'ai pas testée sur l'API 22), mais fonctionne sur l'API 23.

Edit : votre démo ne teste que les transitions ChangeBounds et ChangeTransform par défaut, pas l'implémentation DraweeTransition fournie par Facebook.

Malheureusement, vous avez raison... Je l'ai testé sur mes appareils :
Android 5.0 + Fresque v0.11/v0.12 -> KO
Android 6.0 + Fresque v0.11/v0.12 -> OK
Je ne l'avais pas remarqué avant...

@Gericop @sperochon J'ai écrit un article de blog sur le médium à ce sujet. S'il vous plaît voir si cela aide.

@ladia12 Ce message n'a rien à voir avec le problème auquel j'étais (nous étions) confrontés... Votre entrée de blog concerne la transition _inter- Activité _, tandis que mon problème est lié à _inter- Fragment _. De plus, le vrai bug réside dans la façon dont l'API 21 gère les transitions ChangeBounds et/ou ChangeTransform où le Facebook fourni DraweeTransition n'aide pas non plus. Ma solution, en revanche, surmonte cela, si les images source et cible ont des dimensions différentes (largeur et/ou hauteur).

Juste pour info :
Android 5.0 + Fresque v0.11/v0.12/0.13 -> KO
Android >= 5.1 + Fresque v0.11/0.12/0.13 -> OK

@ladia12 Comment avez-vous résolu le problème de la disparition de l'image d'origine lors du retour à la première activité ?

@dbrant J'ai le même problème, avez-vous trouvé un moyen de le résoudre ?

Voir #1446

@ladia12 Comment avez-vous résolu le problème de la disparition de l'image d'origine lors du retour à la première activité ?

@ladia12 Comment avez-vous résolu le problème de la disparition de l'image d'origine lors du retour à la première activité ? Mon image originale est dans le viewholder de recyclerview

J'ai fini par utiliser Picasso pour la transition d'élément partagé. ce n'était pas réglé
en fresque. Donc Picasso est léger et il n'y a aucun problème à l'utiliser
avec Fresco.

Le mercredi 19 juin 2019 à 17h11, bembem1011 [email protected] a écrit :

@ladia12 https://github.com/ladia12 Comment avez-vous résolu le problème de
l'image originale disparaissant lors du retour à la première activité ? Mon
l'image originale est dans le viewholder de recyclerview

-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/facebook/fresco/issues/22?email_source=notifications&email_token=AAXQ5WYUP5KBJYNBOZX7CCDP3ILM5A5CNFSM4A6ZMH32YY3PNVWWK3TUL52HS4DFVREXBSG43VMVWS#W63LNMV52Wissue2ZLOZDNGO ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AAXQ5W5EXO5SV4R2PXVTG7LP3ILM5ANCNFSM4A6ZMH3Q
.