How to achieve smooth increase / smoothing of animation

Question

I am referring to the expand / collapse animation code found here.

Android: expand / collapse animation

Despite the fact that it works, it does a poor job of this task. Animation is not smooth.

I make some notes in the code.

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(); } 

The following log message appears.

 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 

A new height occurs every ~ 100 ms. Thus, the FPS animation is about 10 frames per second

I want to see what the ideal animation frame rate is. I delete v.requestLayout(); . I get the following log.

 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 

A new height occurs every ~ 20 ms. So, FPS animation is about 50 frames per second

Of course, I can’t just delete requestLayout , as the user interface will not be updated on the screen.

I was wondering if there are any improvements to get the FPS animation closed to 50 frames per second? I saw a commercial product with a smooth Expand / Collapse example. So, I think this is something achievable. That's right, I don’t know exactly how to do it.

My layout code is as follows:

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

I want to perform smooth animation on chart_description_text_view from

Crash (on application launch)

Extension (when the user clicks on it)

One of the "role models I can think of is https://play.google.com/store/apps/details?id=ch.bitspin.timely . Try calling the dialog box below in the Shop menu. You will realize how smooth their animation, not quite sure how they achieve it.

Answer 1

This is a very good example on a SlideExpandibleList on Github.

https://github.com/tjerkw/Android-SlideExpandableListView

Hope this helps you achieve smooth animation and collapse.

In this example, he saved the state of the distribution list item. Therefore, even if you scroll down the list, it will not allow you to close the expanded list item.

In this example, the unlock or minimize event is fired on Button, so you need to change its parent list layout.

I have attached screenshots.

Hope this helps you.

Answer 2

You can make a Smooth Animation View as follows:

 public class ViewAnimationUtils { public static void expand(final View v) { v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 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); v.requestLayout(); } @Override public boolean willChangeBounds() { return true; } }; a.setDuration((int)(targtetHeight / v.getContext().getResources().getDisplayMetrics().density)); v.startAnimation(a); } public static void collapse(final View v) { final int initialHeight = v.getMeasuredHeight(); Animation a = new Animation() { @Override protected void applyTransformation(float interpolatedTime, Transformation t) { if(interpolatedTime == 1){ v.setVisibility(View.GONE); }else{ v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime); v.requestLayout(); } } @Override public boolean willChangeBounds() { return true; } }; a.setDuration((int)(initialHeight / v.getContext().getResources().getDisplayMetrics().density)); v.startAnimation(a); } } 

Hope this helps you.

Answer 3

The easiest way make animation - add the following to your xml for a linear layout:

 android:animateLayoutChanges="true" 

It works great and uses default animations directly from Android

Answer 4

It is very easy to get smooth animation (expand / collapse) in a view

 public void expandOrCollapse(final View v,String exp_or_colpse) { TranslateAnimation anim = null; if(exp_or_colpse.equals("expand")) { anim = new TranslateAnimation(0.0f, 0.0f, -v.getHeight(), 0.0f); v.setVisibility(View.VISIBLE); } else{ anim = new TranslateAnimation(0.0f, 0.0f, 0.0f, -v.getHeight()); AnimationListener collapselistener= new AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { v.setVisibility(View.GONE); } }; anim.setAnimationListener(collapselistener); } // To Collapse // anim.setDuration(300); anim.setInterpolator(new AccelerateInterpolator(0.5f)); v.startAnimation(anim); } 

And use this method in your code. I used in TextView and tested. You can pass your view in this method as a parameter.

  TextView tv=(TextView)findViewById(R.id.textview); //TO Expand expandOrCollapse(tv,"expand"); //TO Collapse expandOrCollapse(tv,"collapse"); 

ANd Enjoy smooth smoothing and unfolding animations ................