自定义View之双层波纹气泡（xFermode）

效果图

今天给大家带来的是双层波纹气泡效果，有请图片：

 

实现思路

1.首先计算自定义view的真实宽高和气泡的直径等size
2.画气泡的带透明度背景图
3.新建一个图层画里层的气泡波纹效果，使用xfermode混合模式SRC_IN画一个圆与一个贝塞尔曲线path从而生成波纹效果
4.再新建一个图层画外层的气泡波纹效果
5.最后通过改变画波纹的起始位置及其高度来让波纹动起来

开始绘制

1.自定义view计算宽高及其初始化一些属性

init {
        //关闭渲染
        mPaint.isAntiAlias = true
        mDrawPaint.isAntiAlias = true
        mBubbleTextPaint.isAntiAlias = true
        mBubbleTextPaint.color = Color.WHITE
        mBubbleTextPaint.style = Paint.Style.FILL
        mBubbleTextPaint.textSize = DensityUtils.dp2px(context, 11f).toFloat()
        mBgBitmap = BitmapFactory.decodeResource(context.resources, R.drawable.bubble_bg)
        //关闭硬件加速，否则部分xfermode混合效果会失效
        setLayerType(View.LAYER_TYPE_SOFTWARE, null)
    }

 override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        when (MeasureSpec.getMode(widthMeasureSpec)) {
            MeasureSpec.EXACTLY -> {
                mRealWidth = MeasureSpec.getSize(widthMeasureSpec)
            }
            MeasureSpec.AT_MOST -> {
                mRealWidth = mDefaultWidth
            }
            MeasureSpec.UNSPECIFIED -> {
                mRealWidth = mDefaultWidth
            }
        }
        when (MeasureSpec.getMode(heightMeasureSpec)) {
            MeasureSpec.EXACTLY -> {
                mRealHeight = MeasureSpec.getSize(heightMeasureSpec)
            }
            MeasureSpec.AT_MOST -> {
                mRealHeight = mDefaultHeight
            }
            MeasureSpec.UNSPECIFIED -> {
                mRealHeight = mDefaultHeight
            }
        }
        initAndCountSize()
        setMeasuredDimension(mRealWidth, mRealHeight)
    }

/**
* 初始化计算一些参数
*/    
private fun initAndCountSize() {
        mSquareSize = Math.min(mRealWidth, mRe