wing带你玩转自定义view系列（2）简单模仿qq未读消息去除效果

上一篇介绍了贝塞尔曲线的简单应用仿360内存清理效果

这一篇带来一个两条贝塞尔曲线的应用：仿qq未读消息去除效果。

转载请注明出处：http://blog.csdn.net/wingichoy/article/details/50503630

老规矩，先上效果图：

wing带你玩转自定义view系列（2）简单模仿qq未读消息去除效果 - 图1

qq的未读消息去除很炫酷，其实就是用了两条贝塞尔曲线，我们按思路来，先来画两个圆，及两条贝塞尔曲线，辅助点为圆心y坐标的一半。我们把下面移动的圆，叫做mMoveCircle.

wing带你玩转自定义view系列（2）简单模仿qq未读消息去除效果 - 图2

这样一画，就很简单明了了对不对。只要在拖动的时候去改变辅助点的Y，和固定圆的半径，就可以出来如效果图的效果。

那么重写onTouchEvent

       @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                mMoveCircleY = event.getY();
//                mSupY = mCircleY;
                if (mMoveCircleY < lastY) {
                    isUp = false;
                } else {
                    isUp = true;
                }
                lastY = mMoveCircleY;
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                if((mMoveCircleY-mCircleY)>mMoveCircleRadius*3){
                    Log.e("wing","超过");
                    isCanDraw = false;
                    invalidate();
                }else {
                    Log.e("wing","没超过");
                }
        }
        return true;
    }

这里Action_move记录了最后一次移动和这次移动的值，来代表是往上滑还是往下滑,改变一个标记为，并且让mMoveCircleY改变为触摸的y坐标。

ACTION_UP主要记录圆点离开的范围，如果超过这个范围，则代表消息提醒去除掉。

在ondraw里绘制贝塞尔曲线

        //左边的线
                path.moveTo(mCircleX - mCircleRadius + mPaintStrokeWidth / 2, mCircleY);
                path.quadTo(mCircleX , mSupY, mCircleX - mMoveCircleRadius + mPaintStrokeWidth / 2, mMoveCircleY);
                canvas.drawPath(path, p);
                //右边的线
                path.moveTo(mCircleX + mCircleRadius - mPaintStrokeWidth / 2, mCircleY);
                path.quadTo(mCircleX, mSupY, mCircleX + mMoveCircleRadius - mPaintStrokeWidth / 2, mMoveCircleY);
                canvas.drawPath(path, p);

这样可以画成两条贝塞尔曲线，但是是空心的

wing带你玩转自定义view系列（2）简单模仿qq未读消息去除效果 - 图3

那么我们想象办法，如何才能让他封闭呢。还记得绘制多边形的办法吗。。直接在两条贝塞尔曲线之间lineto就可以了，然后close；

       path.moveTo(mCircleX - mCircleRadius + mPaintStrokeWidth / 2, mCircleY);
                path.quadTo(mCircleX , mSupY, mCircleX - mMoveCircleRadius + mPaintStrokeWidth / 2, mMoveCircleY);
                path.lineTo(mCircleX + mMoveCircleRadius, mMoveCircleY);
                path.quadTo(mCircleX, mSupY, mCircleX + mCircleRadius, mCircleY);
                path.lineTo(mCircleX - mCircleRadius, mCircleY);
                path.close();
                canvas.drawPath(path, p);

其实我们绘制的是这个效果，然后在把两个实心圆画上去，画笔style设置为fill 即可、

wing带你玩转自定义view系列（2）简单模仿qq未读消息去除效果 - 图4

封闭画笔，动态改变半径，绘制圆。

              p.setStyle(Paint.Style.FILL);

                      if (isUp) {
                    canvas.drawCircle(mCircleX, mCircleY, mCircleRadius--, p);
                    canvas.drawCircle(mCircleX, mMoveCircleY, mMoveCircleRadius, p);
                } else {
                    canvas.drawCircle(mCircleX, mCircleY, mCircleRadius++, p);
                    canvas.drawCircle(mCircleX, mMoveCircleY, mMoveCircleRadius, p);
                }

