如何实现流畅的展开/折叠动画

相关文章推荐
帅呆的茴香 · electron 启动加载动画效果 - ...· 6 天前 ·
英俊的蚂蚁 · 通过MyBatis访问表格存储_表格存储(T ...· 3 月前 ·
刚毅的羊肉串 · kubernetes初始化报错Get ...· 1 年前 ·
聪明的冰棍 · flutter 上传图片 ...· 1 年前 ·
小眼睛的灭火器 · 关于ActiveMQ+Zookeeper做集 ...· 1 年前 ·
温柔的黄瓜 · vue-cli4修改打包后文件后缀（css， ...· 1 年前 ·
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();
下面的日志信息被打印出来。
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
新的高度每隔~100ms发生一次。因此，动画的FPS约为10fps。
我想看看什么是理想的动画帧率。我删除了v.requestLayout();。我得到以下记录。
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
新的高度每隔~20ms发生一次。因此，动画的FPS约为50fps。
当然，我不能直接删除requestLayout，因为用户界面不会在屏幕上更新。
我在想，有没有什么改进的方法，可以使动画的FPS接近50fps？我见过一些商业产品有流畅的扩展/折叠的例子。所以，我想这是可以实现的。只是，我不确定具体怎么做。
我的布局代码如下。
        <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>
我希望在chart_description_text_view上执行流畅的动画。
Collapsing (During app startup)
Expanding (When user taps on it)
One of the "role models"我可以想到的是https://play.google.com/store/apps/details?id=ch.bitspin.timely.试着从其上调用以下对话框Shop菜单项。你会意识到他们的动画是多么流畅。不完全确定他们是如何实现的。
    2 个评论




    
Cheok Yan Cheng：
@shijuB 这就是我在问题中指出的那个链接。它没有提供流畅的动画。
Wayne：
你是否找到了使动画更流畅的方法？
android
animation
Cheok Yan Cheng发布于 2013-10-09
6 个回答
Hiren Patel发布于 2022-07-21
已采纳
0 人赞同

你可以做平滑的动画 of View这样。
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 it will help you.
    
USER_NAME：
当滑动面板有一个图片列表要显示时，这就不顺利了。有什么解决办法吗？
Shirane85：
当getMeasuredHeight返回一个错误的值时，这就不工作了，当你使用一个多行的TextView时就会发生这种情况。动画直到错误的值，比v.getLayoutParams().height = interpolatedTime == 1 ?LayoutParams.WRAP_CONTENT只是打开其余部分，没有动画。
Ravi Yadav：
@HirenPatel 如果我们想减缓扩张和崩溃的速度，那么你建议做哪些改变。
Sira Lam：
这与原帖中提到的代码完全相同，正如原帖中所说的那样，这是有问题的。这对我来说也不起作用，布局闪烁，没有动画到视图的最大高度。
MDT：
抄袭自stackoverflow.com/a/13381228/7873768
Jeremie D发布于 2022-07-21
0 人赞同

The 最简单的做动画的方法是在你的xml中为你的线性布局添加以下内容。
android:animateLayoutChanges="true"
它工作得很好，直接使用安卓系统的默认动画。
    
OneWorld：
很好地指出了这一点。人们总是应该先尝试一下，但很多时候人们需要一个自定义的动画。
The Berga：
这创造了一个非常难看的动画，IMO。
HASSAN MD TAREQ：
在按下后退按钮后，它就不工作了。有什么建议吗？
Sam Chen：
对我来说效果很好。谢谢!
Ashish Saini发布于 2022-07-21
0 人赞同

它很容易在视图上获得流畅的动画（扩展/折叠）。
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);
并在你的代码中使用这个方法。我已经在TextView中使用了这个方法，并且经过了测试。你可以在这个方法中作为参数传递你的视图。
        TextView tv=(TextView)findViewById(R.id.textview);
          //TO Expand 
         expandOrCollapse(tv,"expand");
        //TO Collapse
        expandOrCollapse(tv,"collapse");
享受流畅的折叠和展开动画................。
    
