一园匹、前言

Circular Reveal Animations雳刺，官方稱(chēng)之為循環(huán)揭露動(dòng)畫(huà)效果，是一種用來(lái)顯示/隱藏一組UI界面元素的動(dòng)畫(huà)效果裸违，它是在API 21引入的，對(duì)應(yīng)的類(lèi)是ViewAnimationUtils本昏。

循環(huán)揭露動(dòng)畫(huà)效果可以和共享元素變換動(dòng)畫(huà)組合供汛，用來(lái)創(chuàng)造一些有意義的動(dòng)畫(huà)效果，自然地告訴用戶(hù)這個(gè)app有些什么東西涌穆，將會(huì)產(chǎn)生怎樣的效果怔昨。

二、效果圖

三宿稀、實(shí)現(xiàn)

在上面的例子中趁舀，依次發(fā)生了：

• 橘色的圓是一個(gè)共享元素，從MainActivity變換到CircularRevealActivity祝沸；
• 在CircularRevealActivity中有一個(gè)監(jiān)聽(tīng)器(listener)矮烹，用來(lái)監(jiān)聽(tīng)共享元素轉(zhuǎn)換動(dòng)畫(huà)的結(jié)束，當(dāng)動(dòng)畫(huà)結(jié)束時(shí)罩锐，做了這么兩件事：
  • 為T(mén)oolbar執(zhí)行了一個(gè)循環(huán)揭露動(dòng)畫(huà)
  • 為CircularRevealActivity中的視圖(Views)執(zhí)行了一個(gè)放大動(dòng)畫(huà)奉狈，使用的是以前的ViewPropertyAnimator類(lèi)

監(jiān)聽(tīng)共享元素進(jìn)入動(dòng)畫(huà)的結(jié)束

Transition transition = TransitionInflater.from(this).inflateTransition(R.transition.changebounds_with_arcmotion);
getWindow().setSharedElementEnterTransition(transition);
transition.addListener(new Transition.TransitionListener() {
    @Override
    public void onTransitionEnd(Transition transition) {
        animateRevealShow(mToolbar);
        animateButtonsIn();
    }
    ...
});

animateRevealShow(mToolbar)

private void animateRevealShow(View viewRoot) {
    int centerX = (viewRoot.getLeft() + viewRoot.getRight()) / 2;
    int centerY = (viewRoot.getTop() + viewRoot.getBottom()) / 2;
    int endRadius = Math.max(viewRoot.getWidth(), viewRoot.getHeight());
        
    Animator animator = ViewAnimationUtils.createCircularReveal(viewRoot, centerX, centerY, 0, endRadius);
    viewRoot.setVisibility(View.VISIBLE);
    animator.setDuration(1000);
    animator.setInterpolator(new AccelerateInterpolator());
    animator.start();
}

上述方法的重點(diǎn)是createCircularReveal (View view, int centerX, int centerY, float startRadius, float endRadius)：
view：要執(zhí)行循環(huán)揭露動(dòng)畫(huà)的View
centerX：循環(huán)揭露動(dòng)畫(huà)中心位置的X坐標(biāo)
centerY：循環(huán)揭露動(dòng)畫(huà)中心位置的Y坐標(biāo)
startRadius：循環(huán)揭露動(dòng)畫(huà)的起始半徑
endRadius：循環(huán)揭露動(dòng)畫(huà)的結(jié)束半徑

animateButtonsIn()

private void animateButtonsIn() {
    for (int i = 0; i < bgViewGroup.getChildCount(); i++) {
        View child = bgViewGroup.getChildAt(i);
        child.animate()
                .setStartDelay(100 + i*DELAY)
                .setInterpolator(interpolator)
                .alpha(1)
                .scaleX(1)
                .scaleY(1);
    }
}

上述方法為底部的4個(gè)圓執(zhí)行了一個(gè)放大動(dòng)畫(huà)，使用ViewPropertyAnimator類(lèi)涩惑。

四仁期、更多

還有一些不同的方式來(lái)創(chuàng)建循環(huán)揭露動(dòng)畫(huà)，關(guān)鍵是使用動(dòng)畫(huà)效果讓用戶(hù)更好地理解這個(gè)app有些什么東西竭恬，將會(huì)產(chǎn)生怎樣的效果跛蛋。

1. 從目標(biāo)視圖的中心創(chuàng)建循環(huán)揭露動(dòng)畫(huà)

public void revealGreenAtMiddle(View view) {
    int centerX = (bgViewGroup.getLeft() + bgViewGroup.getRight()) / 2;
    int centerY = (bgViewGroup.getTop() + bgViewGroup.getBottom()) / 2;
    int endRadius = (int) Math.hypot(bgViewGroup.getWidth()/2, bgViewGroup.getHeight()/2);

    Animator animator = ViewAnimationUtils.createCircularReveal(bgViewGroup, centerX, centerY, 0, endRadius);
    bgViewGroup.setBackgroundResource(R.color.green);
    animator.setDuration(getResources().getInteger(android.R.integer.config_longAnimTime));
    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.start();
}

