iOS雷達(dá)效果

這段時間新app開始了，有個產(chǎn)品需求是做一個類似如下效果的雷達(dá)圖：

雷達(dá)圖.gif

中間的圖片是用戶頭像，然后需要展示一個雷達(dá)掃描的效果。

分析下雷達(dá)圖的大致構(gòu)成：

  1. 底部一個呈現(xiàn)用戶頭像的UIImageView
  2. 幾個顏色漸變的同心圓，這些同心圓。 只需要在雷達(dá)視圖的drawRect方法里畫就可以了
  3. 蓋在最上層的一個扇形，且扇形的圓心和雷達(dá)圖視圖的圓心是同一個點。掃描效果就是讓這個扇形繞圓心轉(zhuǎn)，因此把這個扇形抽成一個單獨的類比較好。

同時這個雷達(dá)圖應(yīng)該提供兩個接口：開始動畫，暫停動畫。因此雷達(dá)圖的.h文件暴露出來的接口如下：

@interface CPRadarView : UIView
- (void)start;//開始掃描
- (void)stop;//停止掃描
@end

.m文件實現(xiàn)如下：

typedef NS_ENUM(NSUInteger, SectorAnimationStatus) {//扇形視圖動畫狀態(tài)
    SectorAnimationUnStart,
    SectorAnimationIsRunning,
    SectorAnimationIsPaused,
};

#define CircleGap   15

@interface CPRadarView ()
@property (nonatomic, strong) CPSectorView *sectorView;         //扇形視圖
@property (nonatomic, assign) SectorAnimationStatus status;
@end
@implementation CPRadarView
- (instancetype)initWithFrame:(CGRect)frame {
    if(self = [super initWithFrame:frame]) {
        [self setupUI];
        _status = SectorAnimationUnStart;
    }
    return self;
}

- (void)setupUI {
    self.backgroundColor = [UIColor whiteColor];
    [self addSubview:({
        CGRect temp = self.frame;
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((temp.size.width - temp.size.width / 3.0) / 2.0, (temp.size.height - temp.size.width / 3.0) / 2.0, temp.size.width / 3.0, temp.size.width / 3.0)];
        imageView.layer.cornerRadius = temp.size.width / 6.0;
        imageView.layer.masksToBounds = YES;
        imageView.image = [UIImage imageNamed:@"hehe.JPG"];
        imageView;
    })];
    [self addSubview:({
         CGRect temp = self.frame;
        _sectorView = [[CPSectorView alloc] initWithRadius:temp.size.width / 6.0 + 4 * CircleGap degree:M_PI / 6];
        CGRect frame = _sectorView.frame;
        frame.origin.x = (self.frame.size.width - frame.size.width) / 2.0;
        frame.origin.y = (self.frame.size.height - frame.size.height) / 2.0;
        _sectorView.frame = frame;
        _sectorView;
    })];
}

- (void)start {
    if (_status == SectorAnimationUnStart) {
        _status = SectorAnimationIsRunning;
        CABasicAnimation* rotationAnimation;
        rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
        rotationAnimation.toValue = [NSNumber numberWithFloat: 2 * M_PI ];
        rotationAnimation.duration = 5;
        rotationAnimation.cumulative = YES;
        rotationAnimation.removedOnCompletion = NO;
        rotationAnimation.repeatCount = MAXFLOAT;
        rotationAnimation.fillMode = kCAFillModeForwards;
        [_sectorView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
    }
    if (_status == SectorAnimationIsPaused) {
        _status = SectorAnimationIsRunning;
        [self resumeLayer:_sectorView.layer];
    }
}

- (void)stop {
    _status = SectorAnimationIsPaused;
    [self pauseLayer:_sectorView.layer];
}

/**
 *  暫停動畫
 *
 *  @param layer layer
 */
-(void)pauseLayer:(CALayer*)layer {
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
    layer.speed = 0.0;
    layer.timeOffset = pausedTime;
}

/**
 *  恢復(fù)動畫
 *
 *  @param layer layer
 */
- (void)resumeLayer:(CALayer*)layer {
    CFTimeInterval pausedTime = [layer timeOffset];
    layer.speed = 1.0;
    layer.timeOffset = 0.0;
    layer.beginTime = 0.0;
    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    layer.beginTime = timeSincePause;
}

/**
 *  主要是用于畫同心圓
 *
 *  @param rect rect
 */
- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    NSArray *colors = @[[UIColor colorWithHexString:@"ff4e7d"], [UIColor colorWithHexString:@"fd7293"], [UIColor colorWithHexString:@"fcb8cd"], [UIColor colorWithHexString:@"fde9f2"], [UIColor colorWithHexString:@"fcebf3"]];
    CGFloat radius = rect.size.width / 6.0;
    for (UIColor *color in colors) {
        CGFloat red, green, blue, alpha;
        [color getRed:&red green:&green blue:&blue alpha:&alpha];
        CGContextSetRGBStrokeColor(context, red, green, blue, alpha);
        CGContextSetLineWidth(context, 1);
        
        CGContextAddArc(context, rect.size.width / 2.0, rect.size.height / 2.0, radius, 0, 2* M_PI, 0);
         CGContextDrawPath(context, kCGPathStroke);
        radius += CircleGap;
    }
}

