经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » iOS » 查看文章
iOS自定义雷达扫描扩散动画
来源：jb51　　时间：2021/10/11 9:22:43　　对本文有异议

本文实例为大家分享了iOS实现雷达扫描扩散动画的具体代码，供大家参考，具体内容如下

自己自定义了 一个雷达扫描/扩散效果的View。

扫描View 效果如下：

扩散View 效果如下：

自定义的代码如下：

1. RadarView.h

  1. #import <UIKit/UIKit.h>
  2.  
  3. typedef NS_ENUM(NSInteger, RadarViewType) {
  4.     RadarViewTypeScan,
  5.     RadarViewTypeDiffuse
  6. };
  7.  
  8. @interface RadarView : UIView
  9.  
  10. /** 雷达 空心圆圈的颜色 */
  11. @property (nonatomic, strong) UIColor * radarLineColor;
  12. /** 扇形开始颜色 必须由RGBA值初始化
  13.  *  [UIColor colorWithRed: green: blue: alpha:]
  14.  */
  15. @property (nonatomic, strong) UIColor * startColor;
  16. /** 扇形结束颜色 必须由RGBA值初始化
  17.  *  [UIColor colorWithRed: green: blue: alpha:]
  18.  */
  19. @property (nonatomic, strong) UIColor * endColor;
  20.  
  21. /**
  22.  *
  23.  *  @param radius       半径
  24.  *  @param angle        角度
  25.  *  @param radarLineNum 雷达线数量
  26.  *  @param hollowRadius 空心圆半径
  27.  *
  28.  *  @return 扫描 雷达 View
  29.  */
  30. + (RadarView *)scanRadarViewWithRadius:(CGFloat)radius
  31.                                  angle:(int)angle
  32.                           radarLineNum:(int)radarLineNum
  33.                           hollowRadius:(CGFloat)hollowRadius;
  34.  
  35.  
  36. /**
  37.  *
  38.  *  @param startRadius 扩散圆 起始的半径
  39.  *  @param endRadius   扩散圆 消失的半径
  40.  *  @param circleColor 扩散圆 的颜色
  41.  *
  42.  *  @return 扩散 雷达 View
  43.  */
  44. + (RadarView *)diffuseRadarViewWithStartRadius:(CGFloat)startRadius
  45.                                      endRadius:(CGFloat)endRadius
  46.                                    circleColor:(UIColor *)circleColor;
  47.  
  48. /**
  49.  *  展示在targerView上
  50.  *
  51.  *  @param targerView <#targerView description#>
  52.  */
  53. - (void)showTargetView:(UIView *)targerView;
  54.  
  55. - (void)dismiss;
  56.  
  57. /** 开始扫描动画 */
  58. - (void)startAnimatian;
  59.  
  60. /** 停止扫描动画 */
  61. - (void)stopAnimation;
  62.  
  63. @end

