动画效果视频.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 ，也可以缓存一下重复的计算

我就画着玩 ， 喵了个咪 ~
有啥问题可以留言，看到会回你 ~