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

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

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

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

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

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

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

结束

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