Animación de escala de imagen de Android relativa al punto central

88

Tengo un ImageView y le hago una animación a escala simple. Código muy estándar.

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

Mi código de animación:

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

El problema:

Cuando la imagen se escala, no se escala desde el centro, sino desde la esquina superior izquierda. En otras palabras, la versión escalada de la imagen no tiene el mismo punto que el centro, pero tiene el mismo punto superior izquierdo. Aquí hay un enlace que explica lo que quiero decir. La primera imagen es cómo se escala la animación, y la segunda imagen es cómo quiero que se escale. Debe mantener el punto central igual. He intentado configurar la gravedad en la imagen, en el contenedor, alineando a la izquierda o a la derecha, siempre se escala igual. Estoy usando RelativeLayout para la pantalla principal e ImageView está ubicado en otro RelativeLayout, pero probé otros diseños, sin cambios.

android android-layout android-animation scale Tomislav Markovski
fuente

Respuestas:

76

Olvídese de la traducción adicional, establezca android:pivotX, android:pivotYa la mitad del ancho y alto y se escalará desde el centro de la imagen.

Steven Veltema
fuente
2
pivotXy pivotYdebe establecerse en la mitad viewportWidthy viewportHeightpara ser exactos.
toobsco42
162

50% es el centro de la vista animada.

50%p es el centro de los padres

<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
fuente
30
para mí, el 50% hizo el trabajo (sin p)
agamov
5
debería estar sin p si es relativo al ancho o alto del componente al que está aplicando la animación. p se refiere al padre del componente al que está aplicando la animación.
Alan Deep
¿Cómo usar 50%pen archivos Java, en lugar de XML?
Nikola K.
6
new ScaleAnimation (1.0f, 1.2f, 1.0f, 1.2f, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
Jiang Qi
También hay "a" - Animation.ABSOLUTE para configurar en px.
Zona
120

La respuesta proporcionada por @stevanveltema y @JiangQi es perfecta, pero si desea escalar usando código, puede usar mi respuesta.

// 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
fuente
1
@ T.Todua ¿Qué errores? Haga una nueva pregunta y enlace a esta respuesta.
Rohan Kandwal
7

Puede usar la animación de traducción en su conjunto para compensar eso. Probablemente necesite ajustar los valores de toXDelta y toYDelta para hacerlo bien y mantener la imagen centrada.

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