web-dev-qa-db-fra.com

Android animation d'échelle d'image par rapport au point central

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

Mon balance_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 redimensionnée, elle ne s'échelonne pas depuis le centre, mais depuis le 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 le même point situé en haut à gauche. Voici un lien qui explique ce que je veux dire. La première image montre l’échelle de l’animation, et la seconde, celle que je souhaite voir évoluer. Il devrait garder le point central le même. J'ai essayé de configurer la gravité sur l'image, sur le conteneur, en l'alignant à gauche ou à droite, elle est toujours la même. J'utilise RelativeLayout pour l'écran principal et ImageView est situé dans un autre RelativeLayout, mais j'ai essayé d'autres dispositions, aucun changement.

androidandroid-layoutandroid-animationscale
79
Tomislav Markovski

Oubliez la traduction supplémentaire, définissez Android:pivotX, Android:pivotY à la moitié de la largeur et de la hauteur et s’échelonne à partir du centre de l’image.

71
Steven Veltema

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%p"
    Android:pivotY="50%p"
    Android:duration="175"/>
149
Jiang Qi

Les réponses fournies par @stevanveltema et @JiangQi sont parfaites, mais si vous souhaitez mettre à l'échelle à l'aide de 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);
103
Rohan Kandwal

Vous pouvez utiliser l'animation de traduction dans votre jeu pour compenser cela. Vous devrez probablement ajuster les valeurs toXDelta et toYDelta pour obtenir le résultat souhaité, afin que l’image soit toujours 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>
6
Aldryd