Android - 如何使用 Google Forms 等动画更改 EditText 线条颜色？

Question

我正在尝试实现类似于谷歌表单的动画，如下面的 gif 所示:

EditText 的底线应该随着从中心开始的填充动画改变颜色。 这可能很容易，但我是 android 的新手，我没有找到任何关于这个问题的在线资源。谁能给我一点提示或提供一些教程的链接，告诉我该怎么做？

Answer 1

我认为谷歌通过 ViewAnimationUtils.createCircularReveal 做到了这一点。

这是我如何实现这种效果的(注意它是针对 api 21 及更高版本)

另请注意，我使用触摸点以获得更好的用户体验

所以我们需要以下内容: selector_line_bellow.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="true"
          android:state_focused="true">
        <layer-list>
            <item android:bottom="-25dp">
                <shape android:shape="line">
                    <solid android:color="@android:color/transparent"/>
                    <stroke
                        android:width="3dp"
                        android:color="#017ba7"/>
                </shape>
            </item>

        </layer-list>
    </item>

    <!-- default-->
    <item >
        <layer-list>
            <item android:bottom="-25dp">
                <shape android:shape="line">
                    <solid android:color="@android:color/transparent"/>
                    <stroke
                        android:width="3dp"
                        android:color="#11017ba7"/>
                </shape>
            </item>
        </layer-list>

    </item>
</selector>

我们的 EditText 看起来像这样

<EditText
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:background="@drawable/selector_line_bellow"
                android:layout_margin="@dimen/margin_big"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:layout_height="wrap_content"/>

最后一次触摸是在您的 Activity 类中或将使用此 EditText 的任何地方添加这段代码

editText.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction()==MotionEvent.ACTION_DOWN) {
                ViewAnimationUtils.createCircularReveal(editText,
                        (int) event.getX(),
                        (int) event.getY(),
                        0,
                        editText.getHeight() * 2).start();
            }
            return false;
        }
    });