2. RadarView.m

  1. #import "RadarView.h"
  2.  
  3. #define CenterX self.bounds.size.width*0.5
  4. #define CenterY self.bounds.size.height*0.5
  5.  
  6. #define DefaultRadarLineColor [UIColor colorWithWhite:1 alpha:0.7]
  7. #define DefaultStartColor [UIColor colorWithRed:1 green:1 blue:1 alpha:0.5]
  8. #define DefaultEndColor [UIColor colorWithRed:1 green:1 blue:1 alpha:0]
  9.  
  10. #define DefaultCircleColor [UIColor colorWithWhite:1 alpha:0.5]
  11.  
  12. @interface RadarView ()
  13.  
  14. #pragma mark - 扫描类型的RadarView 属性
  15. /** 扇形半径 */
  16. @property (nonatomic, assign) CGFloat sectorRadius;
  17. /** 扇形 角度 */
  18. @property (nonatomic, assign) int angle;
  19. /** 雷达 空心圆圈的数量 */
  20. @property (nonatomic, assign) int radarLineNum;
  21. /** 中心 空心圆的半径 (一般 这里放置一个圆形的头像) */
  22. @property (nonatomic, assign) int hollowRadius;
  23.  
  24. #pragma mark - 扩散类型的RadarView 属性
  25. /** 扩散动画 起始 的半径 */
  26. @property (nonatomic, assign) CGFloat startRadius;
  27. /** 扩散动画 结束 的半径 */
  28. @property (nonatomic, assign) CGFloat endRadius;
  29. /** 圆圈的颜色 */
  30. @property (nonatomic, strong) UIColor * circleColor;
  31.  
  32. @property (nonatomic, strong) NSTimer * timer;
  33.  
  34. @property (nonatomic, assign) RadarViewType radarViewType;
  35.  
  36. @end
  37.  
  38. @implementation RadarView
  39.  
  40. + (RadarView *)scanRadarViewWithRadius:(CGFloat)radius angle:(int)angle radarLineNum:(int)radarLineNum hollowRadius:(CGFloat)hollowRadius {
  41.     return [[self alloc] initWithRadius:radius angle:angle radarLineNum:radarLineNum hollowRadius:hollowRadius];
  42. }
  43.  
  44. - (instancetype)initWithRadius:(CGFloat)radius
  45.                          angle:(int)angle
  46.                   radarLineNum:(int)radarLineNum
  47.                   hollowRadius:(CGFloat)hollowRadius {
  48.     if (self = [super init]) {
  49.         self.radarViewType = RadarViewTypeScan;
  50.         self.sectorRadius = radius;
  51.         self.frame = CGRectMake(0, 0, radius*2, radius*2);
  52.         self.angle = angle;
  53.         self.radarLineNum = radarLineNum-1;
  54.         self.hollowRadius = hollowRadius;
  55.         self.backgroundColor = [UIColor clearColor];
  56.     }
  57.     return self;
  58. }
  59.  
  60. + (RadarView *)diffuseRadarViewWithStartRadius:(CGFloat)startRadius endRadius:(CGFloat)endRadius circleColor:(UIColor *)circleColor {
  61.     return [[self alloc] initWithStartRadius:startRadius endRadius:endRadius circleColor:circleColor];
  62. }
  63.  
  64. - (instancetype)initWithStartRadius:(CGFloat)startRadius endRadius:(CGFloat)endRadius circleColor:(UIColor *)circleColor {
  65.     if (self = [super init]) {
  66.         self.radarViewType = RadarViewTypeDiffuse;
  67.         self.frame = CGRectMake(0, 0, endRadius*2, endRadius*2);
  68.         self.startRadius = startRadius;
  69.         self.endRadius = endRadius;
  70.         self.circleColor = circleColor;
  71.         self.backgroundColor = [UIColor clearColor];
  72.     }
  73.     return self;
  74. }
  75.  
  76. // Only override drawRect: if you perform custom drawing.
  77. // An empty implementation adversely affects performance during animation.
  78. - (void)drawRect:(CGRect)rect {
  79.     // Drawing code
  80.     if (_radarViewType == RadarViewTypeScan) {
  81.         if (!_startColor) {
  82.             _startColor = DefaultStartColor;
  83.         }
  84.         if (!_endColor) {
  85.             _endColor = DefaultEndColor;
  86.         }
  87.         if (!_radarLineColor) {
  88.             _radarLineColor = DefaultRadarLineColor;
  89.         }
  90.         
  91.         // 画雷达线
  92.         [self drawRadarLine];
  93.         
  94.         CGContextRef context = UIGraphicsGetCurrentContext();
  95.         // 把要画的扇形 分开画，一次画1°,每次的颜色渐变
  96.         for (int i = 0; i < _angle; i++) {
  97.             UIColor * color = [self colorWithCurrentAngleProportion:i*1.0/_angle];
  98.             [self drawSectorWithContext:context color:color startAngle:-90-i];
  99.         }
  100.     }
  101. }
  102.  
  103. /** 画扇形 */
  104. - (void)drawSectorWithContext:(CGContextRef)context
  105.                         color:(UIColor *)color
  106.                    startAngle:(CGFloat)startAngle {
  107.     //画扇形，也就画圆，只不过是设置角度的大小，形成一个扇形
  108.     CGContextSetFillColorWithColor(context, color.CGColor);//填充颜色
  109.     CGContextSetLineWidth(context, 0);//线的宽度
  110.     //以self.radius为半径围绕圆心画指定角度扇形
  111.     CGContextMoveToPoint(context, CenterX, CenterY);
  112.     CGContextAddArc(context, CenterX, CenterY, _sectorRadius, startAngle * M_PI / 180, (startAngle-1) * M_PI / 180, 1);
  113.     CGContextClosePath(context);
  114.     CGContextDrawPath(context, kCGPathFillStroke); //绘制路径
  115. }
  116.  
  117.  
  118. /** 画雷达线 */
  119. - (void)drawRadarLine {
  120.     CGFloat minRadius = (_sectorRadius-_hollowRadius)*(pow(0.618, _radarLineNum-1));
  121.     /** 画 围着空心半径的第一个空心圆，此圆不在计数内 */
  122.     [self drawLineWithRadius:_hollowRadius+minRadius*0.382];
  123.     
  124.     for (int i = 0; i < _radarLineNum; i++) {
  125.         [self drawLineWithRadius:_hollowRadius + minRadius/pow(0.618, i)];
  126.     }
  127. }
  128.  
  129. /** 画空心圆 */
  130. - (void)drawLineWithRadius:(CGFloat)radius {
  131.     CAShapeLayer *solidLine =  [CAShapeLayer layer];
  132.     CGMutablePathRef solidPath =  CGPathCreateMutable();
  133.     solidLine.lineWidth = 1.0f ;
  134.     solidLine.strokeColor = _radarLineColor.CGColor;
  135.     solidLine.fillColor = [UIColor clearColor].CGColor;
  136.     CGPathAddEllipseInRect(solidPath, nil, CGRectMake(self.bounds.size.width*0.5-radius, self.bounds.size.height*0.5-radius, radius*2, radius*2));
  137.     solidLine.path = solidPath;
  138.     CGPathRelease(solidPath);
  139.     [self.layer addSublayer:solidLine];
  140. }
  141.  
  142. #pragma mark - 展示
  143. - (void)showTargetView:(UIView *)targerView {
  144.     self.center = targerView.center;
  145.     [targerView addSubview:self];
  146. }
  147.  
  148. #pragma mark - 
  149. - (void)dismiss {
  150.     [self removeFromSuperview];
  151. }
  152.  
  153. #pragma mark - 开始动画
  154. - (void)startAnimatian {
  155.     if (_radarViewType == RadarViewTypeScan) {
  156.         CABasicAnimation* rotationAnimation;
  157.         rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
  158.         rotationAnimation.toValue = [NSNumber numberWithFloat: 1 * M_PI * 2.0 ];
  159.         rotationAnimation.duration = 2;
  160.         rotationAnimation.cumulative = YES;
  161.         rotationAnimation.repeatCount = INT_MAX;
  162.         [self.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
  163.     } else {
  164.         [self diffuseAnimation];
  165.         _timer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(diffuseAnimation) userInfo:nil repeats:YES];
  166.     }
  167. }
  168.  
  169. #pragma mark - 结束动画
  170. - (void)stopAnimation {
  171.     if (_radarViewType == RadarViewTypeScan) {
  172.         [self.layer removeAnimationForKey:@"rotationAnimation"];
  173.     } else {
  174.         [_timer invalidate];
  175.         _timer = nil;
  176.     }
  177. }
  178.  
  179. - (UIColor *)colorWithCurrentAngleProportion:(CGFloat)angleProportion {
  180.     NSArray * startRGBA = [self RGBA_WithColor:_startColor];
  181.     NSArray * endRGBA = [self RGBA_WithColor:_endColor];
  182.     CGFloat currentR = [startRGBA[0] floatValue] - ([startRGBA[0] floatValue]-[endRGBA[0] floatValue]) * angleProportion;
  183.     CGFloat currentG = [startRGBA[1] floatValue] - ([startRGBA[1] floatValue]-[endRGBA[1] floatValue]) * angleProportion;
  184.     CGFloat currentB = [startRGBA[2] floatValue] - ([startRGBA[2] floatValue]-[endRGBA[2] floatValue]) * angleProportion;
  185.     CGFloat currentA = [startRGBA[3] floatValue] - ([startRGBA[3] floatValue]-[endRGBA[3] floatValue]) * angleProportion;
  186.     return [UIColor colorWithRed:currentR green:currentG blue:currentB alpha:currentA];
  187. }
  188.  
  189. /**
  190.  *  将UIColor对象解析成RGBA 值 的数组
  191.  *
  192.  *  @param color UIColor对象，有RGBA值 初始化的
  193.  *[UIColor colorWithRed:rValue green:gValue blue:bValue alpha:aValue]
  194.  *
  195.  *  @return 包含RGBA值得数组[rValue, gValue, bValue, aValue]
  196.  */
  197. - (NSArray *)RGBA_WithColor:(UIColor *)color {
  198.     NSString * colorStr = [NSString stringWithFormat:@"%@", color];
  199.     //将RGB值描述分隔成字符串
  200.     NSArray * colorValueArray = [colorStr componentsSeparatedByString:@" "];
  201.     NSString * R = colorValueArray[1];
  202.     NSString * G = colorValueArray[2];
  203.     NSString * B = colorValueArray[3];
  204.     NSString * A = colorValueArray[4];
  205.     return @[R, G, B, A];
  206. }
  207.  
  208. /** 画圆 */
  209. - (UIImage *)drawCircle {
  210.     UIGraphicsBeginImageContext(CGSizeMake(_endRadius*2, _endRadius*2));
  211.     CGContextRef context = UIGraphicsGetCurrentContext();
  212.     CGContextMoveToPoint(context, CenterX, CenterY);
  213.     CGContextSetFillColorWithColor(context, _circleColor.CGColor);
  214.     CGContextAddArc(context, CenterX, CenterY, _endRadius, 0, -2*M_PI, 1);
  215.     CGContextFillPath(context);
  216.     UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
  217.     UIGraphicsEndImageContext();
  218.     return img;
  219. }
  220.  
  221. - (void)diffuseAnimation {
  222.     UIImageView * imgView = [[UIImageView alloc] init];
  223.     imgView.image = [self drawCircle];
  224.     imgView.frame = CGRectMake(0, 0, _startRadius, _startRadius);
  225.     imgView.center = CGPointMake(CenterX, CenterY);
  226.     [self addSubview:imgView];
  227.     
  228.     [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
  229.         imgView.frame = CGRectMake(0, 0, _endRadius*2, _endRadius*2);
  230.         imgView.center = CGPointMake(CenterX, CenterY);
  231.         imgView.alpha = 0;
  232.     } completion:^(BOOL finished) {
  233.         [imgView removeFromSuperview];
  234.     }];
  235. }
  236.  
  237. @end

