iOS地圖添加類似Uber弧線動畫

關(guān)鍵詞： iOS 地圖 Uber 弧線動畫

先上代碼：?https://github.com/prozwang/PZArcLine

由于產(chǎn)品經(jīng)理需要實現(xiàn)Uber那種地圖上兩點弧線的效果

地圖弧線

苦查了一天高德地圖的api之后，發(fā)現(xiàn)根本沒有提供類似的效果淌喻，于是決定自己擼一個

思路：

? ? 由于層級需要在地圖控件之下，因此不能無腦覆蓋一個view上地圖上去實現(xiàn)這個動畫效果似嗤，于是考慮在地圖的layer層插入幀動畫

? ? 通過斷點打印出地圖的子layer，可以確定需要插入的弧線位于第幾層layer

實現(xiàn)：

? ? 確定好思路之后剩下的就是實現(xiàn)了乘粒，這個需求的一個難點在于如何畫出一個完美的弧線并且能夠根據(jù)縮放自動動態(tài)調(diào)整弧度

? ? 一開始想著用三重貝塞爾曲線搭配玄學(xué)0.5 去實現(xiàn)弧度的灯萍，但是實現(xiàn)效果并不好，要想畫出完美的圓弧旦棉，只能通過確定圓心、起始點救斑、開始弧度脸候、終止弧度绑蔫、半徑這幾個條件去實現(xiàn)

- (void)addArcWithCenter:(CGPoint)centerradius:(CGFloat)radiusstartAngle:(CGFloat)startAngleendAngle:(CGFloat)endAngleclockwise:(BOOL)clockwise

于是核心問題就轉(zhuǎn)變成高中學(xué)的平面幾何問題了，在一個二維坐標系上確定兩點携添，求圓心角為x的圓心

由于兩點已知篓叶，因此能夠確定兩點的中點，以及通過這個中點的中垂線向叉，因此能夠確定中點到其中一點的距離

由于圓心在中垂線上，于是可以通過中垂線公式以及兩點距離公式母谎，以及三角函數(shù)解出圓心點與圓心角的關(guān)系

圓心角就是我們自己調(diào)節(jié)的參數(shù)奇唤，因此就可以求出圓心了

具體算法代碼如下:

#define DEGREES_TO_RADIANS(angle) ((angle) /180.0* M_PI)

#define RADIANS_TO_DEGREES(radians) ((radians) * (180.0/ M_PI))

+ (NSDictionary*)arcLineAlgorithm:(CGPoint)startPointendPoint:(CGPoint)endPoint {

? ? double m =sqrt((startPoint.x- endPoint.x) * (startPoint.x- endPoint.x) + (startPoint.y- endPoint.y) * (startPoint.y- endPoint.y));

? ? double angleCircle =60;

? ? double angleLine = (180- angleCircle) /2;

? ? double r = m / (2*cos(DEGREES_TO_RADIANS(angleLine)));

? ? CGPoint centerP =CGPointMake((startPoint.x+ endPoint.x)/2, (startPoint.y+ endPoint.y)/2);

? ? double dx =? (endPoint.x- startPoint.x);

? ? double dy =? (endPoint.y- startPoint.y);

? ? double k = dy / dx;

? ? double l = r *sin(DEGREES_TO_RADIANS(angleLine));

? ? BOOL isLeft = startPoint.x< endPoint.x;

? ? BOOL isUp = startPoint.y< endPoint.y;

? ? int directionFactor =1;

? ? if((isLeft && !isUp) || (!isLeft && isUp)) {

? ? ? ? directionFactor = -1;

? ? }

? ? double circleX = centerP.x- directionFactor * l *fabs(k) /sqrt(1+ k * k);

? ? double circleY = - circleX / k + (startPoint.x+ endPoint.x) / (2* k) + (startPoint.y+ endPoint.y) /2;

? ? CGPoint circleCenter =CGPointMake(circleX, circleY);

? ? double d =fabs(startPoint.x- circleX);

? ? double j =asin(d/r);

? ? double angleStartAndCircleCenter =RADIANS_TO_DEGREES(j);

? ? double angleEndAndCircleCenter =0;

? ? double angleStart = angleStartAndCircleCenter;

? ? double angleEnd =0;

? ? BOOL isClockWise = startPoint.x< endPoint.x;

? ? if(circleX > startPoint.x) {

? ? ? ? angleStart = -DEGREES_TO_RADIANS(angleStartAndCircleCenter +90);

? ? ? ? if(circleX > endPoint.x) {

? ? ? ? ? ? if(startPoint.x< endPoint.x) {

? ? ? ? ? ? ? ? if(startPoint.y> circleY) {

? ? ? ? ? ? ? ? ? ? angleStart =DEGREES_TO_RADIANS(angleStartAndCircleCenter +90);

? ? ? ? ? ? ? ? ? ? angleEndAndCircleCenter =180- angleCircle - angleStartAndCircleCenter;

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? angleEndAndCircleCenter = angleStartAndCircleCenter - angleCircle;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? angleEndAndCircleCenter = angleStartAndCircleCenter + angleCircle;

? ? ? ? ? ? }

? ? ? ? ? ? angleEnd = -DEGREES_TO_RADIANS(angleEndAndCircleCenter +90);

? ? ? ? }else{

? ? ? ? ? ? angleEndAndCircleCenter = angleCircle - angleStartAndCircleCenter;

? ? ? ? ? ? angleEnd = -DEGREES_TO_RADIANS(90- angleEndAndCircleCenter);

? ? ? ? }

? ? }else{

? ? ? ? angleStart = -DEGREES_TO_RADIANS(90-angleStartAndCircleCenter);

? ? ? ? if(circleX > endPoint.x) {

? ? ? ? ? ? angleEndAndCircleCenter = angleCircle - angleStartAndCircleCenter;

? ? ? ? ? ? angleEnd = -DEGREES_TO_RADIANS(angleEndAndCircleCenter +90);

? ? ? ? }else{

? ? ? ? ? ? if(startPoint.x< endPoint.x) {

? ? ? ? ? ? ? ? angleEndAndCircleCenter = angleStartAndCircleCenter + angleCircle;

? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? if(startPoint.y> circleY) {

? ? ? ? ? ? ? ? ? ? angleStart =DEGREES_TO_RADIANS(90-angleStartAndCircleCenter);

? ? ? ? ? ? ? ? ? ? angleEndAndCircleCenter =180- angleCircle - angleStartAndCircleCenter;

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? angleEndAndCircleCenter = angleStartAndCircleCenter - angleCircle;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? angleEnd = -DEGREES_TO_RADIANS(90- angleEndAndCircleCenter);

? ? ? ? }

? ? }

? ? return @{

? ? ? ? @"centerPoint": [NSValuevalueWithCGPoint:circleCenter],

? ? ? ? @"startArc":@(angleStart),

? ? ? ? @"endArc":@(angleEnd),

? ? ? ? @"radius":@(r),

? ? ? ? @"isClock":@(isClockWise)

? ? };

}

需要判斷的是圓心點有兩個，要根據(jù)情況判斷是上弧線還是下弧線经窖，我這里統(tǒng)一是上弧線

另外需要額外處理的兩個情況就是兩點處在同一水平線上画侣，以及同一垂直線上這兩種情況堡妒，可以根據(jù)實際需求去做相應(yīng)的處理

以上就是整個弧線的核心代碼