前言

上一篇把动画的实现步骤大致理清,需要确认小尾巴的绘制区域,关键就是确定4个顶点的位置。大家可以根据需要,选择不同的计算方式。
今天,要实现:

  1. 文字的添加
  2. 尾巴拉长用弧形代替直线

下面是现在的效果图:

文字添加

为了简单,这里对文字的颜色字体等属性不提供接口,而只是在内部设置固定的值;提供一个类方法生成对象。如:

+ (instancetype)zzspringViewWithText:(NSString *)text;

在这个方法里面需要做:

  1. 根据text内容,确定文字绘制的图形区域
  2. 根据文字的绘制区域,确定view对象的bounds
  3. 可能的情况下,限制文字的长度(QQ上消息数最多显示99+)

drawRect中,需要做的事:

  1. 绘制带圆角的view
  2. 绘制文字

如下所示:

//draw corner round rectangle
-(void) p_drawRoundedRectWithContext:(CGContextRef)context withRect:(CGRect)rect
{
CGContextSaveGState(context); CGFloat radius = CGRectGetMaxY(rect)*0.4;
CGFloat puffer = CGRectGetMaxY(rect)*0.10;
CGFloat maxX = CGRectGetMaxX(rect) - puffer;
CGFloat maxY = CGRectGetMaxY(rect) - puffer;
CGFloat minX = CGRectGetMinX(rect) + puffer;
CGFloat minY = CGRectGetMinY(rect) + puffer; CGContextBeginPath(context);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextAddArc(context, maxX-radius, minY+radius, radius, M_PI+(M_PI/), , );
CGContextAddArc(context, maxX-radius, maxY-radius, radius, , M_PI/, );
CGContextAddArc(context, minX+radius, maxY-radius, radius, M_PI/, M_PI, );
CGContextAddArc(context, minX+radius, minY+radius, radius, M_PI, M_PI+M_PI/, ); CGContextFillPath(context); CGContextRestoreGState(context); }
-(void) p_drawTextWithContext:(CGContextRef)context
{
NSDictionary *fontAttr = @{
NSFontAttributeName : fontText,
NSForegroundColorAttributeName: [UIColor whiteColor]
};
if (CGSizeEqualToSize(bgTextSize, CGSizeZero))
{
bgTextSize = [self.badgeText sizeWithAttributes:fontAttr];
} CGPoint textPoint = CGPointMake((rect.size.width/-bgTextSize.width/), (rect.size.height/-bgTextSize.height/) - );
self.badgeText drawAtPoint:textPoint withAttributes:fontAttr];
}

draw text && arch rectangle

其中,bgTextSize是之前计算过的文字的size。

弧线

绘制曲线,这里使用CGContextAddQuadCurveToPoint,这里的控制点controlPoint取自两圆心之间的某点(见),这里我取了圆心长度的黄金分割点处作为控制点。从实际的运行情况下,可能弧度不是太明显,需要后期再调配参数。
这里还要纠正一下,上一篇计算切点时的方法有误:

  1. 三角函数忘记开根号
  2. 求切点的公式算错了

这里需要说明的是,因为添加了文字,在这里确定P1圆上2个顶点位置的时候,要注意不要覆盖到文字区域,否则移动的时候,文字会被覆盖。
另外,我发现QQ中,拖拽弹回的动画中,小红点上会出现很多纵横交错的白线(bug吗),估计是用于计算连接点用的。

总结

本身这个动画没有什么技术难度(意思是涉及到的框架内容不实特别复杂),复杂得是一些关键数值的确定:主要就是拖拽时尾巴的绘制区域的确定。把这一部分解决了,动画也就没有实现的难度了。当然,如果要封装成一个库来调用,还需要再精进:接口的设计,可配置的参数(颜色,字体,阴影等),这些就留给大伙自定义吧

 

