Android使用CircularReveal動畫效果切換頁面

<changeBounds>
    <!--suppress AndroidElementNotAllowed -->
    <arcMotion  android:maximumAngle="90" android:minimumHorizontalAngle="90" android:minimumVerticalAngle="0"/>
</changeBounds>

</transitionSet></pre>

爆炸的動畫效果

    // 圓圈爆炸效果顯示
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public static void animateRevealShow(
            final Context context, final View view,
            final int startRadius, @ColorRes int color,
            OnRevealAnimationListener listener) {
        int cx = (view.getLeft() + view.getRight()) / 2;
        int cy = (view.getTop() + view.getBottom()) / 2;


    float finalRadius = (float) Math.hypot(view.getWidth(), view.getHeight());

    // 設置圓形顯示動畫
    Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy, startRadius, finalRadius);
    anim.setDuration(300);
    anim.setInterpolator(new AccelerateDecelerateInterpolator());
    anim.addListener(new AnimatorListenerAdapter() {
        @Override public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            view.setVisibility(View.VISIBLE);
            listener.onRevealShow();
        }

        @Override public void onAnimationStart(Animator animation) {
            super.onAnimationStart(animation);
            view.setBackgroundColor(ContextCompat.getColor(context, color));
        }
    });

    anim.start();
}</pre> 

 
  
使用CircularReveal, 即圓形顯示的動畫效果. 

 第一個參數是顯示的視圖, 第二個和第三個是變換的中心位置, 第三個和第四個是變換的起始半徑和結束半徑. 

 
 


4. 退出動畫
退出動畫是凝聚效果, 同樣使用的是CircularReveal.
    // 退出事件
    @Override public void onBackPressed() {
        GuiUtils.animateRevealHide(
                this, mRlContainer,
                mFabCircle.getWidth() / 2, R.color.colorAccent,
                new GuiUtils.OnRevealAnimationListener() {
                    @Override
                    public void onRevealHide() {
                        defaultBackPressed();
                    }


                @Override
                public void onRevealShow() {

                }
            });
}</pre> 

退出和顯示的區別就是起始和終止的半徑不同.
    // 圓圈凝聚效果
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public static void animateRevealHide(
            final Context context, final View view,
            final int finalRadius, @ColorRes int color,
            OnRevealAnimationListener listener
    ) {
        int cx = (view.getLeft() + view.getRight()) / 2;
        int cy = (view.getTop() + view.getBottom()) / 2;
        int initialRadius = view.getWidth();
        // 與入場動畫的區別就是圓圈起始和終止的半徑相反
        Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy, initialRadius, finalRadius);
        anim.setDuration(300);
        anim.setInterpolator(new AccelerateDecelerateInterpolator());
        anim.addListener(new AnimatorListenerAdapter() {
            @Override public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                view.setBackgroundColor(ContextCompat.getColor(context, color));
            }


        @Override public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            listener.onRevealHide();
            view.setVisibility(View.INVISIBLE);
        }
    });
    anim.start();
}</pre> 

 


最后說一些有關用戶體驗的事情, 對于一款應用而言, 好的性能固然重要, 但優秀的設計也非常關鍵, 優異的產品需要優異的展現方式.
OK, that’s all! Enjoy it!
</div>