3. ViewController.m 中使用的代码：

  1. #import "ViewController.h"
  2. #import "RadarView.h"
  3.  
  4. @interface ViewController ()
  5.  
  6. @property (nonatomic, strong) RadarView * scanRadarView;
  7. @property (nonatomic, strong) RadarView * diffuseRadarView;
  8.  
  9. @end
  10.  
  11. @implementation ViewController
  12.  
  13. - (void)viewDidLoad {
  14.     [super viewDidLoad];
  15.     /** 扫描 类型 RadarView */
  16. //    _scanRadarView = [RadarView scanRadarViewWithRadius:self.view.bounds.size.width*0.5 angle:400 radarLineNum:5 hollowRadius:0];
  17.     
  18.     /** 扩散 类型 RadarView */
  19.     _diffuseRadarView = [RadarView diffuseRadarViewWithStartRadius:7 endRadius:self.view.bounds.size.width*0.5 circleColor:[UIColor whiteColor]];
  20. }
  21.  
  22. - (void)viewDidAppear:(BOOL)animated {
  23.     [super viewDidAppear:animated];
  24.     
  25. //    [_scanRadarView showTargetView:self.view];
  26. //    [_scanRadarView startAnimatian];
  27.     
  28.     [_diffuseRadarView showTargetView:self.view];
  29.     [_diffuseRadarView startAnimatian];
  30. }
  31.  
  32. - (void)didReceiveMemoryWarning {
  33.     [super didReceiveMemoryWarning];
  34.     // Dispose of any resources that can be recreated.
  35. }
  36.  
  37. @end

