android - Girar una imagen con animación

android-animation android-imageview

Question

Lo que tengo

Tengo una imagen de flecha (como la de la izquierda). Cuando el usuario hace clic en él, debe girar 180 grados con una animación y debe verse como la correcta.

Que he hecho

private void rotate(float degree, final int toggleV) {

        final RotateAnimation rotateAnim = new RotateAnimation(0.0f, degree,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);

        rotateAnim.setDuration(500);
        toggle.startAnimation(rotateAnim);
        rotateAnim.setAnimationListener(new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {


                if (toggleV == 1)
                    toggle.setImageResource(R.drawable.toggle_up);
                else
                    toggle.setImageResource(R.drawable.toggle_down);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }

El problema

Veo que la animación funciona bien pero hay un pequeño parpadeo al configurar la imagen. Puede deberse a la diferencia horaria cuando finaliza la animación y se establece la imagen.

¿Cómo puedo eliminar este problema de parpadeo? ¿Tienes un mejor enfoque para hacer esto?

Answer 1

¿Por qué no usas RotateAnimation?

cree una carpeta llamada anim en res y un archivo llamado rotator.xml dentro de res / anim.

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="400"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360"/>

Aquí una rotación completa se completará en 4000 ms (4 segundos). Ahora agregue una imagen PNG que desee rotar en su carpeta dibujable. Luego abra res / main.xml, después de eliminar el textView predeterminado en el diseño, agregue un ImageView y un botón en el diseño. Establezca la propiedad src de ImageView como su nombre de archivo de la imagen agregada, por ejemplo, android: src = "@ drawable / myimg" Ok, permite editar la clase principal. En el botón onClick () del botón, agregue el código necesario para ejecutar la animación. Compruebe el siguiente código.

public class AnimationActivity extends Activity {

    public ImageView  myImage ;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        myImage = (ImageView)findViewById(R.id.imageView1);
        final Animation myRotation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotator);
        ((Button)findViewById(R.id.button1)).setOnClickListener(new OnClickListener()    {
            @Override
            public void onClick(View arg0) {
                myImage.startAnimation(myRotation);
            }
        });
    }
}

Answer 2

En primer lugar, ¿cuál es su requisito mínimo de SDK? En caso de que sea al menos Android 3.0, puedes usar el nuevo marco de animación y animar tu imagen con algo como esto:

imageView.animate().rotation(180).start();

Acerca del parpadeo: no restablecería la imagen de origen de ImageView después de la rotación, solo dejaría el original y me aseguraría de que la animación de rotación se complete después de la animación, dejando la imagen girada. El parpadeo es probablemente causado por la repetición / redibujo de la vista al cambiar la imagen de origen.

Otros artefactos visuales (¿parpadeo?) Pueden ser causados ​​porque la imagen girada original y la imagen estática girada pueden diferir en unos pocos píxeles.

Answer 3

Puede usar setFillAfter si desea setFillAfter el estado de su animación.

Answer 4

Si yo fuera tú, usaría ViewPropertyAnimator (disponible en API 12). Su sintaxis es más directa de la OMI.
El uso sería:

toggle.animate().rotation(0.5f);

Answer 5

Código Verificado: (Puedes seguir mi solución)

imageView.setImageResource(R.drawable.ic_arrow_up);

boolean up = true;

if (!up) { 
    up = true; 
    imageView.startAnimation(animate(up)); 
} else { 
    up = false; 
    imageView.startAnimation(animate(up)); 
}

private Animation animate(boolean up) {
    Animation anim = AnimationUtils.loadAnimation(this, up ? R.anim.rotate_up : R.anim.rotate_down);
    anim.setInterpolator(new LinearInterpolator()); // for smooth animation
    return anim;
}

drawable / ic_arrow_up.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#3d3d3d"
        android:pathData="M7.41,15.41L12,10.83l4.59,4.58L18,14l-6,-6 -6,6z"/>
</vector>

anim / rotate_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:fillEnabled="true">
    <rotate
        android:duration="200"
        android:fromDegrees="-180"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="0" />
</set>

anim / rotate_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:fillEnabled="true">
    <rotate
        android:duration="200"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="180" />
</set>

Utilicé ese código. Porque esto guardará el estado de la animación:

android:fillAfter="true"
android:fillEnabled="true"