iOS雷达和类似水波纹效果的实现

最近项目里面需要用到雷达扫描和水波纹效果,具体来说就是打开应用出现水波纹扩散的效果,点击召唤之后出现雷达扫描效果.效果如下:
iOS雷达和类似水波纹效果的实现

首先说下第一个水波纹效果,这个比较容易实现,一组组动画就ok了,上代码:
#import “Radar.h”

@implementation Radar

-(void)drawRect:(CGRect)rect {
[super drawRect:rect];
[KColor(22, 163, 130) setFill];
UIRectFill(rect);
NSInteger pulsingCount = 5;
double animationDuration = 3;
CALayer * animationLayer = [CALayer layer];
for (int i = 0; i < pulsingCount; i++) {
    CALayer * pulsingLayer = [CALayer layer];
    pulsingLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
    pulsingLayer.borderColor = [UIColor whiteColor].CGColor;
    pulsingLayer.borderWidth = 1;
    pulsingLayer.cornerRadius = rect.size.height / 2;

    CAMediaTimingFunction * defaultCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];

    CAAnimationGroup * animationGroup = [CAAnimationGroup animation];
    animationGroup.fillMode = kCAFillModeBackwards;
    animationGroup.beginTime = CACurrentMediaTime() + (double)i * animationDuration / (double)pulsingCount;
    animationGroup.duration = animationDuration;
    animationGroup.repeatCount = HUGE;
    animationGroup.timingFunction = defaultCurve;

    CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = @1.4;
    scaleAnimation.toValue = @2.2;

    CAKeyframeAnimation * opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.values = @[@1, @0.9, @0.8, @0.7, @0.6, @0.5, @0.4, @0.3, @0.2, @0.1, @0];
    opacityAnimation.keyTimes = @[@0, @0.1, @0.2, @0.3, @0.4, @0.5, @0.6, @0.7, @0.8, @0.9, @1];

    animationGroup.animations = @[scaleAnimation, opacityAnimation];
    [pulsingLayer addAnimation:animationGroup forKey:@"plulsing"];
    [animationLayer addSublayer:pulsingLayer];
}
[self.layer addSublayer:animationLayer];

}
在对应的controller里面引用:

    self.centerRadarView = [[Radar alloc] initWithFrame:CGRectMake(0, 0, 135, 135)];
    _centerRadarView.center = _radarView.center;
    [self.view addSubview:_centerRadarView];

至于中间的圆,那就根据需要自定义就好了.
第二个雷达扫描效果就稍微复杂点了,用了一个github上分享的控件XHRadarView
感谢作者的开源.
加上了自己很据项目需要改变的动画效果.

秒客网

iOS雷达和类似水波纹效果的实现

相关文章