8
votes

Comment animer une matrice à «Crotch-out» une image?

J'essaie de faire une visionneuse d'images que lorsque l'utilisateur clique sur l'image, l'image est "recadrée" et révéler l'image complète.

Par exemple, dans la capture d'écran sous l'utilisateur ne voit que la partie du chiot initialement. Mais une fois que l'utilisateur a cliqué sur l'image, tout le chiot est révélé. L'image s'est évanouie derrière la première montre ce que les résultats de l'animation seraient.

capture d'écran

Initialement, l'imageView est à l'échelle de 50% sur X et Y. et lorsque l'utilisateur clique sur l'image, l'imageView est à l'échelle de l'image à 100% et la matrice ImageView est recalculée.

J'ai essayé tout type de moyen de calculer la matrice. Mais je ne peux pas sembler en trouver un qui fonctionne avec tout type de culture et d'image: Paysage recadré au portrait, paysage recadré au paysage, portrait recadré au portrait et portrait recadré au paysage. Est-ce même possible?

Voici mon code en ce moment. J'essaie de trouver ce qu'il faut mettre dans setimageecrop () . xxx


modifier: il convient de mentionner que la matrice sera la matrice linéairement ne pas faire. L'imageView est mis à l'échelle linéairement (0,5 à 1). Mais si j'éplève la matrice linéairement pendant l'animation, la vue est écrasée pendant l'animation. Le résultat final a l'air bien, mais l'image a l'air laide pendant l'animation.


2 commentaires

Ainsi, l'image devient-elle plus grande (comme l'image) ou l'image vient-elle de zoomer pour afficher l'image entière, tout en conservant les mêmes limites?


@Phil Les échelles ImageView de 0,5 à 1. Il conserve la même mise en page liée.


4 Réponses :


3
votes

Cela pourrait aider ... Vue d'image Android Échelle de matrice + Traduire

