Android扩展圆形动画用于按钮点击

Question

有人知道如何实现类似这个按钮的过渡效果吗？

- Minh Tran

---

请您在问题中增加更多的描述，以便清楚地说明您在按钮单击时具体想要实现什么。 - anddev84

我正在尝试使用类似于链接中的“现在说话”动画来过渡到下一个视图。我正在尝试使用SurfaceView来查看它是否符合我的要求。http://developer.android.com/reference/android/view/SurfaceView.html - Minh Tran

你有想到什么解决方法吗？ - Jakob Harteg

Answer 1

这很容易 =]

步骤1 - 使用CardView（您可以使用其他ViewGroup）和Button创建布局。 CardView必须是不可见的，就像这样：

<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 - 创建一个在视图中进行圆形揭示的方法：

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();
    }

第三步 - 监听按钮点击事件并为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);
            }
        });
    }

就是这样了，您将获得与您提供的图像相同的结果（您只需要对其进行修改）

结果：

祝您编码愉快！

- Leandro Borges Ferreira

---

谢谢@Leandro，但你能分享一下隐藏动画是什么样子的吗？ - MeLean