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

时间:2023-01-07 23:31:28

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

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

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

老规矩,先上效果图:

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

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

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

这样一画,就很简单明了了对不对。只要在拖动的时候 去改变辅助点的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未读消息去除效果

那么我们想象办法,如何才能让他封闭呢。还记得绘制多边形的办法吗。。直接在两条贝塞尔曲线之间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未读消息去除效果

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

        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未读消息去除效果

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

 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未读消息去除效果

其实我们要面临的问题就是计算出 圆的切点坐标。  换言之就是求 ∠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未读消息去除效果的更多相关文章

  1. wing带你玩转自定义view系列(1) 仿360内存清理效果

    本篇是接自 手把手带你做自定义view系列 宗旨都是一样,带大家一起来研究自定义view的实现,与其不同的是本系列省去了简单的坐标之类的讲解,重点在实现思路,用简洁明了的文章,来与大家一同一步步学习. ...

  2. wing带你玩转自定义view系列(3)模仿微信下拉眼睛

    发现了爱神的自定义view系列,我只想说一个字:凸(艹皿艹 ) !!相见恨晚啊,早看到就不会走这么多弯路了 另外相比之下我这完全是小儿科..所以不说了,这篇是本系列完结篇....我要从零开始跟随爱哥脚 ...

  3. 自定义View系列教程05--示例分析

    站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Android多分辨率适配框架(3)- 使用指南 自定 ...

  4. 自定义View系列教程04--Draw源码分析及其实践

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...

  5. 自定义View系列教程01--常用工具介绍

    站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Android多分辨率适配框架(3)- 使用指南 自定 ...

  6. 自定义View系列教程08--滑动冲突的产生及其处理

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...

  7. 自定义View系列教程07--详解ViewGroup分发Touch事件

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...

  8. 自定义View系列教程06--详解View的Touch事件处理

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...

  9. 自定义View系列教程03--onLayout源码详尽分析

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...

随机推荐

  1. 如何用卷积神经网络CNN识别手写数字集?

    前几天用CNN识别手写数字集,后来看到kaggle上有一个比赛是识别手写数字集的,已经进行了一年多了,目前有1179个有效提交,最高的是100%,我做了一下,用keras做的,一开始用最简单的MLP, ...

  2. 使用Project进行项目管理 - 项目管理系列文章

    前面当项目经理的时候曾经用到过Project来进行项目管理.这些天闲着无事,将代码翻出来留念了一下,现在将Project项目管理的东西也翻出来玩玩. 微软的Project是一款不错的软件,经过微软这么 ...

  3. ATL 工程下添加右击菜单

    首先在dllmain.cpp中添加如下声明 HINSTANCE g_hInstance;  g_hInstance = hInstance; 源码如下: CPoint point;  ::GetCur ...

  4. 关于&dollar;&lowbar;SERVER 常量 HTTP&lowbar;X&lowbar;FORWARDED&lowbar;HOST与 HTTP&lowbar;HOST的问题

    今天在看ecshop的源码,发现了用$_SERVER['HTTP_X_FORWARDED_HOST']来判断主机的地址,就目前来说很多人都是直接通过$_SERVER['HTTP_HOST']来判断的, ...

  5. Java创建对象的几种方式

    解析:Java创建对象的几种方式(重要):(1) 用new语句创建对象,这是最常见的创建对象的方法.(2) 运用反射手段,调用java.lang.Class或者java.lang.reflect.Co ...

  6. JavaScript动画:offset家族和匀速动画详解&lpar;含轮播图的实现&rpar;

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset家族简介 我们知道,三大家族包括:offset/scroll ...

  7. js 颜色16进制转RGB方法

    //颜色16进制转RGB方法 String.prototype.colorRgb = function(){ var sColor = this.toLowerCase(); //十六进制颜色值的正则 ...

  8. delphi有关获取其他程序的窗口及对窗口内控件的操作

    1.获取当前所有窗口 procedure TForm1.Button1Click(Sender: TObject);var szText: array[0..254] of char; hCurren ...

  9. 20 go单元测试

    单元测试 Go本身提供了一套轻量级的测试框架.符合规则的测试代码会在运行测试时被自动识别并执行.单元测试源文件的命名规则如下: 必须是以_test.go结尾的文件,比如manager_test.go ...

  10. laravel学习历程

    1.www目录下拉下来一个laravel框架 composer create-project laravel/laravel laravelapp --prefer-dist laravelapp 为 ...