如何实现顺利展开/折叠动画 [英] How to achieve smooth expand/ collapse animation
问题描述
我指的展开/折叠动画code发现在这里。
I'm referring the expand / collapse animation code found at here.
<一个href="http://stackoverflow.com/questions/4946295/android-expand-collapse-animation/13381228#13381228">Android:展开/折叠动画
虽然它的工作原理，它并没有这样做的工作做好。动画并不顺利。
Although it works, it doesn't done the job well. The animation isn't smooth.
我做的code一些日志记录。
I do some logging 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 is printed.
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
新高出现每100毫秒〜。所以，动画的FPS是10fps左右
我想看看有什么是理想的动画帧速率。我删除 v.requestLayout（）; 。我碰到下面的记录。
I want to see what is the ideal animation frame rate. I remove the v.requestLayout();. I get the following logging.
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
新的高度在每周〜20毫秒。所以，动画的FPS约50fps的
当然，我不能只删除 requestLayout ，因为用户界面将不会更新在屏幕上。
Of course, I can't just remove requestLayout, as UI won't updated on screen.
我想知道，是否有任何改进都可以做，以实现动画FPS封闭50fps的？我已经看到了一些商业化的产品与流畅的展开/折叠的例子。所以，我认为这是一件可以实现的。只是，我不知道到底如何。
I was wondering, is there any improvement can be done, to achieve animation FPS closed to 50fps? I had seen some commercial product with smooth Expand/collapse example. So, I think this is something achievable. Just that, I'm not sure exactly how.
我的布局code为如下：
My layout code is as followed :
<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>
我想从
其中的榜样的我能想到的是的 https://play.google.com/store/apps/details?id=ch.bitspin.timely 。尝试从它的商店菜单项调用下面的对话框。您将如何实现平滑的动画。不完全知道他们是如何做到这一点。
One of the "role models" I can think of is https://play.google.com/store/apps/details?id=ch.bitspin.timely. Try to invoke the below dialog from its Shop menu item. You will realize how smooth their animation is. Not exactly sure how they achieve that.
推荐答案
这些是在Github上的SlideExpandibleList一个很好的例子。
These is a very good example on SlideExpandibleList in Github.
<一个href="https://github.com/tjerkw/Android-SlideExpandableListView">https://github.com/tjerkw/Android-SlideExpandableListView
希望这将帮助你实现流畅的动画和崩溃。
Hope this will help you to achieve smooth animation and collapse.
在这个例子中，它保存的扩大的列表项的状态。所以，即使你会向下滚动列表，它不会让展开的列表项关闭。
In this example , it saved the state of expand list item. So even if you will scroll down the list it wont let the expanded list item to close.
在这个例子中展开或折叠事件给出的按钮，所以你需要更改列表项的父布局。
In this example expand or collapse event is given on Button, so you need to change it List item parent layout.
我附上了截屏。
希望这会帮助你。
这篇关于如何实现顺利展开/折叠动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
