Cómo lograr una animación suave de expandir / contraer
Me refiero al código de animación expandir / contraer que se encuentra aquí.
Android: expandir / contraer animación
Aunque funciona, no hace bien el trabajo. La animación no es fluida.
Hago algo de registro en el código.
public static void expand(final View v) {
v.measure(MeasureSpec.makeMeasureSpec(((View)v.getParent()).getWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(1024, MeasureSpec.AT_MOST));
final int targtetHeight = v.getMeasuredHeight();
v.getLayoutParams().height = 0;
v.setVisibility(View.VISIBLE);
Animation a = new Animation()
{
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
v.getLayoutParams().height = interpolatedTime == 1
? LayoutParams.WRAP_CONTENT
: (int)(targtetHeight * interpolatedTime);
Log.i("CHEOK", "E v.getLayoutParams().height = " + v.getLayoutParams().height);
v.requestLayout();
}
Se imprime el siguiente mensaje de registro.
10-09 12:29:58.808: I/CHEOK(7874): E v.getLayoutParams().height = 0
10-09 12:29:58.808: I/CHEOK(7874): E v.getLayoutParams().height = 0
10-09 12:29:58.918: I/CHEOK(7874): E v.getLayoutParams().height = 11
10-09 12:29:59.015: I/CHEOK(7874): E v.getLayoutParams().height = 35
10-09 12:29:59.117: I/CHEOK(7874): E v.getLayoutParams().height = 64
10-09 12:29:59.215: I/CHEOK(7874): E v.getLayoutParams().height = 85
10-09 12:29:59.316: I/CHEOK(7874): E v.getLayoutParams().height = -2
10-09 12:29:59.406: I/CHEOK(7874): E v.getLayoutParams().height = -2
Nueva altura ocurre cada ~ 100ms. Así, el FPS de la animación es de alrededor de 10fps.
Quiero ver cuál es la velocidad de cuadro de animación ideal. Quito elv.requestLayout();
. Me sale el siguiente registro.
10-09 12:32:06.547: I/CHEOK(8926): E v.getLayoutParams().height = 0
10-09 12:32:06.562: I/CHEOK(8926): E v.getLayoutParams().height = 0
10-09 12:32:06.605: I/CHEOK(8926): E v.getLayoutParams().height = 4
10-09 12:32:06.625: I/CHEOK(8926): E v.getLayoutParams().height = 7
10-09 12:32:06.644: I/CHEOK(8926): E v.getLayoutParams().height = 10
10-09 12:32:06.664: I/CHEOK(8926): E v.getLayoutParams().height = 14
10-09 12:32:06.679: I/CHEOK(8926): E v.getLayoutParams().height = 18
10-09 12:32:06.699: I/CHEOK(8926): E v.getLayoutParams().height = 22
10-09 12:32:06.715: I/CHEOK(8926): E v.getLayoutParams().height = 27
10-09 12:32:06.734: I/CHEOK(8926): E v.getLayoutParams().height = 32
10-09 12:32:06.750: I/CHEOK(8926): E v.getLayoutParams().height = 37
10-09 12:32:06.769: I/CHEOK(8926): E v.getLayoutParams().height = 42
10-09 12:32:06.785: I/CHEOK(8926): E v.getLayoutParams().height = 47
10-09 12:32:06.804: I/CHEOK(8926): E v.getLayoutParams().height = 52
10-09 12:32:06.828: I/CHEOK(8926): E v.getLayoutParams().height = 59
10-09 12:32:06.840: I/CHEOK(8926): E v.getLayoutParams().height = 62
10-09 12:32:06.863: I/CHEOK(8926): E v.getLayoutParams().height = 67
10-09 12:32:06.879: I/CHEOK(8926): E v.getLayoutParams().height = 71
10-09 12:32:06.894: I/CHEOK(8926): E v.getLayoutParams().height = 75
10-09 12:32:06.910: I/CHEOK(8926): E v.getLayoutParams().height = 79
10-09 12:32:06.929: I/CHEOK(8926): E v.getLayoutParams().height = 82
10-09 12:32:06.945: I/CHEOK(8926): E v.getLayoutParams().height = 85
10-09 12:32:06.965: I/CHEOK(8926): E v.getLayoutParams().height = 88
10-09 12:32:06.984: I/CHEOK(8926): E v.getLayoutParams().height = 89
10-09 12:32:07.000: I/CHEOK(8926): E v.getLayoutParams().height = 91
10-09 12:32:07.019: I/CHEOK(8926): E v.getLayoutParams().height = 91
10-09 12:32:07.039: I/CHEOK(8926): E v.getLayoutParams().height = -2
10-09 12:32:07.054: I/CHEOK(8926): E v.getLayoutParams().height = -2
Nueva altura ocurre cada ~ 20ms. Así, el FPS de la animación es de alrededor de 50 fps.
Por supuesto, no puedo simplemente quitarrequestLayout
, como la interfaz de usuario no se actualiza en la pantalla.
Me preguntaba, ¿se puede hacer alguna mejora para lograr que los FPS de animación se cierren a 50 fps? Había visto un producto comercial con un suave ejemplo de expandir / contraer. Entonces, creo que esto es algo alcanzable. Sólo eso, no estoy seguro de cómo exactamente.
Mi código de diseño es el siguiente:
<LinearLayout
android:clickable="true"
android:id="@+id/chart_linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/dummy"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:width="0dp"
android:layout_weight="0.6"
android:layout_height="wrap_content"
android:gravity="left"
android:textSize="20sp"
android:textColor="#ff000000"
android:text="Summary chart" />
<TextView
android:id="@+id/chart_price_text_view"
android:layout_width="0dp"
android:width="0dp"
android:layout_weight="0.4"
android:layout_height="wrap_content"
android:gravity="right"
android:textSize="20sp"
android:textColor="#ffF76D3C"
android:text="$2.99" />
</LinearLayout>
<TextView
android:visibility="gone"
android:id="@+id/chart_description_text_view"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/currency_exchange_description"
android:textColor="#ff626262"
android:textSize="15sp" />
</LinearLayout>
Deseo realizar una animación suave enchart_description_text_view
desde
Uno de los"modelos a seguir" Se me ocurre eshttps://play.google.com/store/apps/details?id=ch.bitspin.timely. Intenta invocar el siguiente diálogo desde sutienda opción del menú. Te darás cuenta de cuán suave es su animación. No estoy exactamente seguro de cómo logran eso.