QQ中未读气泡拖拽消失的实现(参照一位年轻牛B的博主的思路自己实现了一下)
原文链接:http://kittenyang.com/drawablebubble/,博主年轻却很有思想。相仿的年纪,很佩服他!
首先分析拖拽时的图,大圆、不规则的图(实际上时有规律的不然也画不出来,这里只是代指)、小圆。对,拖拽时的效果就是这三部分拼凑成的。博主 大圆用了UIView 不规则的图 用CAShapeLayer ,小圆也是UIView,在我自己实现时,发现其实大圆用UIView,小圆和中间那部分 用CAShapeLayer就能画出来了。CAHShapeLayer 都知道给它传一个path,它就能根据path生成任意形状的layer。所以后面其实就是用贝塞尔曲线构建这个path,这个path构建对于我这种被大学上了四年的人来说,没有前人的基础,估计打死也没有这种想法。
下面就是 构建 A、B、C、D、O、P 这六个点,创建path,给CAShapeLayer,生成layer。
下面时部分代码:
处理手势的
/** 处理手势 */
- (void)panGesture:(UIPanGestureRecognizer *)gesture {
// self.containerView bubbleView 的父视图
CGPoint newCenter = [gesture locationInView:self.containerView]; self.bubbleView.center = newCenter; if (gesture.state == UIGestureRecognizerStateBegan) { // 手势开始 移除动画
[self.bubbleView.layer removeAllAnimations]; }else if (gesture.state == UIGestureRecognizerStateChanged) { // 圆心距离 >= 断裂的距离
if (centerDistance >= self.maxDistance ) { // 大于设定的值时 断裂 移除shapeView
[self.shapeLayer removeFromSuperlayer]; }else { // 更新 贝塞尔曲线shapeView 的形状
[self updateCoordinate:newCenter];
} }else if (gesture.state == UIGestureRecognizerStateCancelled || gesture.state == UIGestureRecognizerStateEnded || gesture.state == UIGestureRecognizerStateFailed) { // 大于 设定值 并且实现了 block,执行block
if (centerDistance >= self.maxDistance && self.breakComplete) {
self.breakComplete();
}else { // 让小球回到 初始点
[UIView animateWithDuration:0.5 delay: usingSpringWithDamping:0.4 initialSpringVelocity: options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.bubbleView.center = initBubbleCenter;
} completion:^(BOOL finished) {
// 小球回到初始点 圆心距离归零
centerDistance = ; if (finished && self.achieveAnimation) {
[self animationForBubbleView];
} }]; } [self.shapeLayer removeFromSuperlayer]; }
}
手势的拖拽导致大圆中心点更新,以此更新A、B、C、D、O、P六个点,跟新path,对于CAShapeLayer来说,你传给他一个新的path,它就会更新它的形状
/** 根据新的中心点 更新 ABCDOP6个点 以更行CAShapeLayer 的path */
- (void)updateCoordinate:(CGPoint)currentCenter { CGFloat x2 = currentCenter.x;
CGFloat y2 = currentCenter.y;
CGFloat x1 = initBubbleCenter.x;
CGFloat y1 = initBubbleCenter.y; // 当前圆心 于 初始点圆心距离
centerDistance = sqrt((x2-x1) * (x2-x1)+(y2-y1)*(y2-y1)); // 更新初始化圆心处 圆的半径(随着拖拽的距离的增大而减小,达到设定的距离 消失) if (centerDistance == ) {
cos = ;
sin = ;
}else{
cos = (y2-y1) / centerDistance;
sin = (x2-x1) / centerDistance;
}
r1 = r2 * ( - (centerDistance / self.maxDistance) * self.modulus); A = CGPointMake(x1 - r1*cos, y1 + r1*sin);
B = CGPointMake(x1 + r1*cos, y1 - r1*sin);
C = CGPointMake(x2 + r2*cos, y2 - r2*sin);
D = CGPointMake(x2 - r2*cos, y2 + r2*sin); O = CGPointMake(A.x + centerDistance / 2.0*sin, A.y + centerDistance / 2.0 * cos);
P = CGPointMake(B.x + centerDistance / 2.0*sin, B.y + centerDistance / 2.0*cos);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:initBubbleCenter radius:r1 startAngle: endAngle:M_PI * clockwise:]; UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:A];
[path1 addLineToPoint:B];
[path1 addQuadCurveToPoint:C controlPoint:P];
[path1 addLineToPoint:D];
[path1 addQuadCurveToPoint:A controlPoint:O];
[path appendPath:path1]; self.shapeLayer.path = path.CGPath; }
完整代码:http://pan.baidu.com/s/1dEzZLst
QQ中未读气泡拖拽消失的实现(参照一位年轻牛B的博主的思路自己实现了一下)的更多相关文章
- reactnative实现qq聊天消息气泡拖拽消失效果
前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...
- QQ去除未读状态的动画
QQ去除未读状态的动画 by 伍雪颖 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmFpbmxlc3Zpbw==/font/5a6L5L2T/fonts ...
- HTML5中的对象的拖拽
拖拽: draggable="true"页面上就能实现拖拽事件: ondragstart 拖拽开始事件 ondrag 拖拽中 ondragend 拖拽结束事件 投放区事件: ond ...
- openlayers中实现点的拖拽(modify),在layer中增加修改删除point。
最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下. 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置 ...
- winform中文本框添加拖拽功能
对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...
- 一个类似于QQ语音聊天时的拖拽移动悬浮小球
闲来无事,分享一个最近在某个地方借鉴的一个demo(原谅我真的忘了在哪里看到的了,不然也就贴地址了)这个demo的逻辑思路并不是很难,推敲一下,很快就能理解,只是觉得这样的一个组合控件用起来蛮能增色自 ...
- Android中的ScrollView实现 拖拽反弹效果
public class BounceScrollView extends ScrollView { private View inner;// 孩子View private float y;// 点 ...
- HTML/CSS: 如何制作未读信息图标
最近公司项目中涉及到制作通讯界面中未读信息的带数字的红色圆点图标. 拿我目前的博客头像图片为例(其实就是谷歌图片中粗略挑了一张顺眼的图片),效果图如下: HTML代码如下: <img id=&q ...
- wing带你玩转自定义view系列(2) 简单模仿qq未读消息去除效果
上一篇介绍了贝塞尔曲线的简单应用 仿360内存清理效果 这一篇带来一个 两条贝塞尔曲线的应用 : 仿qq未读消息去除效果. 转载请注明出处:http://blog.csdn.net/wingicho ...
随机推荐
- NSArray使用小结
http://blog.csdn.net/ms2146/article/details/8654263
- 织梦dedecms5.7后台进去就卡死解决方法
症状:进入dede后台点击菜单后,浏览器进入假死状态要等好久才能反应过来. 解决方式:1.打开后台目录dede/templets/ 2.找到index_body.htm文件中的第25行至第35行部分屏 ...
- 从运行原理及使用场景看Apache和Nginx
用正确的工具,做正确的事情. 本文只作为了解Apache和Nginx知识的一个梳理,想详细了解的请阅读文末参考链接中的博文. Web服务器 Web服务器也称为WWW(WORLD WIDE WEB)服务 ...
- 灯塔(LightHouse)
Description As shown in the following figure, If another lighthouse is in gray area, they can beacon ...
- 拼接xml时出现内存溢出解决办法
/// designed by Alex /// 解决内存溢出问题,不可使用迭代器和foreach /// 循环遍历List, 别生成xml,一边释放 /// 反向遍历,相当于出栈,避免索引顺序乱的问 ...
- iOS: 消息通信中的Notification&KVO
iOS: 消息通信中的Notification&KVO 在 iOS: MVC 中,我贴了张经典图: 其中的Model向Controller通信的Noification&KVO为何物呢? ...
- 在Fedora 20下编译安装QEMU
由于OpenStack的流行,现在越来越多的人关注QEMU,最近发行了新版本1.7,下面就说Fedora下的安装过程: 首先需要安装基本的编译软件和git sudo yum install gcc m ...
- 转:helloworld:一个完整的WCF案例
原文地址:http://blog.csdn.net/mane_yao/article/details/5852845 WCF的ABC: A代表Address-where(对象在哪里)B代表Bindin ...
- vb串口通信界面
界面如上: 程序如下: Dim num As Byte '申明一个全局变量为单字节型 '单击“清空接收缓冲区”按钮时,将接收缓冲区清空,此过程为“清空接收缓冲区”的单击事件 Private S ...
- 烟雾检测笔记1--《Video-based smoke detection with histogram sequence of LBP and LBPV pyramids》解析、实现
基于HEP(histograms of equivalent patterns[1])框架下的特征具有良好的纹理分类效果,LBP(local binary patterns[2])属于HEP框架下最常 ...