那些遇到过的问题

如何实现平滑的展开/折叠动画

Che*_*eng 27 animation android

我指的是这里的扩展/折叠动画代码.

Android:展开/折叠动画

虽然它有效,但它不能很好地完成工作.动画不流畅.

我做了一些登录代码.

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();
        }
Run Code Online (Sandbox Code Playgroud)

将打印以下日志消息.

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
Run Code Online (Sandbox Code Playgroud)

每隔约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
Run Code Online (Sandbox Code Playgroud)

每隔约20ms就会出现新的高度.因此,动画的FPS约为50fps

当然,我不能只删除requestLayout,因为UI不会在屏幕上更新.

我在想,有什么改进可以做到,实现动画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>
Run Code Online (Sandbox Code Playgroud)

我想要进行流畅的动画chart_description_text_view从

折叠(在应用启动期间)

在此输入图像描述

扩展(当用户点击它时)

在此输入图像描述

我能想到的其中一个"榜样"是https://play.google.com/store/apps/details?id=ch.bitspin.timely.尝试从Shop菜单项调用以下对话框.你会意识到他们的动画是多么流畅.不确定他们是如何实现这一目标的.

在此输入图像描述

Hir*_*tel 88

你可以做到流畅的动画效果的观是这样的:

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);
    }
}
Run Code Online (Sandbox Code Playgroud)

希望它会对你有所帮助.

  • 当getMeasuredHeight返回错误值时,这不起作用,这在使用多行TextView时会发生.动画直到错误的值,而不是v.getLayoutParams().height = interpolatedTime == 1？LayoutParams.WRAP_CONTENT只需打开其余部分而不需要动画. (4认同)

Jer*_*mie 22

在最简单的做动画的方式是通过添加以下到您的XML为您的线性布局:

android:animateLayoutChanges="true"
Run Code Online (Sandbox Code Playgroud)

它运行良好,直接从Android使用默认动画

  • 这创造了一个非常丑陋的动画IMO. (6认同)
  • 很好地指出了这一点.首先应该首先尝试,但通常需要一个自定义动画. (3认同)

Ash*_*ini 16

在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);
}
Run Code Online (Sandbox Code Playgroud)

并在您的代码中使用此方法.我已在TextView中使用它并进行了测试.您可以将此方法中的视图作为参数传递.

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

        //TO Collapse
        expandOrCollapse(tv,"collapse");
Run Code Online (Sandbox Code Playgroud)

和享受顺利折叠和扩展动画................

  • 使用String作为参数是非常糟糕的做法.只需使用"布尔展开"即可.也 (34认同)

Mus*_*dov 13

这是 kotlin 方式的平滑动画。我在 @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(
            0,
            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)
    }
Run Code Online (Sandbox Code Playgroud)

坍塌

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)
    }
Run Code Online (Sandbox Code Playgroud)

这是输出结果

然后您可以根据需要旋转图标。（

// Expande
exImgHeader.animate().rotation(180f).start()
// Collapse
exImgHeader.animate().rotation(0f).start()
Run Code Online (Sandbox Code Playgroud)

）结果将是这样的：

在此输入图像描述

Ami*_*pta 7

这是Github中SlideExpandibleList的一个很好的例子.

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

希望这能帮助您实现流畅的动画和崩溃.

在此示例中,它保存了展开列表项的状态.因此,即使您将向下滚动列表,它也不会让扩展列表项关闭.

在此示例中,在Button上给出了展开或折叠事件,因此您需要更改它的列表项父布局.

我附了屏幕截图.

希望这会帮助你.

在此输入图像描述

归档时间：

查看次数：

66328 次

最近记录：

7 年，10 月 前
Android:展开/折叠动画 435
更多相关链接
相关归档
Android列表视图拖放排序 132
使用改进使用GSON获取嵌套的JSON对象 104
在DialogFragment中为AlertDialog增加自定义视图的问题 47
Gradle在Android上使用不同的密钥签名 43
android - 如何让按钮闪烁？ 41
使用TableLayout跨越列 39
如果我尝试启动服务,为什么会出现InstantiationException？ 36
ContentProvider insert()总是在UI线程上运行？ 35
ContentLoadingProgressBar的实际用法 35
动画仅在我触摸屏幕时启动 0
难疑归档
为什么减去这两次(在1927年)给出一个奇怪的结果？ 6628
基于表单的网站身份验证的权威指南 5311
不同浏览器中URL的最大长度是多少？ 4676
如何测试私有函数或具有私有方法,字段或内部类的类？ 2593
如何在Python中删除尾部换行符？ 1593
对于数组,为什么a [5] == 5 [a]？ 1567
我为什么要使用指针而不是对象本身？ 1532
何时使用struct？ 1347
按列名从pandas DataFrame中删除列 1136
git:撤消所有工作目录更改,包括新文件 1108