动画效果视频.gif
核心思路：通过日食擦除遮挡区域
日食
先画一个太阳，在用一个等大小的太阳擦除掉覆盖区域，其中日食运行起点是45°，终点是225°。日食的起点圆心与终点圆心就是运行轨迹的半径。通过三角函数(以知斜边和度数)计算出终点坐标P1(x,y) ，起点坐标P2(x,y) 再用三角函数计算处轨迹的中心点
光芒
12个光芒，360°，每30°画一个光芒，以太阳圆心为光芒圆心 + 光芒与太阳间距 = 光芒起点坐标 ，再通过这个坐标利用三角函数 + 光芒长度 计算出光芒终点坐标
图形示例
企业微信截图_f84cd455-41bb-416f-ad36-1db28961bcdf.png
蓝色圆：太阳
蓝色虚线圆：日食起点
红色虚线圆：日食终点
绿色虚线圆：日食运行轨迹
不多BB，看代码
- (void)drawRect:(CGRect)rect{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
CGFloat raysH = 5.0; //光芒长度（可以自己写个比例）
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);
//轨迹 起点45° 终点为225° 逆时针运行 运行轨迹为半圆形 其中 gap月亮与太阳之间的圆心距，将决定月亮内弧与外弧之间的距离
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);
//光芒 起点270° 顺时针运行一周 每30°画一个光芒 总共12个
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 光芒个数：%d",angle , num);
}
- (void)setBrightness:(CGFloat)brightness{
_brightness = brightness;
[self setNeedsDisplay];
}
备注：在View中- (void)drawRect:(CGRect)rect会造成CPU的计算，可以这里写个优化，用CAShapeLayer重写- (void)drawInContext:(CGContextRef)ctx ，也可以缓存一下重复的计算
我就画着玩 ， 喵了个咪 ~
有啥问题可以留言，看到会回你 ~
