ios仿QQ消息拖拽效果

當(dāng)qq有新的未讀消息的時(shí)候總會(huì)有一個(gè)小紅點(diǎn)用來(lái)提醒炬称∩」悖可以拖動(dòng)或點(diǎn)擊小紅點(diǎn)然后會(huì)有一個(gè)爆炸的場(chǎng)景拣帽。很想研究一下。研究的結(jié)果可以先看下:

錄屏1.gif

這是最終的效果嚼锄,也是我們想要的樣子减拭!

步驟:

一. 單個(gè)圓的移動(dòng)
二. 點(diǎn)擊的爆炸動(dòng)畫(huà)
三. 兩個(gè)中點(diǎn)相等的圓,一個(gè)圓移動(dòng)另一個(gè)固定区丑,改變固定圓的大小
四. 繪制兩個(gè)圓之間的貝塞爾曲線(xiàn)拧粪。
五. 代碼組織和封裝。

數(shù)學(xué)模型:

第三點(diǎn)和第四點(diǎn)需要了解數(shù)學(xué)模型刊苍。

圓心距

假設(shè)兩個(gè)圓O1和O2,O1固定既们,O2移動(dòng)。O1(x1,y1),O2(x2,y2),
D = (x1 - x2)^2 + (y1-y2)^2 正什。
圓心距d =D的開(kāi)方啥纸。
剛開(kāi)始想使用d>1時(shí),1/d作為O1的變化系數(shù)婴氮,但是效果不佳斯棒!
后來(lái)就根據(jù)O2的大小盾致,給圓心距設(shè)置了一個(gè)最大值。
O1的變化系數(shù) f = 1-d/Max 荣暮。這樣子的話(huà)O1會(huì)無(wú)限變小庭惜,所以限制f>=0.2。

兩圓間的曲線(xiàn)

這個(gè)問(wèn)題確實(shí)有點(diǎn)難辦穗酥,剛開(kāi)始的時(shí)候做兩圓的切線(xiàn)护赊,不過(guò)很不滿(mǎn)意。做曲線(xiàn)又不知道中間點(diǎn)的位置怎么確定砾跃!后來(lái)看了這篇文章 才有了思路骏啰!
下面來(lái)看一道題:兩個(gè)圓O1(x1,y1),O2(x2,y2)。AB和CD分別是通過(guò)O1和O2圓心的交點(diǎn)A,B,C,D抽高。有O點(diǎn)判耕,P點(diǎn)在O1和O2之間,AB平行CD翘骂,OA垂直AB壁熄,PB垂直AB,且OA=PB = 圓心距的一半碳竟!
求:A,B,C,D,O,P的坐標(biāo)草丧。

20161213.png

求出坐標(biāo)后,AB做直線(xiàn)瞭亮,BC為經(jīng)過(guò)P的貝塞爾曲線(xiàn)方仿,CD直線(xiàn),DA為經(jīng)過(guò)O的曲線(xiàn)统翩。然后填充顏色仙蚜!

繪圖代碼