得到如下效果。

wing带你玩转自定义view系列（2）简单模仿qq未读消息去除效果 - 图5

最后，来判断是否超过一定下拉区域，如果超过则圆点跟着手一起走然后在手松开的时候消失。

       if ((mMoveCircleY-mCircleY)<mMoveCircleRadius*3) {
                Log.e("wing",mSupY-mCircleY+"");
                Path path = new Path();
                //左边的线
                path.moveTo(mCircleX - mCircleRadius + mPaintStrokeWidth / 2, mCircleY);
                path.quadTo(mCircleX , mSupY, mCircleX - mMoveCircleRadius + mPaintStrokeWidth / 2, mMoveCircleY);
                path.lineTo(mCircleX + mMoveCircleRadius, mMoveCircleY);
                path.quadTo(mCircleX, mSupY, mCircleX + mCircleRadius, mCircleY);
                path.lineTo(mCircleX - mCircleRadius, mCircleY);
                path.close();
                canvas.drawPath(path, p);
                //右边的线
//                path.moveTo(mCircleX + mCircleRadius - mPaintStrokeWidth / 2, mCircleY);
//                path.quadTo(mCircleX, mSupY, mCircleX + mMoveCircleRadius - mPaintStrokeWidth / 2, mMoveCircleY);
//                canvas.drawPath(path, p);
                p.setStyle(Paint.Style.FILL);
//                canvas.drawCircle(mCircleX, mCircleY, mCircleRadius, p);
                if (isUp) {
                    canvas.drawCircle(mCircleX, mCircleY, mCircleRadius--, p);
                    canvas.drawCircle(mCircleX, mMoveCircleY, mMoveCircleRadius, p);
                } else {
                    canvas.drawCircle(mCircleX, mCircleY, mCircleRadius++, p);
                    canvas.drawCircle(mCircleX, mMoveCircleY, mMoveCircleRadius, p);
                }
//                canvas.drawPoint(mSupX, mSupY, p);
            } else {
                p.setStyle(Paint.Style.FILL);
                canvas.drawCircle(mCircleX, mMoveCircleY, mMoveCircleRadius, p);
//                canvas.drawCircle(mCircleX, mMoveCircleY, mMoveCircleRadius, p);
            }

最后遗留一个复杂的问题，用户可以360度拖动，这时候要根据圆来计算切点的坐标，再来重新计算辅助点的坐标。比较繁琐，这里就不算了。 #其实我是不会#本篇的目的，了解贝塞尔曲线的应用我想已经达到了，读者若感兴趣，可以自行实现。#其实我是不会#

———————————————————————————————————————解决篇——————————————————————————————————————————————————-

回到家又研究了一下360度动态转变的，终于想通怎么算了。如下图（无视那么丑还有想吐槽下中性笔的油）：

wing带你玩转自定义view系列（2）简单模仿qq未读消息去除效果 - 图6

其实我们要面临的问题就是计算出圆的切点坐标。换言之就是求 ∠1 的角度。

由图可知 ∠1 = ∠2 ∠2 = ∠3 由于等价代换可得 ∠3 = ∠1

由图得：tan∠3 = (mCirlceY - mMoveCircleY)/(mMoveCircleX-mCircleX) 即∠1 = arctan (mCirlceY - mMoveCircleY)/(mMoveCircleX-mCircleX

则可计算右上点的坐标为：

x: mMoveCircleX - mMoveCircleRadius * sin∠1

y: mMoveCircleY - mMoveCircleRadius * cos∠1

其他三个切线点的坐标计算方法如上。得到四个点的坐标，只需要改变path的起终点和辅助点的坐标即可。由于过于繁杂，就不用代码给各位实现了。大家如果感兴趣，可以自行实现。#其实就是懒#

下一篇：wing带你玩转自定义view系列（3）模仿微信下拉眼睛

本项目地址:点击打开链接求关注求评论求star

wing带你玩转自定义view系列（2） 简单模仿qq未读消息去除效果