poner - Imagen giratoria. Lista de animación o rotación animada?(Androide)

imagenes en movimiento para perfil whatsapp

Question

Quiero crear una imagen de progreso rotativo y me pregunto cuál es la mejor manera de proceder. Puedo hacer que funcione con una lista de animación con, por ejemplo, 12 imágenes que cambian cada 100 ms. Esto funciona bien, pero es bastante tedioso crear 12 imágenes o para cada tamaño y resolución:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:drawable="@drawable/ic_loading_grey_on_black_01" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_02" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_03" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_04" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_05" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_06" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_07" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_08" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_09" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_10" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_11" android:duration="100" />
<item android:drawable="@drawable/ic_loading_grey_on_black_12" android:duration="100" />

Supongo que una solución más fácil es usar una imagen por resolución, sino rotarla para cada cuadro. En los recursos de la plataforma (android-sdk-windows / platforms ...) encontré algo llamado animated-rotate en el archivo drawable / search_spinner.xml, pero si copio el código obtengo un error del compilador quejándose de android: framesCount y android: frameDuration (Google APIs 2.2 en Eclipse):

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/spinner_black_20"
android:pivotX="50%"
android:pivotY="50%"
android:framesCount="12"
android:frameDuration="100" />

También he intentado usar una animación de rotación repetida (usando en la carpeta de recursos de anim), pero en realidad prefiero el aspecto de la versión de la lista de animación.

¿Cuál es la forma recomendada de resolver este problema?

Answer 1

Encontré que la respuesta de vokilam es la mejor para crear una animación escalonada / escalonada. Fui a su sugerencia final e hice un widget personalizado, el único problema que encontré fue que la configuración de visibilidad no funcionaría porque estaba animada y, por lo tanto, siempre estaría visible ...

Ajusté su código (ProgressView.java, al que renombré como StaggeredProgress.java) así:

public class StaggeredProgress extends ImageView {

private Animation staggered;

public StaggeredProgress(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setAnimation(attrs);
}

public StaggeredProgress(Context context, AttributeSet attrs) {
    super(context, attrs);
    setAnimation(attrs);
}

public StaggeredProgress(Context context) {
    super(context);
}

private void setAnimation(AttributeSet attrs) {
    TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.StaggeredProgress);
    int frameCount = a.getInt(R.styleable.StaggeredProgress_frameCount, 12);  
    int duration = a.getInt(R.styleable.StaggeredProgress_duration, 1000);
    a.recycle();

    setAnimation(frameCount, duration);
}

public void setAnimation(final int frameCount, final int duration) {
    Animation a = AnimationUtils.loadAnimation(getContext(), R.anim.progress_anim);
    a.setDuration(duration);
    a.setInterpolator(new Interpolator() {

        @Override
        public float getInterpolation(float input) {
            return (float)Math.floor(input*frameCount)/frameCount;
        }
    });
    staggered = a;
    //startAnimation(a);
}

@Override
public void setVisibility(int visibility) {
    super.setVisibility(visibility);
    if( visibility == View.VISIBLE )
        startAnimation(staggered);
    else
        clearAnimation();

}


}

De esta manera, establecer la visibilidad de la vista comienza y detiene la animación según sea necesario ... ¡Muchas gracias de nuevo a vokilam!

Answer 2

La solución de SACPK definitivamente funciona. Otra solución puede ser utilizar <animated-rotate> como en la pregunta y eliminar android:framesCount="12" android:frameDuration="100" atributos para los que el compilador se queja. Todavía funciona incluso para mi imagen de 8 cuadros.

Sin embargo, no he descubierto cómo controlar la velocidad de la animación :(.

Answer 3

Tienes que crear un archivo xml dibujable como el siguiente:

Código:

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
android:toDegrees="360" android:drawable="@drawable/imagefile_to_rotate" />

Answer 4

vea ejemplos aquí http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/index.html

específicamente: barra de progreso

1. Incremental Demuestra indicadores de progreso rotativos grandes y pequeños que se pueden incrementar o disminuir en unidades.
2. Suave Demuestra indicadores de progreso de rotación continua grandes y pequeños que se utilizan para indicar un mensaje genérico de "ocupado".
3. Diálogos Demuestra un ProgressDialog, un cuadro de diálogo emergente que alberga una barra de progreso. Este ejemplo demuestra indicadores de progreso determinados e indeterminados.
4. En la barra de título Muestra una pantalla de actividad con un indicador de progreso cargado configurando la función de indicador de progreso de WindowPolicy.

Answer 5

Rotate drawable sugerido por Praveen no le dará control del conteo de cuadros. Supongamos que desea implementar un cargador personalizado que consta de 8 secciones:

Con el enfoque de animation-list , necesita crear 8 cuadros rotados por 45*frameNumber degrees manualmente. Alternativamente, puede usar el 1er cuadro y establecer la animación de rotación a él:

File res/anim/progress_anim.xml :

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite" />

Archivo MainActivity.java

Animation a = AnimationUtils.loadAnimation(getContext(), R.anim.progress_anim);
a.setDuration(1000);
imageView.startAnimation(a);

Esto le dará una animación suave en lugar de 8 pasos. Para solucionar esto, necesitamos implementar un interpolador personalizado:

a.setInterpolator(new Interpolator() {
    private final int frameCount = 8;

    @Override
    public float getInterpolation(float input) {
        return (float)Math.floor(input*frameCount)/frameCount;
    }
});

También puedes crear un widget personalizado:

Archivo res/values/attrs.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ProgressView">
        <attr name="frameCount" format="integer"/>
        <attr name="duration" format="integer" />
    </declare-styleable>
</resources>

Archivo ProgressView.java :

public class ProgressView extends ImageView {

    public ProgressView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setAnimation(attrs);
    }

    public ProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setAnimation(attrs);
    }

    public ProgressView(Context context) {
        super(context);
    }

    private void setAnimation(AttributeSet attrs) {
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.ProgressView);
        int frameCount = a.getInt(R.styleable.ProgressView_frameCount, 12);  
        int duration = a.getInt(R.styleable.ProgressView_duration, 1000);
        a.recycle();

        setAnimation(frameCount, duration);
    }

    public void setAnimation(final int frameCount, final int duration) {
        Animation a = AnimationUtils.loadAnimation(getContext(), R.anim.progress_anim);
        a.setDuration(duration);
        a.setInterpolator(new Interpolator() {

            @Override
            public float getInterpolation(float input) {
                return (float)Math.floor(input*frameCount)/frameCount;
            }
        });
        startAnimation(a);
    }
}

Archivo activity_main.xml :

<com.example.widget.ProgressView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_progress" 
    app:frameCount="8"
    app:duration="1000"/>

File res/anim/progress_anim.xml : listado arriba