Android 用于按钮单击的扩展圆圈动画

Question

有谁知道如何实现这样的按钮转换:

Answer 1

很简单=]

第 1 步 - 使用 CardView(您可以使用另一个 ViewGroup)和按钮创建布局。 卡片 View 必须是不可见的像这样:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#000">

    <Button
        android:id="@+id/btn_go"
        android:text="Go!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.v7.widget.CardView
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="200dp"
        android:visibility="invisible"/>
</RelativeLayout>

设置 2 - 创建一个在 View 中制作圆形显示的方法:

private void circularRevealCard(View view){
        float finalRadius = Math.max(view.getWidth(), view.getHeight());

        // create the animator for this view (the start radius is zero)
        Animator circularReveal = ViewAnimationUtils.createCircularReveal(view, 0, 0, 0, finalRadius * 1.1f);
        circularReveal.setDuration(300);

        // make the view visible and start the animation
        view.setVisibility(View.VISIBLE);

        circularReveal.start();
    }

第 3 步 - 监听按钮中的点击并为 CardView 设置动画

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        Button goBtn = (Button) findViewById(R.id.btn_go);
        final CardView cardView = (CardView) findViewById(R.id.card);

        goBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                circularRevealCard(cardView);
            }
        });
    }

就是这样。您将获得与您提供的图像相同的结果(您只需对其进行润色)

结果:

编码愉快!