TjerkW：
使用字符串作为参数是非常糟糕的做法。只需使用一个 "布尔扩展"。还有
Jose_GD：
@TjerkW更好的做法还是让那expandOrCollapse的方法2种方法。expand和collapse。那如果在方法里面是一个设计的味道。它在做两件事，它应该只做一件事
Krzysztof Dziuba：
如果开始时是折叠的，则不工作，因为v.getHeight()返回0。
shohruh Maxmudov发布于 2022-07-21
0 人赞同

这里是kotlin方式的smoth动画。我在@TomEsterez的回答中加入了一些淡化动画。
  fun expand(v: View) {
        if (v.visibility == View.VISIBLE) return
        val durations: Long
        val matchParentMeasureSpec = View.MeasureSpec.makeMeasureSpec(
            (v.parent as View).width,
            View.MeasureSpec.EXACTLY
        val wrapContentMeasureSpec = View.MeasureSpec.makeMeasureSpec(
            View.MeasureSpec.UNSPECIFIED
        v.measure(matchParentMeasureSpec, wrapContentMeasureSpec)
        val targetHeight = v.measuredHeight
        // Older versions of android (pre API 21) cancel animations for views with a height of 0.
        v.layoutParams.height = 1
        v.visibility = View.VISIBLE
        durations = ((targetHeight / v.context.resources
            .displayMetrics.density)).toLong()
        v.alpha = 0.0F
        v.visibility = View.VISIBLE
        v.animate().alpha(1.0F).setDuration(durations).setListener(null)
        val a: Animation = object : Animation() {
            override fun applyTransformation(
                interpolatedTime: Float,
                t: Transformation
                v.layoutParams.height =
                    if (interpolatedTime == 1f) LinearLayout.LayoutParams.WRAP_CONTENT else (targetHeight * interpolatedTime).toInt()
                v.requestLayout()
            override fun willChangeBounds(): Boolean {
                return true
        // Expansion speed of 1dp/ms
        a.duration = durations
        v.startAnimation(a)
fun collapse(v: View) {
        if (v.visibility == View.GONE) return
        val durations: Long
        val initialHeight = v.measuredHeight
        val a: Animation = object : Animation() {
            override fun applyTransformation(
                interpolatedTime: Float,
                t: Transformation
                if (interpolatedTime == 1f) {
                    v.visibility = View.GONE
                } else {
                    v.layoutParams.height =
                        initialHeight - (initialHeight * interpolatedTime).toInt()
                    v.requestLayout()
            override fun willChangeBounds(): Boolean {
                return true
        durations = (initialHeight / v.context.resources
            .displayMetrics.density).toLong()
        v.alpha = 1.0F
        v.animate().alpha(0.0F).setDuration(durations)
            .setListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator) {
                    v.visibility = View.GONE
                    v.alpha = 1.0F
        // Collapse speed of 1dp/ms
        a.duration = durations
        v.startAnimation(a)
然后，如果你愿意，你可以旋转Icon。(
// Expande
exImgHeader.animate().rotation(180f).start()
// Collapse
exImgHeader.animate().rotation(0f).start()
Result will be like this:
    
Amit Gupta发布于 2022-07-21
0 人赞同

在Github的SlideExpandibleList上有一个非常好的例子。
https://github.com/tjerkw/Android-SlideExpandableListView
希望这能帮助你实现流畅的动画和倒塌。
在这个例子中，它保存了扩展列表项的状态。因此，即使你向下滚动列表，它也不会让展开的列表项关闭。
在这个例子中，扩展或折叠事件是在Button上给出的，所以你需要改变它的List item父布局。
我附上了屏幕截图。
Hope this will help you.
    
Sudarshan Bhat：
谢谢。但这不能代替真正的ExpandableListView，你想在一个特定的组内拥有一个巨大的列表。这里没有列表中的列表的概念。它只是一个列表和每个列表行内的动作，并有动画显示。不过这个库很不错。
Vivek Av：
在我的项目中加入这个库的编译命令是什么？@amit
Vikash Kumar Tiwari发布于 2022-07-21
0 人赞同

你可以在布局上应用CHANGING的过渡。
你可以使用下面的扩展函数，它可以用来在android的任何布局上应用CHANGING的过渡，通过传递以毫秒为单位的持续时间。
fun ViewGroup.setChangingTransition(animationDuration: Long) {
    val layoutTransition = LayoutTransition()