现在定义的是能代码加载使用，等有空了，再封装一些方法能在Storyboard中直接使用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

iOS热门文章

  • snapkit更新约束崩溃的问题
  • iOS 14 UDP收不到广播处理
  • iOS开发用如何用类&quot;SKStoreProductViewController&quot;跳转AppStore点赞评分？
  • Charles抓包iPhone注意点以及SSL Proxying enabled for this host
  • 笔记：long、longlong、int、float、NSString相互转换
  • ios开发UI篇—UITextfield
  • 自定义相机碰到的问题，比如常见的拍照录制视频方向，镜像左右颠倒等问题
  • C 和 Object-C中的 #ifdef #ifndef
  • 使用Hbuilder将自己app发布到App Store（一）
  • iOS开发 - 超级签名实现之描述文件

    • iOS推荐文章

  • iOS开发基础135-Core Data
  • uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
  • 苹果支付有哪些坑，为什么苹果支付比支付宝和微信容易丢单？
  • 带你走进灵动岛
  • vue3+ts Axios封装—重复请求拦截
  • axios详解以及完整封装方法
  • 关于 axios 是什么？以及怎么用？
  • iOS气泡提示工具BubblePopup的使用
  • 一篇文章带你详细了解axios的封装 - 公众号-web前端进阶
  • [MAUI]模仿iOS多任务切换卡片滑动的交互实现

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号