iOS —— QQ中未读气泡拖拽消失的实现
2015-04-02 18:12
363 查看
Tips: OA ⊥ AB, PB ⊥ AB ,且 OA=PB=d/2.
现在我们已经有了数学表达式,接下来就是要把数学表达式转化成代码了。
我们需要创建一系列变量:
CGFloat r1; // backView
CGFloat r2; // frontView CGFloat x1; CGFloat y1; CGFloat x2; CGFloat y2; CGFloat centerDistance; CGFloat cosDigree; CGFloat sinDigree; CGPoint pointA; //A CGPoint pointB; //B CGPoint pointD; //D CGPoint pointC; //C CGPoint pointO; //O CGPoint pointP; //P接下来我们需要一个毫秒级定时器 CADisplayLink。
displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction:)];根据数学公式,在 displayLink 绑定的方法 displayLinkAction 中把每个坐标点用代码表达出来:
x1 = backView.center.x; y1 = backView.center.y; x2 = self.frontView.center.x; y2 = self.frontView.center.y; //d centerDistance = sqrtf((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1)); //sinΘ 和 cosΘ if (centerDistance == 0) { cosDigree = 1; sinDigree = 0; }else{ cosDigree = (y2-y1)/centerDistance; sinDigree = (x2-x1)/centerDistance; } pointA = CGPointMake(x1-r1*cosDigree, y1+r1*sinDigree); // A pointB = CGPointMake(x1+r1*cosDigree, y1-r1*sinDigree); // B pointD = CGPointMake(x2-r2*cosDigree, y2+r2*sinDigree); // D pointC = CGPointMake(x2+r2*cosDigree, y2-r2*sinDigree);// C pointO = CGPointMake(pointA.x + (centerDistance / 2)*sinDigree, pointA.y + (centerDistance / 2)*cosDigree); pointP = CGPointMake(pointB.x + (centerDistance / 2)*sinDigree, pointB.y + (centerDistance / 2)*cosDigree);
通过这些点,就可以画出贝塞尔曲线了:
- (void)drawRect{ backView.center = oldBackViewCenter; backView.bounds = CGRectMake(0, 0, r1*2, r1*2); backView.layer.cornerRadius = r1; cutePath = [UIBezierPath bezierPath]; [cutePath moveToPoint:pointA]; [cutePath addQuadCurveToPoint:pointD controlPoint:pointO]; [cutePath addLineToPoint:pointC]; [cutePath addQuadCurveToPoint:pointB controlPoint:pointP]; [cutePath moveToPoint:pointA]; if (backView.hidden == NO) { shapeLayer.path = [cutePath CGPath]; shapeLayer.fillColor = [fillColorForCute CGColor]; [self.containerView.layer insertSublayer:shapeLayer below:self.frontView.layer]; } }
<p style="margin-top: 0px; margin-bottom: 0px; font-size: 13px; font-family: Menlo; color: rgb(255, 255, 255);">- (<span style="font-variant-ligatures: no-common-ligatures; color: #de38a6">IBAction</span>)playerAction:(<span style="font-variant-ligatures: no-common-ligatures; color: #de38a6">id</span>)sender {</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 13px; font-family: Menlo; color: rgb(8, 250, 149);"><span style="font-variant-ligatures: no-common-ligatures; color: #ffffff"> [</span>adManager<span style="font-variant-ligatures: no-common-ligatures; color: #ffffff"> </span>startPlayCid<span style="font-variant-ligatures: no-common-ligatures; color: #ffffff">:</span><span style="font-variant-ligatures: no-common-ligatures; color: #8b87ff">0</span><span style="font-variant-ligatures: no-common-ligatures; color: #ffffff"> </span>adtype<span style="font-variant-ligatures: no-common-ligatures; color: #ffffff">:</span><span style="font-variant-ligatures: no-common-ligatures; color: #8b87ff">0</span><span style="font-variant-ligatures: no-common-ligatures; color: #ffffff"> </span>cod<span style="font-variant-ligatures: no-common-ligatures; color: #ffffff">:</span><span style="font-variant-ligatures: no-common-ligatures; color: #8b87ff">2</span><span style="font-variant-ligatures: no-common-ligatures; color: #ffffff">];</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 13px; font-family: Menlo; color: rgb(255, 255, 255);">}</p><div> </div>
大致实现思路还是很清晰的,无非在分析如何计算6个关键点的时候需要花点时间。
相关文章推荐
- iOS开发之QQ中未读气泡拖拽消失的实现分析
- iOS开发:QQ中未读气泡拖拽消失的实现分析(KittenYang)
- iOS QQ中未读气泡拖拽消失的实现分析(KittenYang)
- BezierDemo源码解析-实现qq消息气泡拖拽消失的效果
- QQ中未读气泡拖拽消失的实现分析
- QQ中未读气泡拖拽消失的实现分析
- QQ中未读气泡拖拽消失的实现分析
- 类似QQ消息条数拖拽消失动画效果的实现
- iOS 类似微信,QQ聊天界面的气泡聊天简单实现Demo
- 贝塞尔曲线实现QQ未读消息气泡拖拽效果
- 微信小程序之『仿 QQ 消息气泡拖拽消失』
- IOS详解TableView —— QQ好友列表的实现
- ios开发——仿新版QQ侧滑导航栏的实现
- 【HTML5】实现QQ聊天气泡效果
- ios之让输入键盘隐藏消失的方法/以及系统通知的实现
- IOS 实现边滑动边缩放的类似qq主界面的页面切换功能
- C#中实现类似QQ的气泡提示
- 仿微信、短信、QQ等消息数目右上角红色小圆球气泡显示(基于Android XML布局文件实现)
- ios中提示信息的实现及自动消失
- iOS实现QQ界面