Il semble y avoir deux opérations Nécessaire:

  1. Échelle du conteneur de 0,5 à 1,0
  2. zoomez l'image intérieure de 2,0 à 1,0

    Je suppose que c'est aussi simple que xxx

    à échelle / zoom du centre de l'image, vous pourriez avoir besoin de faire quelque chose comme ça (peut-être échanger "-" commande) ... xxx

    Je ne suis pas certain si cela va animer ( Pourquoi appeler SetScalex pendant Pinch Zoom Gesture cause un scintillement? ). Peut-être que cela aidera ... http://developer.android.com/training/animation /zoom.html

    Le résultat est que l'image interne reste la même résolution, toujours.

    Cependant, vous mentionnez également des différences de portrait / paysage, donc cela fait donc un peu plus compliqué. Je trouve la chose la plus difficile dans des cas tels que ceci est de définir solidement ce que vous voulez avoir lieu dans tous les cas.

    Je suppose que vous êtes après une grille de petites vignettes, tout de même taille (ce qui signifie qu'ils ont tous le même rapport d'aspect). Vous souhaitez afficher des images dans les conteneurs vignettes de différents rapports d'aspect et de taille, mais zoomé dans. Lorsque vous sélectionnez une image, les frontières se développent (chevauchement d'autres images?). Il y a la contrainte que l'image montrée doit conserver la même résolution. Vous mentionnez également que l'image complète doit être visible après la sélection de la taille et deux fois la taille de la vignette. Ce dernier point soulève une autre question - deux fois la hauteur, la largeur des vignettes ou les deux (dans quel cas récoltez-vous ou à l'échelle si le rapport d'image de l'image ne correspond pas). Un autre problème susceptible de cultiver est le cas lorsqu'une image a une résolution insuffisante.

    Espérons que Android peut faire beaucoup de cela pour vous ... Comment faire échec d'une image dans ImageView pour garder le rapport de format


4 commentaires

J'ai édité ma question. Votre raisonnement est bon, mais entraînera une image «schémée» lors de l'animation. Mais merci d'avoir souligné les autres réponses Stackoverflow. Je vais regarder en eux. :)


Il semble étrange qu'une échelle uniforme écraserait l'image. Cela me fait remarquer à Android ne s'attendant pas à une matrice de mise à jour fréquemment (ou ne s'attend pas à ce qu'il soit en plus de mettre à jour la balance IMG). Que se passe-t-il si vous venez d'animer la matrice ou du conteneur individuellement? Peut-être qu'une approche plus directe consiste à attirer manuellement à une toile (cela vous donnerait certainement plus de contrôle explicite sur ce qui se passe et une meilleure performance optimale)?


L'animation Android fonctionne parfaitement. C'est vraiment une question mathématique. Je suis à l'échelle de l'imageView 1: 1 (l'imageView est échelonné de 0,5 à 1 sur l'axe X et Y), mais la matrice d'image a un rapport différent (3: 1 pour une image de paysage par exemple). Et je ne trouve pas la formule matricielle qui fonctionnerait pour chaque cas.


Est-ce que quelque chose sur les lignes de ce travail ... Float Aspecratio = TRUCLATECROPX / TRUCLATÉTRAPY; matrix.posscale (aspratio * zoom, zoom); Dire que l'image est écrasée pendant l'animation, mais pas avant et après suggère que cela ne fonctionnera pas. Peut-être que quelque chose comme ça est nécessaire ... Float Zoomx = 1,0f + Valeur * Quempleur; (juste une hypothèse)



2
votes

Vous pouvez avoir un enfant voir code> d'un groupe de visitement code> qui dépasse les limites du parent. Ainsi, par exemple, disons que la partie claire de votre image ci-dessus est la vue parent, et le imageview code> est la vue enfant, puis nous devons simplement augmenter l'image. Pour ce faire, commencez par un framelayout code> avec des limites spécifiques. Par exemple, dans xml code>: xxx pré>

ou par programme: p> xxx pré>

suivant, ajoutez le imageview enfant. Vous pouvez soit le déclarer dans xml code>: p> xxx pré>

et récupérez-le en utilisant p> xxx pré>

ou , vous pouvez le créer programmatiquement: p> xxx pré>

de toute façon, vous devrez le manipuler. Pour définir les limites code> ImageView CODE> pour dépasser son parent, vous pouvez le faire: P>

$.with(image).click(new Function() {
    @Override
    public void invoke($ droidQuery, Object... params) {

        //scale down
        if (image.getWidth() != parent.getWidth()) {
            droidQuery.animate("{ width: " + parent.getWidth() + ", " +
                                 "height: " + parent.getHeight() + ", " +
                                 "x: " + Float.valueOf(ViewHelper.getX(parent)) + ", " +//needs to include a decimal in the string so droidQuery knows its a float.
                                 "y: " + Float.valueOf(ViewHelper.getY(parent)) + //needs to include a decimal in the string so droidQuery knows its a float.
                               "}",
                               400,//or some other millisecond value for duration
                               $.Easing.LINEAR,//specify the interpolator
                               $.noop());//don't do anything when complete.
        }
        //scale up
        else {
            droidQuery.animate("{ width: " + parent.getWidth()*2 + ", " +
                                 "height: " + parent.getHeight()*2 + ", " +
                                 "x: " + x + ", " +//needs to include a decimal in the string so droidQuery knows its a float.
                                 "y: " + y + //needs to include a decimal in the string so droidQuery knows its a float.
                               "}",
                               400,//or some other millisecond value for duration
                               $.Easing.LINEAR,//specify the interpolator
                               $.noop());//don't do anything when complete.
        }


    }
});


4 commentaires

Je ne veux pas inclure de Framelayout autour de chaque imageView car cela affecterait les performances. Mais votre réponse affiche l'animation correctement.


@ Thierry-Dimitriroy Vous pouvez ajouter l'application Application Attribute Android: HardwareAscelerated = "true" dans votre androidmanifest.xml , qui devrait prendre soin de votre problème de performance.


@ Thierry-Dimitriroy - En outre, je supposerais que d'autres solutions qui n'utilisent pas une vue parent ne seront effectivement plus préjudiciables à la performance, car elles incluaient des manipulations bitmap ou des graphiques avancés.


L'utilisation d'un parent pour l'animation réduirait la performance car elle nécessite une passe de mise en page. En mettant en scène le bitmap, la manipulation est effectuée sur le GPU pendant l'animation.



2
votes

Essayez avec ce xxx


0 commentaires

7
votes

Je me rends compte que vous (et les autres réponses) tentent de résoudre ce problème à l'aide de la manipulation de matrice, mais j'aimerais proposer une approche différente avec le même effet visuel que décrit dans votre question.

à la réserve de Utilisation d'une matrice pour manipuler sur une zone visible de l'image (vue), pourquoi ne pas définir cette zone visible en termes de coupant em>? Il s'agit d'un problème assez simple à résoudre: tout ce que nous avons à faire est de définir le rectangle visible et de ne pas tenir compte de tout contenu qui tombe en dehors de ses limites. Si nous anime ensuite ces limites, l'effet visuel est comme si la culture limite l'échelle de haut en bas. P>

Heureusement, un CANVAS CODE> prend en charge la découpage via une variété de Clip * () Code> Méthodes pour nous aider ici. L'animation des limites de coupure est facile et peut être faite de la même manière que dans votre propre code de code. P>

Si vous jetez tout ensemble dans une simple extension d'un imageview code> (pour l'incitation de l'encapsulation), vous obtiendrez quelque chose qui regarde ceci: P>

<mh.so.img.ClippingImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/dog" />


0 commentaires