當(dāng)qq有新的未讀消息的時(shí)候總會(huì)有一個(gè)小紅點(diǎn)用來(lái)提醒炬称∩」悖可以拖動(dòng)或點(diǎn)擊小紅點(diǎn)然后會(huì)有一個(gè)爆炸的場(chǎng)景拣帽。很想研究一下。研究的結(jié)果可以先看下：
這是最終的效果嚼锄，也是我們想要的樣子减拭！
步驟:
一. 單個(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)草丧。
求出坐標(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);
UIBezierPathpath = [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吧！