<pre>
<#pragma mark - 獲取圓心距離>
-(CGFloat)distanceWithPoint1:(CGPoint)point1 andPoint2:(CGPoint)point2{
CGFloat offSetX = point1.x- point2.x;
CGFloat offSetY = point1.y- point2.y;
return sqrt(offSetXoffSetX + offSetYoffSetY);
}
</pre>
<pre>
<#pragma mark - 繪制貝塞爾圖形>
-(void) reloadBeziePath {
CGFloatr1 =self.circle1.frame.size.width/ 2.0f;
CGFloatr2 =circle2.frame.size.width/ 2.0f;
CGFloatx1 =self.circle1.center.x;
CGFloaty1 =self.circle1.center.y;
CGFloatx2 =circle2.center.x;
CGFloaty2 =circle2.center.y;
CGFloatdistance =sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 -y1));
CGFloatsinDegree = (x2 - x1) / distance;
CGFloatcosDegree = (y2 - y1) / distance;
CGPointpointA =CGPointMake(x1 - r1 * cosDegree, y1 + r1 *sinDegree);
CGPointpointB =CGPointMake(x1 + r1 * cosDegree, y1 - r1 *sinDegree);
CGPointpointC =CGPointMake(x2 + r2 * cosDegree, y2 - r2 *sinDegree);
CGPointpointD =CGPointMake(x2 - r2 * cosDegree, y2 + r2 sinDegree);
CGPointpointP =CGPointMake(pointB.x + (distance / 2) * sinDegree,pointB.y + (distance / 2) * cosDegree);
CGPointpointO =CGPointMake(pointA.x + (distance / 2) * sinDegree,pointA.y + (distance / 2) * cosDegree);
UIBezierPath
path = [UIBezierPath bezierPath];
[pathmoveToPoint:pointA];
[pathaddLineToPoint:pointB];
[pathaddQuadCurveToPoint:pointCcontrolPoint:pointP];
[pathaddLineToPoint:pointD];
[pathaddQuadCurveToPoint: pointAcontrolPoint: pointO];
self.shapeLayer.path=path.CGPath;
}
</pre>

代碼封裝

做一個(gè)好的效果就是為了能夠使用方便,這也是封裝的意義所在厂汗!
本demo采用了category擴(kuò)展的方式對(duì)UIView進(jìn)行封裝委粉,不影響本類(lèi)的使用,這也是選擇這種方式的原因娶桦。

一.添加一個(gè)擴(kuò)展文件UIView +DragBlast

二.確定需要暴露給其他文件的API贾节,調(diào)用這些API的方法或?qū)傩跃涂梢詫?shí)現(xiàn)預(yù)想的效果。

大概需要這些是可以讓其他人調(diào)用的:
<pre>
//是否使用粒子動(dòng)畫(huà)(這個(gè)是之后添加的)
@property(nonatomic,assign)BOOLisFragment;
//點(diǎn)擊爆炸默認(rèn)為NO
@property(nonatomic,assign)BOOLtapBlast;
//拖拽爆炸默認(rèn)為NO
@property(nonatomic,assign)BOOLdragBlast;
//拖動(dòng)爆炸或點(diǎn)擊爆炸后的回調(diào)
-(void)blastCompletion:(void (^)(BOOL finished))completion;
</pre>

三.打開(kāi)UIView +DragBlast.m文件衷畦,開(kāi)始代碼實(shí)現(xiàn)栗涂。