仿手机QQ消息小红点动画2的更多相关文章

  1. 仿手机iPhone QQ消息小红点动画1

    前言 偶然发现iPhone QQ 显示消息条数的小红点可以响应动作事件,也有人问我这样的动画该怎么做,这里就把实现的思路简单的描述一下.在实现的过程中,同样发现该功能并没有看到的那么简单,要做一个完备 ...

  2. vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用(接入了聊天机器人,能够进行正常对话)

    使用Vue2进行的仿手机QQ的webapp的制作,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com ...

  3. 高仿手机QQ音乐之——Android带进度条的开关

    最新版的手机QQ音乐体验确实不错,发现首页播放按钮能够显示歌曲当前进度条.认为挺有新意.效果例如以下: 自己琢磨了下.能够用自己定义组件来实现,试着做了一下.效果例如以下: 整理了下思路.大概设计流程 ...

  4. Android之高仿手机QQ聊天

    源代码下载 转载请注明出处,谢谢! 最终版已上传.优化下拉刷新.增加来消息声音提示.主界面改成ViewPager,实现左右滑动.新增群组.最近会话显示条数,开始上班了,不再修改了.谢谢! 国庆这几天, ...

  5. Android:仿手机QQ朋友动态ListView

    1.介绍: 使用此博客XListView模仿Android版本QQ朋友动态ListView效果.效果如下面的截图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  6. Android:仿手机QQ好友动态的ListView

    1.介绍: 本博客使用XListView模仿Android版QQ好友动态的ListView效果.效果截图例如以下: 效果图1 watermark/2/text/aHR0cDovL2Jsb2cuY3Nk ...

  7. 类似QQ消息左滑删除的Demo

    最近在网上学到一篇类似QQ消息左滑删除的demo,完善了下代码,感觉还不错,特此分享一波: CustomSwipeListView.java 是个继承自ListView的类,里面调用了自定义View ...

  8. wpf实现仿qq消息提示框

    原文:wpf实现仿qq消息提示框 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details/5052 ...

  9. js高仿QQ消息列表左滑功能

    该组件,主要功能类似于QQ消息列表左滑出现删除.标为已读等按钮的功能:现在的版本用的是纯javaScript编写:后续会跟进 angularJs 开发的类似组件以及jquery的; 下面,就让我们来认 ...

随机推荐

  1. 【MFC】CHtmlView::GetSource中文乱码的问题

    在MFC的SDI中,使用CHtmlView::GetSource来获取网页源码,保存到本地,发现中文中的一部分乱码,有些中文正常.自己先试着转码等各种尝试,发现一无所获.网上也没有正确的解决方案. 自 ...

  2. 空间分析开源库GEOS

    History of GEOS GEOS中Geometry的结构 GEOS分析功能简介 1.History of GEOS J​T​S​ ​T​o​p​o​l​o​g​y​ ​S​u​i​t​e是Ma ...

  3. error C3861: “getpid”: 找不到标识符

    原文:http://blog.csdn.net/woniu199166/article/details/52471242 这种错误一般就是没有对应的函数或者对应的头文件 旧版的vs添加#include ...

  4. Android内存管理-OnTrimMemory

    Application中有两个与内存管理相关的方法:onLowMemory()和 onTrimMemory(int level),源码如下 @CallSuper public void onLowMe ...

  5. 秒杀多线程第一篇 多线程笔试面试题汇总 ZZ 【多线程】

    http://blog.csdn.net/morewindows/article/details/7392749 系列前言 本系列是本人参加微软亚洲研究院,腾讯研究院,迅雷面试时整理的,另外也加入一些 ...

  6. CentOS7中永久保存systemd日志

    将systemd的日志写入磁盘: 1.在/var/log/目录下创建日志存放目录,并加入systemd-journal的权限: ~]#mkdir /var/log/journal ~]#chown r ...

  7. 卸载Sharepoint2016后。重新安装提示 系统从以前的安装重新启动,或更新正在等待错误

    卸载Sharepoint2016 重启N遍,不停地重启.需要删除注册表项 下的 .将PendingFileRenameOperations键项删除,再重新安装就可以安装成功.

  8. Python学习---django多对多之Djanog默认表学习

    案例一: from django.db import models class Book(models.Model): name = models.CharField(max_length=33) # ...

  9. 期初付年金(annuity-due)

    含义:在 n 个时期,每个时期初付款1元. ——期初付年金的现值因子 ——期初付年金的积累值因子 关系: 二.期初付年金和期末付年金的关系

  10. 7、Python文件操作工具 openpyxl 工具 2

    创建一个工作簿 使用openpyxl没有必要先在系统中新建一个.xlsx,我们需要做的只需要引入Workbook这个类,接着开始调用它. >>> from openpyxl impo ...