2. 從目標(biāo)視圖的頂部創(chuàng)建循環(huán)揭露動(dòng)畫(huà)+底部按鈕動(dòng)畫(huà)

public void revealBlueAtTop(View view) {
    animateButtonsOut();

    int centerX = (bgViewGroup.getLeft() + bgViewGroup.getRight()) / 2;
    int centerY = 0;
    int endRadius = (int) Math.hypot(bgViewGroup.getWidth()/2, bgViewGroup.getHeight());

    Animator animator = ViewAnimationUtils.createCircularReveal(bgViewGroup, centerX, centerY, 0, endRadius);
    bgViewGroup.setBackgroundResource(R.color.blue);
    animator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationEnd(Animator animation) {
            animateButtonsIn();
        }
        ...
    });
    animator.setDuration(getResources().getInteger(android.R.integer.config_longAnimTime));
    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.start();
}

此處動(dòng)畫(huà)效果經(jīng)歷了以下3個(gè)步驟：

• 隱藏底部按鈕（通過(guò)控制按鈕的透明度、縮放比例）
• 從頂部執(zhí)行循環(huán)揭露動(dòng)畫(huà)
• 監(jiān)聽(tīng)器監(jiān)聽(tīng)到揭露動(dòng)畫(huà)執(zhí)行完后痊硕，顯示底部按鈕（還是通過(guò)控制按鈕的透明度赊级、縮放比例）

3. 在點(diǎn)擊位置創(chuàng)建循環(huán)揭露動(dòng)畫(huà)

首先，給橘色圓添加觸摸監(jiān)聽(tīng)事件寿桨，獲取點(diǎn)擊到的橘色圓的位置坐標(biāo)：

findViewById(R.id.iv_square_orange).setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (v.getId() == R.id.iv_square_orange) {
            revealOrangeAtPoint(event.getRawX(), event.getRawY());
        }
        return false;
    }
});

接著此衅，就跟前面一樣了强戴，根據(jù)獲取到的坐標(biāo)位置創(chuàng)建循環(huán)揭露動(dòng)畫(huà)：

private void revealOrangeAtPoint(float rawX, float rawY) {
    int centerX = (int) rawX;
    int centerY = (int) rawY;
    int endRadius = (int) Math.hypot(bgViewGroup.getWidth(), bgViewGroup.getHeight());

    Animator animator = ViewAnimationUtils.createCircularReveal(bgViewGroup, centerX, centerY, 0, endRadius);
    bgViewGroup.setBackgroundResource(R.color.orange);
    animator.setDuration(getResources().getInteger(android.R.integer.config_longAnimTime));
    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.start();
}

4. 屬性變化動(dòng)畫(huà)+循環(huán)揭露動(dòng)畫(huà)

這個(gè)會(huì)難那么一丟丟，畢竟是兩個(gè)動(dòng)畫(huà)效果的組合技挡鞍，但是只要抓住上一篇講的屬性變化動(dòng)畫(huà)和上面講的循環(huán)揭露動(dòng)畫(huà)這兩個(gè)點(diǎn)骑歹，就不難理解了。

private void revealRedAtCenter() {
    final ViewGroup.LayoutParams originalParams = ivSquareRed.getLayoutParams();
    
    Transition transition = TransitionInflater.from(this).inflateTransition(R.transition.changebounds_with_arcmotion);
    transition.addListener(new Transition.TransitionListener() {
        @Override
        public void onTransitionEnd(Transition transition) {
            int centerX = (bgViewGroup.getLeft() + bgViewGroup.getRight()) / 2;
            int centerY = (bgViewGroup.getTop() + bgViewGroup.getBottom()) / 2;
            int endRadius = (int) Math.hypot(bgViewGroup.getWidth(), bgViewGroup.getHeight());
    
            Animator animator = ViewAnimationUtils.createCircularReveal(bgViewGroup, centerX, centerY, 0, endRadius);
            bgViewGroup.setBackgroundResource(R.color.red);
            animator.setDuration(getResources().getInteger(android.R.integer.config_longAnimTime));
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            animator.start();
    
            ivSquareRed.setLayoutParams(originalParams);
        }
        ...
    });
    
    TransitionManager.beginDelayedTransition(bgViewGroup, transition);
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    params.addRule(RelativeLayout.CENTER_IN_PARENT);
    ivSquareRed.setLayoutParams(params);
}

五墨微、總結(jié)

本篇的重點(diǎn)就1個(gè)內(nèi)容：
createCircularReveal (View view, int centerX, int centerY, float startRadius, float endRadius)

只要抓住這兩條主線(xiàn)道媚，其它的內(nèi)容都可以按主線(xiàn)來(lái)抽絲撥繭，一切難題都可以迎刃而解翘县。

項(xiàng)目代碼已分享到Github：https://github.com/SherlockShi/AndroidMaterialAnimationPractise

六最域、參考資料

Material Animations

PS：歡迎關(guān)注SherlockShi博客