1.category可以擴(kuò)展新的方法,但是不能添加屬性祈争,所以我們需要使用runtime機(jī)制來(lái)添加我們需要的屬性斤程。
例如:
<pre>
<#pragma mark - setters>
-(void)setIsFragment:(BOOL)isFragment{
objc_setAssociatedObject(self, @selector(isFragment), [NSNumbernumberWithBool:isFragment], OBJC_ASSOCIATION_COPY_NONATOMIC);
}
<#pragma mark - getters>
-(BOOL)isFragment{
return[objc_getAssociatedObject(self, @selector(isFragment))boolValue];
}
</pre>
2.在給category設(shè)置屬性的時(shí)候,添加拖拽手勢(shì)和點(diǎn)擊手勢(shì)菩混。
3.從上面的數(shù)學(xué)模型可以看出忿墅,這里需要兩個(gè)視圖(圓)扁藕,所以需要添加一個(gè)全局的circle1屬性變量,且該屬性變量為私有屬性變量疚脐∫诟蹋可以這么寫(xiě):
<pre>
@interface UIView (_DragBlast)
@property (readwrite, nonatomic, strong, setter = setCircle1:)UIView* circle1;
@end
@implementation UIView(_DragBlast)
-(void)setCircle1:(UIView)circle1{
objc_setAssociatedObject(self, @selector(circle1), circle1,OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(UIView
)circle1{
returnobjc_getAssociatedObject(self, @selector(circle1));
}
@end
</pre>
這樣就實(shí)現(xiàn)了添加一個(gè)私有屬性circle1。
在后面開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)還需要一些其他的全局變量棍弄,具體可下載詳細(xì)demo查看望薄!

4.問(wèn)題和解決方案

當(dāng)我們?cè)谝粋€(gè)足夠大的superView上做拖拽效果沒(méi)有什么問(wèn)題,但是可以看到QQ的拖拽是在一個(gè)cell上進(jìn)行的照卦,當(dāng)我們也在cell上進(jìn)行時(shí)式矫,發(fā)現(xiàn)超出cell這個(gè)拖拽的粘性效果就不見(jiàn)了!
這個(gè)時(shí)候我們就得考慮圖層的問(wèn)題了役耕!拖拽QQ的消息可以到導(dǎo)航條上,原來(lái)這一系列效果其實(shí)是在keyWindow上進(jìn)行的聪廉。
這時(shí)我們需要獲取手勢(shì)在頂層視圖的位置瞬痘,
<pre>CGPoint topFloorPoint = [pan.view.superviewconvertPoint:pan.view.centertoView:window];</pre>
此時(shí)發(fā)現(xiàn)添加手勢(shì)View是不隨手勢(shì)而改變的,我們還得獲取到手勢(shì)在頂層視圖的變化板熊,
<pre>CGPoint translation = [pan translationInView:window];</pre>
此時(shí)手勢(shì)的真正位置是:
<pre>CGPoint panPoint = CGPointMake(topFloorPoint.x+translation.x,
topFloorPoint.y + translation.y);</pre>
而這個(gè)位置是相對(duì)于keyWindow的位置框全。

UIGestureRecognizerStateBegan在手勢(shì)開(kāi)始的時(shí)候:

將視圖根據(jù)在keyWindow的位置,一一添加到keyWindow上干签,這是解決問(wèn)題的關(guān)鍵津辩!

UIGestureRecognizerStateChanged手勢(shì)改變的時(shí)候:
<pre>
//設(shè)置circle1變化的值
CGFloat centerDistance = [selfdistanceWithPoint1:self.circle1.centerandPoint2:pan.view.center];
CGFloat scale = 1-centerDistance/(MAXMultiple*pan.view.bounds.size.height);

if (centerDistance >MAXMultiple*pan.view.bounds.size.height){
self.shapeLayer.path = nil;
//[self.shapeLayer removeFromSuperlayer];
//self.shapeLayer = nil;
self.circle1.hidden = YES;
}else{
self.circle1.hidden = NO;
[self reloadBeziePath:1-scale];
}
if (scale < 0.4) {
scale = 0.4;
}
self.circle1.transform = CGAffineTransformMakeScale(scale,scale);
</pre>
<pre>
pragma mark - 封裝后的繪制貝塞爾方法
-(void) reloadBeziePath:(CGFloat)scale {
CGFloat r1 =self.circle1.frame.size.width / 2.0f;
CGFloat r2 =self.frame.size.width / 2.0f;

CGFloat x1 =self.circle1.center.x;
CGFloat y1 =self.circle1.center.y;

CGFloat x2 =self.center.x;
CGFloat y2 =self.center.y;

CGFloatdistance = sqrt(pow((x2 - x1), 2) + pow((y2 - y1), 2));

CGFloatsinDegree = (x2 - x1) / distance;
CGFloatcosDegree = (y2 - y1) / distance;

CGPointpointA = CGPointMake(x1 - r1 * cosDegree, y1 + r1 *sinDegree);
CGPointpointB = CGPointMake(x1 + r1 * cosDegree, y1 - r1 *sinDegree);
CGPointpointC = CGPointMake(x2 + r2 * cosDegree, y2 - r2 *sinDegree);
CGPointpointD = CGPointMake(x2 - r2 * cosDegree, y2 + r2 *sinDegree);
CGPointpointP = CGPointMake(pointB.x + (distance / 2) * sinDegree,pointB.y + (distance / 2) * cosDegree);
CGPointpointO = CGPointMake(pointA.x + (distance / 2) * sinDegree,pointA.y + (distance / 2) * cosDegree);

UIBezierPath*path = [UIBezierPath bezierPath];
[pathmoveToPoint: pointA];
[pathaddLineToPoint: pointB];

[pathaddQuadCurveToPoint: pointC controlPoint:CGPointMake(pointP.x-r1cosDegreescale,pointP.y+r1sinDegreescale)];

[pathaddLineToPoint: pointD];

[pathaddQuadCurveToPoint: pointA controlPoint:CGPointMake(pointO.x+r1cosDegreescale,pointO.y-r1sinDegreescale)];

[selfgetShapeLayer].path = path.CGPath;
}
</pre>
UIGestureRecognizerStateEnded手勢(shì)結(jié)束的時(shí)候:

這里無(wú)論是做爆炸動(dòng)畫(huà)結(jié)束后還是在回彈動(dòng)畫(huà)結(jié)束后,都需要將視圖View復(fù)位容劳,將它從keyWindow上重新添加到原來(lái)的視圖中去喘沿!這里還需要考慮view視圖有沒(méi)有添加約束,否則回彈之后View的位置會(huì)發(fā)生改變竭贩。
<pre>
//復(fù)位
[self.restSuperView addSubview:self];

CGPoint belowFloorPoint = [windowconvertPoint:pan.view.centertoView:self.restSuperView];

//判定該視圖有沒(méi)有添加約束
if (self.translatesAutoresizingMaskIntoConstraints) {
self.center = belowFloorPoint;
}else{
CGFloat R = self.bounds.size.height/2.0;

//創(chuàng)建左邊約束
NSLayoutConstraint *leftLc = [NSLayoutConstraintconstraintWithItem:self attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqual toItem:self.restSuperViewattribute:NSLayoutAttributeLeft multiplier:1.0constant:belowFloorPoint.x-R];

[self.restSuperView addConstraint:leftLc];

//創(chuàng)建頂部約束
NSLayoutConstraint *topLc = [NSLayoutConstraintconstraintWithItem:self attribute:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqual toItem:self.restSuperViewattribute:NSLayoutAttributeTop multiplier:1.0constant:belowFloorPoint.y-R];

[self.restSuperView addConstraint:topLc];
}
</pre>
最終的demo到這里下載查看 蚜印!
如果覺(jué)得還可以就給個(gè)star吧!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末留量,一起剝皮案震驚了整個(gè)濱河市窄赋,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌楼熄,老刑警劉巖忆绰,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異可岂,居然都是意外死亡错敢,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)青柄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)伐债,“玉大人预侯,你說(shuō)我怎么就攤上這事》逅” “怎么了萎馅?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)虹蒋。 經(jīng)常有香客問(wèn)我糜芳,道長(zhǎng),這世上最難降的妖魔是什么魄衅? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任峭竣,我火速辦了婚禮,結(jié)果婚禮上晃虫,老公的妹妹穿的比我還像新娘皆撩。我一直安慰自己,他們只是感情好哲银,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布扛吞。 她就那樣靜靜地躺著,像睡著了一般荆责。 火紅的嫁衣襯著肌膚如雪滥比。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天做院,我揣著相機(jī)與錄音盲泛,去河邊找鬼。 笑死键耕,一個(gè)胖子當(dāng)著我的面吹牛寺滚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播郁竟,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼玛迄,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了棚亩?” 一聲冷哼從身側(cè)響起蓖议,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎讥蟆,沒(méi)想到半個(gè)月后勒虾,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瘸彤,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年修然,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡愕宋,死狀恐怖玻靡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情中贝,我是刑警寧澤囤捻,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站邻寿,受9級(jí)特大地震影響蝎土,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜绣否,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一誊涯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蒜撮,春花似錦暴构、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至薇溃,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缭乘,已是汗流浹背沐序。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留堕绩,地道東北人策幼。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像奴紧,于是被迫代替她去往敵國(guó)和親特姐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容