動畫效果視頻.gif
核心思路：通過日食擦除遮擋區(qū)域
日食
先畫一個(gè)太陽帖世，在用一個(gè)等大小的太陽擦除掉覆蓋區(qū)域，其中日食運(yùn)行起點(diǎn)是45°沸枯，終點(diǎn)是225°日矫。日食的起點(diǎn)圓心與終點(diǎn)圓心就是運(yùn)行軌跡的半徑赂弓。通過三角函數(shù)(以知斜邊和度數(shù))計(jì)算出終點(diǎn)坐標(biāo)P1(x,y) ，起點(diǎn)坐標(biāo)P2(x,y) 再用三角函數(shù)計(jì)算處軌跡的中心點(diǎn)
光芒
12個(gè)光芒哪轿，360°盈魁，每30°畫一個(gè)光芒，以太陽圓心為光芒圓心 + 光芒與太陽間距 = 光芒起點(diǎn)坐標(biāo) 窃诉，再通過這個(gè)坐標(biāo)利用三角函數(shù) + 光芒長度 計(jì)算出光芒終點(diǎn)坐標(biāo)
圖形示例
企業(yè)微信截圖_f84cd455-41bb-416f-ad36-1db28961bcdf.png
藍(lán)色圓：太陽
藍(lán)色虛線圓：日食起點(diǎn)
紅色虛線圓：日食終點(diǎn)
綠色虛線圓：日食運(yùn)行軌跡
不多BB杨耙，看代碼
- (void)drawRect:(CGRect)rect{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
CGFloat raysH = 5.0; //光芒長度（可以自己寫個(gè)比例）
CGFloat raysW = 2.0;
CGFloat raysGap = 3.0;
CGFloat radius = (MIN(rect.size.width, rect.size.height) - (raysH + raysGap) * 2) / 2.0 - 2;
CGPoint center = CGPointMake(rect.size.width / 2.0, rect.size.height / 2.0);
//太陽
CGContextAddArc(context, center.x, center.y , radius, 0, 2 * M_PI, 0);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextFillPath(context);
//軌跡 起點(diǎn)45° 終點(diǎn)為225° 逆時(shí)針運(yùn)行 運(yùn)行軌跡為半圓形 其中 gap月亮與太陽之間的圓心距，將決定月亮內(nèi)弧與外弧之間的距離
CGFloat gap = 15.0 * radius / 30.0;
CGFloat finalX = center.x - gap * cos(M_PI_4);
CGFloat finalY = center.y - gap * sin(M_PI_4);
CGFloat trackRadius = (radius * 2.0 + gap) / 2.0;
CGFloat trackX = finalX + trackRadius * cos(M_PI_4);
CGFloat trackY = finalY + trackRadius * sin(M_PI_4);
CGFloat x = trackX + trackRadius * cos(M_PI_4 - (1 - _brightness) * M_PI);
CGFloat y = trackY + trackRadius * sin(M_PI_4 - (1 - _brightness) * M_PI);
CGContextAddArc(context, x, y, radius, 0, 2 * M_PI, 0);
CGContextSetBlendMode(context, kCGBlendModeClear);
CGContextFillPath(context);
// CGFloat trackAngle = (M_PI_4 - (1 - _brightness) * M_PI) * 180 / M_PI;
// NSLog(@"軌跡角度：%f",trackAngle);
NSLog(@"位置信息：\n軌跡：x:%f y:%f r：%f \n太陽：x:%f y:%f r:%f",trackX,trackY,trackRadius,x,y,radius);
//光芒 起點(diǎn)270° 順時(shí)針運(yùn)行一周 每30°畫一個(gè)光芒 總共12個(gè)
CGContextSetLineWidth(context, raysW);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetStrokeColorWithColor(context, UIColor.whiteColor.CGColor);
CGContextSetBlendMode(context, kCGBlendModeNormal);
CGFloat radian = 3 * M_PI_2 + _brightness * 2 * M_PI;
CGFloat angle = radian * 180 / M_PI;
int num = ceil((angle - 270) / 30.0);
for (int i = 0; i < num; i++) {
CGFloat raysRadian = 3 * M_PI_2 + (M_PI / 6) * i;
CGFloat raysStartX = center.x + (radius + raysGap) * cos(raysRadian);
CGFloat raysStartY = center.y + (radius + raysGap) * sin(raysRadian);
CGContextMoveToPoint(context, raysStartX,raysStartY);
if(i == num - 1 && angle - 270 != 360){
CGFloat h = raysH * fmod(angle,30.0) / 30.0;
CGFloat raysEndX = raysStartX + h * cos(raysRadian);
CGFloat raysEndY = raysStartY + h * sin(raysRadian);
CGContextAddLineToPoint(context, raysEndX,raysEndY);
}else{
CGFloat raysEndX = raysStartX + raysH * cos(raysRadian);
CGFloat raysEndY = raysStartY + raysH * sin(raysRadian);
CGContextAddLineToPoint(context, raysEndX,raysEndY);
}
CGContextStrokePath(context);
}
NSLog(@"光芒角度：%f 光芒個(gè)數(shù)：%d",angle , num);
}
- (void)setBrightness:(CGFloat)brightness{
_brightness = brightness;
[self setNeedsDisplay];
}
備注：在View中- (void)drawRect:(CGRect)rect會造成CPU的計(jì)算飘痛，可以這里寫個(gè)優(yōu)化珊膜，用CAShapeLayer重寫- (void)drawInContext:(CGContextRef)ctx ，也可以緩存一下重復(fù)的計(jì)算
我就畫著玩 宣脉， 喵了個(gè)咪 ~
有啥問題可以留言车柠，看到會回你 ~
