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

結束

代碼很簡單,應該有和我同樣,見過這個效果可是說不出名字,知道的就當溫習了哈哈,不知道能夠收藏點贊以備不時只需 哇額啊（〜^㉨^)〜