关键词： iOS 地图 Uber 弧线 动画
先上代码： https://github.com/prozwang/PZArcLine
由于产品经理需要实现Uber那种地图上两点弧线的效果
地图弧线
苦查了一天高德地图的api之后，发现根本没有提供类似的效果，于是决定自己撸一个
思路：
由于层级需要在地图控件之下，因此不能无脑覆盖一个view上地图上去实现这个动画效果，于是考虑在地图的layer层插入帧动画
通过断点打印出地图的子layer，可以确定需要插入的弧线位于第几层layer
实现：
确定好思路之后剩下的就是实现了，这个需求的一个难点在于如何画出一个完美的弧线并且能够根据缩放自动动态调整弧度
一开始想着用三重贝塞尔曲线搭配玄学0.5 去实现弧度的，但是实现效果并不好，要想画出完美的圆弧，只能通过确定圆心、起始点、开始弧度、终止弧度、半径这几个条件去实现
- (void)addArcWithCenter:(CGPoint)centerradius:(CGFloat)radiusstartAngle:(CGFloat)startAngleendAngle:(CGFloat)endAngleclockwise:(BOOL)clockwise
于是核心问题就转变成高中学的平面几何问题了，在一个二维坐标系上确定两点，求圆心角为x的圆心
由于两点已知，因此能够确定两点的中点，以及通过这个中点的中垂线，因此能够确定中点到其中一点的距离
由于圆心在中垂线上，于是可以通过中垂线公式以及两点距离公式，以及三角函数解出圆心点与圆心角的关系
圆心角就是我们自己调节的参数，因此就可以求出圆心了
具体算法代码如下:
#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)
};
}
需要判断的是圆心点有两个，要根据情况判断是上弧线还是下弧线， 我这里统一是上弧线
另外需要额外处理的两个情况就是两点处在同一水平线上，以及同一垂直线上这两种情况，可以根据实际需求去做相应的处理
以上就是整个弧线的核心代码
网友评论