这很容易 =]
步骤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);
}
});
}
就是这样了,您将获得与您提供的图像相同的结果(您只需要对其进行修改)
结果:
祝您编码愉快!