其中CPSectorView 是定義的扇形視圖，它什么都沒干，只是將這個扇形畫出來，其.h文件如下：

@interface CPSectorView : UIView

- (instancetype)initWithRadius:(CGFloat)radius degree:(CGFloat)degree;
@end

radius 表示扇形的半徑，degree表示扇形的弧度。其m文件如下：

@interface CPSectorView ()
@property (nonatomic, assign) CGFloat radius;
@property (nonatomic, assign) CGFloat degree;
@end

@implementation CPSectorView
- (instancetype)initWithRadius:(CGFloat )radius degree:(CGFloat)degree {
    self = [super initWithFrame:CGRectMake(0, 0, 2 *radius, 2 *radius)];
    if (self)  {
        _degree = degree;
        _radius = radius;
    }
    self.backgroundColor = [UIColor clearColor];
    return self;
}

- (void)drawRect:(CGRect)rect {
//    CGContextRef context = UIGraphicsGetCurrentContext();
//    UIColor *aColor = [UIColor colorWithHexString:@"ff4e7d" alpha:0.5];
//    CGContextSetRGBStrokeColor(context, 1, 1, 1, 0);
//    CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
//    CGContextSetFillColorWithColor(context, aColor.CGColor);//填充顏色
//    
//    CGContextMoveToPoint(context, center.x, center.y);
//    CGContextAddArc(context,center.x, center.y, _radius,  _degree / 2.0, -_degree / 2.0, 1);
//    CGContextClosePath(context);
//    CGContextDrawPath(context, kCGPathFillStroke); //繪制路徑
    
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef imgCtx = UIGraphicsGetCurrentContext();
    CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
    CGContextMoveToPoint(imgCtx, center.x,center.y);
    CGContextSetFillColor(imgCtx, CGColorGetComponents([UIColor blackColor].CGColor));
    CGContextAddArc(imgCtx, center.x, center.y, _radius,  _degree / 2.0, -_degree / 2.0, 1);
    CGContextFillPath(imgCtx);//畫扇形遮罩
    CGImageRef mask = CGBitmapContextCreateImage(UIGraphicsGetCurrentContext());
    UIGraphicsEndImageContext();
    CGContextClipToMask(ctx, self.bounds, mask);
    
    CGFloat components[8]={
        1.0, 0.306, 0.49, 0.5,     //start color(r,g,b,alpha)
        0.992, 0.937, 0.890, 0.5      //end color
    };
    //為扇形增加徑向漸變色
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColorComponents(space, components, NULL,2);
    CGColorSpaceRelease(space),space=NULL;//release
    
    CGPoint start = center;
    CGPoint end = center;
    CGFloat startRadius = 0.0f;
    CGFloat endRadius = _radius;
    CGContextRef graCtx = UIGraphicsGetCurrentContext();
    CGContextDrawRadialGradient(graCtx, gradient, start, startRadius, end, endRadius, 0);
    CGGradientRelease(gradient),gradient=NULL;//release
}

如果對扇形不做徑向顏色漸變直接用注釋的代碼即可。具體代碼就不解釋了，注釋和函數(shù)名字都很清晰。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,006評論 25贊 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,245評論 4贊 61
  • 我想 陪孩子旅行
    龍歌Longer閱讀 388評論 0贊 0
  • 自嘲【原創(chuàng)】 蘭雪兒 2013-07-21 23:51 曾經(jīng)含辛茹苦 只為了破繭為蝶 綻放一時的美麗綽約 而今當(dāng)五...
    我是蘭姐閱讀 177評論 0贊 0

友情鏈接更多精彩內(nèi)容