Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

时间:2021-04-23 06:20:21

Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

前言: 每次写之前都会来一段(废)话.{心塞...}

Google Play首页两个tab背景用了这个效果,三星计算器用了这个效果,酷安也看见这个效果,但就是叫不出名字!!!抓狂啊!!!

没办法,由于这个效果类似 涟漪效果,所以我就用** Ripple 为关键字,找过RippleDrawable** ,但是没发现...最后在Google的帮助下,我从一个陌生的网站看到了Reveal Effect中文翻译为:揭示效果(翻译不对你来咬我啊,哈哈哈2333)

好了,废话不多说了,先来看个效果吧.

Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

ps:图是studio录的mp4,然后转的,gif有点卡顿感,实际效果很顺滑

核心代码

ViewAnimationUtils.createCircularReveal(
View view,//目标view
int centerX,//开始动画的起点x坐标(相对于目标view而言)
int centerY,//开始动画的起点y坐标(相对于目标view而言)
float startRadius,//初始半径
float endRadius//结束半径
);

官方文档: ViewAnimationUtils.createCircularReveal

example展示

1. activity layout 布局

<LinearLayout
android:id="@+id/activity_reveal_effect"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.didikee.demos.ui.activity.RevealEffectActivity"> <View
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@color/colorAccent"
/>
<Button
android:id="@+id/bt_action"
android:text="展开/收缩"
android:layout_width="match_parent"
android:layout_height="wrap_content"/> </LinearLayout>

**2. java 代码 **

    private View view;
private double radio; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_reveal_effect);
view = findViewById(R.id.view);
findViewById(R.id.bt_action).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
createAnimation(view).start();
}
});
} @TargetApi(Build.VERSION_CODES.LOLLIPOP)
public Animator createAnimation(View v) { Animator animator;
if (radio == 0L) {
radio = Math.sqrt(Math.pow(view.getWidth(), 2) + Math.pow(view.getHeight(), 2));
}
if (isOn) {
animator = ViewAnimationUtils.createCircularReveal(
v,// 操作的视图
0,// 动画开始的中心点X
0,// 动画开始的中心点Y
(float) radio,// 动画开始半径
0);// 动画结束半径
} else {
animator = ViewAnimationUtils.createCircularReveal(
v,// 操作的视图
0,// 动画开始的中心点X
0,// 动画开始的中心点Y
0,// 动画开始半径
(float) radio);// 动画结束半径
}
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
if (!isOn) {
view.setVisibility(View.VISIBLE);
}
} @Override
public void onAnimationEnd(Animator animation) {
if (isOn) {
view.setVisibility(View.INVISIBLE);
}
isOn = !isOn;
} @Override
public void onAnimationCancel(Animator animation) { } @Override
public void onAnimationRepeat(Animator animation) { }
});
animator.setInterpolator(new DecelerateInterpolator());
animator.setDuration(500);
return animator;
}
private boolean isOn = true;//记录view的状态,第一次进去是可见的,记为true,不可见记为false

结束

代码很简单,应该有和我一样,见过这个效果但是说不出名字,知道的就当温习了哈哈,不知道可以收藏点赞以备不时只需 哇额啊(〜)〜