6

Estou tentando implementar uma animação suave na minha ProgressBar, mas, se eu aumento o tempo de duração, a animação deixa de ficar "suave".

Exemplo com 5 segundos:

5 segundos

Exemplo com 30 segundos:

30 segundos

ProgressBar background:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <padding android:top="1dp" />
            <solid android:color="#10444444" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" />
            <solid android:color="#20444444" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" />
            <solid android:color="#30444444" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="@color/black_thirty" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#3500D0" />
            </shape>
        </clip>
    </item>
</layer-list> 

Layout do ProgressBar:

<ProgressBar
    android:id="@+id/pb_loading"
    android:layout_width="match_parent"
    android:layout_height="8dp"
    android:indeterminate="false"
    android:layout_centerInParent="true"
    android:progress="100"
    android:progressDrawable="@drawable/my_progress_bar" />

Meu método de animacao:

private void startAnimation(){
    ProgressBar mProgressBar = (ProgressBar) findViewById(R.id.pb_loading);
    ObjectAnimator progressAnimator = ObjectAnimator.ofInt(mProgressBar, "progress", 100, 0);
    progressAnimator.setDuration(30000);
    progressAnimator.setInterpolator(new LinearInterpolator());
    progressAnimator.start();
}

1 Resposta 1

5
+50

Primeiro uma pequena explicação para entendermos porque é que isso acontece. Sabendo o porquê a solução é simples.

A animação consiste em variar a posição do ProgressBar, partindo da posição máxima até atingir a posição mínima. A variação é feita de forma linear ou seja, a variação é proporcional à variação do tempo.

Cada frame da animação é exibida em um momento específico entre o início o fim.
Quando o sistema de animação quer apresentar um frame usa o LinearInterpolator para obter o valor, correspondente a esse ponto no tempo, a atribuir ao ProgressBar.

É na transformação do valor temporal em valor de posição que o "problema" se manifesta.
Devido à diferença entre a amplitude do valor tempo e a do valor deslocamento haverá alturas em que, ao longo da variação do tempo, não haverá variação da posição. Quanto maior for essa diferença maior será esse efeito.

O grau de "suavidade" do deslocamento é função do tempo que demora cada nova posição a ser apresentada, quanto menor for o tempo mais "suave" parecerá.

Vamos analisar cada caso:

  • Animação de 5 segundos

    Amplitude do tempo - 5000 ms (0 -- 5000)
    Amplitude do deslocamento - 100 (100 -- 0)

    Cada variação do deslocamento demorará:

    100 -> 5000
      1 -> x
    
    x = 5000/100 => x = 50 ms 
    
  • Animação de 30 segundos

    Amplitude do tempo - 30000 ms (0 -- 30000)
    Amplitude do deslocamento - 100 (100 -- 0)

    Cada variação do deslocamento demorará:

    100 -> 30000
      1 -> x
    
    x = 30000/100 => x = 300 ms  
    

Pode observar que o tempo no segundo caso é 6 vezes superior ao do primeiro.

Verifica-se, de facto, que quanto maior for a diferença entre as amplitudes dos valores menos "suave" é o movimento.

A forma de diminuir essa diferença é aumentar a amplitude do deslocamento, definindo o valor do atributo android:max do ProgressBar, por exemplo, para 1000:

<ProgressBar
    android:id="@+id/pb_loading"
    android:layout_width="match_parent"
    android:layout_height="8dp"
    android:indeterminate="false"
    android:layout_centerInParent="true"
    android:progress="1000"
    android:max="1000"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:progressDrawable="@drawable/my_progress_bar"/>  

Essa alteração tem também de ser reflectida na criação do ObjectAnimator:

ObjectAnimator progressAnimator = ObjectAnimator.ofInt(mProgressBar, "progress", 1000, 0);

Fazendo o calculo para este valor:

Amplitude do tempo - 30000 ms (0 -- 30000)
Amplitude do deslocamento - 1000 (1000 -- 0)

Cada variação do deslocamento demorará:

1000 -> 30000
  1 -> x

x = 30000/1000 => x = 30 ms  

O deslocamento do ProgressBar é actualizado a cada 30ms. Com este valor o deslocamento ainda é mais "suave" do que no seu primeiro exemplo.

O valor ideal a escolher é aquele que produz um tempo de actualização igual ao intervalo entre frames em que a animação é apresentada.
Não sei a quantos Frames por segundo (fps) as animações no Android são apresentadas.

Supondo que são 30 fps, para o caso de 30s:

30 fps => 33.34 frames por milisegundo

x -> 30000
1 -> 33,34

x = 30000/33.33 => x = 900 

o valor a utilizar no atributo android:max será 900

1
  • O atributo android:max foi a chave! Havia tentado apenas com android:progress="1000". Muito obrigado
    – rsicarelli
    Commented 15/06/2015 às 18:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .