Animation de l'échelle de l'image Android par rapport au point central

88

J'ai un ImageView et j'y fais une animation à l'échelle simple. Code très standard.

Mon scale_up.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="1"
           android:fromYScale="1"
           android:toXScale="1.2"
           android:toYScale="1.2"
           android:duration="175"/>
</set>

Mon code d'animation:

Animation a = AnimationUtils.loadAnimation(this, R.anim.scale_up);
((ImageView) findViewById(R.id.circle_image)).startAnimation(a);

Le problème:

Lorsque l'image est mise à l'échelle, elle n'est pas mise à l'échelle à partir du centre, mais à partir du coin supérieur gauche. En d'autres termes, la version mise à l'échelle de l'image n'a pas le même point que le centre, mais elle a le même point en haut à gauche. Voici un lien qui explique ce que je veux dire. La première image est la façon dont l'animation est mise à l'échelle et la deuxième image est la façon dont je veux qu'elle soit mise à l'échelle. Il devrait garder le même point central. J'ai essayé de mettre en place la gravité sur l'image, sur le conteneur, en alignant à gauche ou à droite, elle est toujours à l'échelle. J'utilise RelativeLayout pour l'écran principal et ImageView est situé dans un autre RelativeLayout, mais j'ai essayé d'autres mises en page, aucun changement.

android android-layout android-animation scale Tomislav Markovski
la source

Réponses:

76

Oubliez la traduction supplémentaire, définie android:pivotX, android:pivotYà la moitié de la largeur et de la hauteur et elle sera mise à l'échelle à partir du centre de l'image.

Steven Veltema
la source
2
pivotXet pivotYdevrait être réglé à la moitié de viewportWidthet viewportHeightpour être exact.
toobsco42
162

50% est le centre de la vue animée.

50%p est le centre du parent

<scale
    android:fromXScale="1.0"
    android:toXScale="1.2"
    android:fromYScale="1.0"
    android:toYScale="1.2"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="175"/>
Jiang Qi
la source
30
pour moi 50% ont fait le travail (sans p)
agamov
5
il doit être sans p s'il est relatif à la largeur ou à la hauteur du composant auquel vous appliquez l'animation. p fait référence au parent du composant auquel vous appliquez l'animation.
Alan Deep
Comment utiliser 50%pdans les fichiers Java, au lieu de XML?
Nikola K.
6
nouveau ScaleAnimation (1.0f, 1.2f, 1.0f, 1.2f, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
Jiang Qi
Il y a aussi "un" - Animation.ABSOLUTE à définir en px.
Zon
120

La réponse fournie par @stevanveltema et @JiangQi est parfaite, mais si vous voulez une mise à l'échelle à l'aide du code, vous pouvez utiliser ma réponse.

// first 0f, 1f mean scaling from X-axis to X-axis, meaning scaling from 0-100%
// first 0f, 1f mean scaling from Y-axis to Y-axis, meaning scaling from 0-100%
// The two 0.5f mean animation will start from 50% of X-axis & 50% of Y-axis, i.e. from center

ScaleAnimation fade_in =  new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
fade_in.setDuration(1000);     // animation duration in milliseconds
fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
view.startAnimation(fade_in);
Rohan Kandwal
la source
1
@ T.Todua Quelles erreurs? Veuillez poser une nouvelle question et renvoyer à cette réponse.
Rohan Kandwal
7

Vous pouvez utiliser l'animation de traduction dans votre ensemble pour compenser cela. Vous devrez probablement modifier les valeurs toXDelta et toYDelta pour bien faire les choses afin de maintenir l'image centrée.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="1.2"
        android:toYScale="1.2"
        android:duration="175"/>
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="-20%"
        android:toYDelta="-20%"
        android:duration="175"/>
</set>
Aldryd
la source