两行代码搞定Android视图扩散切换效果

Posted zhangke3016

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两行代码搞定Android视图扩散切换效果相关的知识,希望对你有一定的参考价值。

用最简单的方式来实现android视图扩散切换效果。

一、概述

这两天时间动手撸了个视图扩散切换效果的控制器,API兼容至Android4.0,更方便我们在视图切换过程中有炫酷的过渡效果。本来是想实现两个View之间的过渡动画,实现的过程中想到之前写的Activity切换动画,就试着加上了对Activity切换的动画支持。先来看看效果吧,代码实现只需一行,感觉还不错~

二、实现思路简单阐述

关于过渡动画的实现,我们先简单分解下这个效果,首先,当Activity发生跳转时我们要先获取共享元素控件,在跳转的界面将其添加在跳转页面之上,关于控件位置的获取,在上一篇文章Android碎裂的粒子效果一文中进行了介绍,主要是通过如下方法获取其位置:

 protected Rect getRectInWindow(View view, boolean mIsFullWindow)
            int[] location = new int[2];
            view.getLocationInWindow(location);
            return new Rect(location[0],location[1],location[0]+view.getMeasuredWidth(),location[1]+view.getMeasuredHeight());
    

当跳转至目标页面,我们现在其上方盖上一层遮罩,遮罩为我们自定义的控件,在控件上方绘制上一个页面的过渡视图,将其旋转、平移、或者缩放操作:

            canvas.save();
            Matrix matrix = new Matrix();
            matrix.postTranslate(mRect.left ,mRect.top);
            matrix.postScale(mScaleXCanvas,mScaleYCanvas,mRect.centerX(),mRect.centerY());
            matrix.postRotate(mRotationCanvas,mRect.centerX(),mRect.centerY());

            canvas.concat(matrix);
            mView.draw(canvas);
            canvas.restore();

最后就是圆形散开效果了,这里我在自定义控件上使用的是Xfermode,不断drawCircle并扩大半径,最终显示出跳转页面视图并将遮罩移除。记得关闭硬件加速。

        mClearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        setLayerType(LAYER_TYPE_SOFTWARE,null);

返回动画同理,在界面返回前将遮罩盖在上一个页面之上,遮罩包括当前页面的视图影像,不断drawCircle并缩小其半径,同时减小当前页面视图的透明度,最终平滑的显示出上一个页面并移除遮罩。

三、具体使用

 helper = new BaseViewHelper
                .Builder(SecondActivity.this)
                //.setEndView()//如果是两个切换的视图  这里设定最终显示的视图
                .setTranslationView(v)//设置过渡视图
                .isFullWindow(true)//是否全屏显示
                .isShowTransition(true)//是否显示过渡动画
                .setDimColor(Color.WHITE)//遮罩颜色
                .setDimAlpha(200)//遮罩透明度
                //.setTranslationX(0)//x轴平移
                //.setRotation(360)//旋转
                //.setScaleX(0)//x轴缩放
                //.setScaleY(0)//y轴缩放
                //.setTranslationY(0)//y轴平移
                //.setDuration(800)//过渡时长
                //.setInterpolator(new AccelerateDecelerateInterpolator())//设置插值器
                //设置监听
//                .setOnAnimationListener(new BaseViewHelper.OnAnimationListener() 
//                    @Override
//                    public void onAnimationStartIn() 
//                        Log.e("TAG","onAnimationStartIn");
//                    
//
//                    @Override
//                    public void onAnimationEndIn() 
//                        Log.e("TAG","onAnimationEndIn");
//                    
//
//                    @Override
//                    public void onAnimationStartOut() 
//                        Log.e("TAG","onAnimationStartOut");
//                    
//
//                    @Override
//                    public void onAnimationEndOut() 
//                        Log.e("TAG","onAnimationEndOut");
//                    
//                )
                .create();//开始动画

如果从A页面跳转至B页面,也就是Activity之间的跳转时,在A页面如下代码 :

 new BaseViewHelper
                .Builder(MainActivity.this, view)
                .startActivity(intent);

B页面代码:

helper = new BaseViewHelper
                .Builder(SecondActivity.this)
                .isFullWindow(true)//是否全屏显示
                .isShowTransition(true)//是否显示过渡动画
                .setDimColor(Color.WHITE)//遮罩颜色
                .setDimAlpha(200)//遮罩透明度
                .create();//开始动画

    @Override
    public void onBackPressed() 
        if (helper!=null && helper.isShowing())
            helper.backActivity(this);
        else 
            super.onBackPressed();
        
    

如果在一个页面两个视图之间跳转,即A视图切换到B视图:
在当前页面代码:

            View v = View.inflate(this,R.layout.layout_second,null);
            //显示在当前页面跳转
            helper = new BaseViewHelper.Builder(this,view)
                    .setEndView(v)
                    .create();


    @Override
    public void onBackPressed() 
        if (helper!=null && helper.isShowing())
            helper.back();
        else 
            super.onBackPressed();
        
    

四、源码地址

项目地址:https://github.com/zhangke3016/ViewSpreadTranslationController
如果喜欢,欢迎star、fork、issues。

以上是关于两行代码搞定Android视图扩散切换效果的主要内容,如果未能解决你的问题,请参考以下文章

Android 两种方式实现类似水波扩散效果

两行代码搞定UITableView无数据无网络显示-b

两行代码搞定UI主流框架

半小时学会制作三维扩散光圈(three.js实战2)

Android 自定义控件之圆形扩散View(DiffuseView)

自定义view-波纹扩散(圆扩散)