雷达扫描的简单实现

采用UIBezierPath和CoreGraphics绘制线圈和扫描器，并结合CABasicAnimation简单实现了雷达扫描界面，效果图如下：

Radar.gif

上代码：

这里要重写- (void)drawRect:(CGRect)rect方法

- (void)drawRect:(CGRect)rect {
//绘制线圈
    for (int i = 0; i < 4; i++) {
        CGFloat radius = self.bounds.size.width / 6.0 * i;
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width / 2.0, self.bounds.size.height / 2.0) radius:radius startAngle:i/4.0*2*M_PI endAngle:2*M_PI+i/4.0*2*M_PI clockwise:YES];
        //添加线圈绘制动画
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        animation.fromValue = @(0.f);
        animation.toValue = @(1.f);
        animation.repeatCount = INT_MAX;
        animation.duration = 2.f;
        
        CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
        shapeLayer.strokeColor = [UIColor colorWithRed:0 green:0 blue:0.7 alpha:1].CGColor;
        shapeLayer.fillColor = [UIColor clearColor].CGColor;
        shapeLayer.lineWidth = 1;
        shapeLayer.lineJoin = kCALineJoinRound;
        shapeLayer.lineCap = kCALineCapRound;
        shapeLayer.path = path.CGPath;
        [shapeLayer addAnimation:animation forKey:@"circleLayerAnimation"];
        
        [self.layer addSublayer:shapeLayer];

    }
    
//绘制雷达扫描器
    /*
    //第一种方法：UIBezierPath循环画扇形，给颜色不同的透明度
    for (int i = 0; i < 90; i++) {
        CGFloat alpha = i * 1.0 / 90;
        
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(self.bounds.size.width / 2.0, self.bounds.size.height / 2.0)];
        [path addArcWithCenter:CGPointMake(self.bounds.size.width / 2.0, self.bounds.size.height / 2.0) radius:self.bounds.size.width / 2.0 startAngle:i * M_PI / 180.f endAngle:(i + 1) * M_PI / 180.f clockwise:YES];
        [path closePath];
        

        CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
        shapeLayer.strokeColor = [UIColor redColor].CGColor;
        shapeLayer.fillColor = [UIColor colorWithRed:0 green:0.6 blue:0 alpha:alpha].CGColor;
        shapeLayer.lineWidth = 0;
        shapeLayer.lineJoin = kCALineJoinRound;
        shapeLayer.lineCap = kCALineCapRound;
        shapeLayer.path = path.CGPath;

        [self.layer addSublayer:shapeLayer];
        
    }
    */
    //第二种方法：CoreGraphics颜色渐变
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    NSArray* gradientColors = [NSArray arrayWithObjects:
                               (id)[UIColor whiteColor].CGColor,
                               (id)[UIColor purpleColor].CGColor, nil];
    CGFloat gradientLocations[] = {0, 1};
    
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,
                                                        (__bridge CFArrayRef)gradientColors,
                                                        gradientLocations);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextMoveToPoint(context, self.bounds.size.width / 2.0, self.bounds.size.height/2.0);
    CGContextAddArc(context, self.bounds.size.width / 2.0, self.bounds.size.height/2.0, self.bounds.size.width / 2.0, 0 , 1.0/2 *M_PI, 0);
    CGContextClosePath(context);
    CGContextClip(context);
    
    
    CGPoint endshine;
    CGPoint startshine;
    startshine = CGPointMake(self.bounds.size.width, self.bounds.size.width / 2.0);
    endshine = CGPointMake(self.bounds.size.width / 2.0 ,self.bounds.size.height);
    CGContextDrawLinearGradient(context,gradient , startshine, endshine, kCGGradientDrawsAfterEndLocation);
    CGContextRestoreGState(context);
    
    //添加雷达扫描动画
    CABasicAnimation* rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];
    rotationAnimation.duration = 3;
    rotationAnimation.cumulative = YES;
    rotationAnimation.repeatCount = INT_MAX;
    
    [self.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
    
}

你可以在 这里下载到本文的代码