iOS实现雷达扫描效果

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

#import <UIKit/UIKit.h>

@interface LTIndicatiorView : UIView
@property(nonatomic,strong)UIColor *color;
@property(nonatomic,assign)float repeatCount;
@property(nonatomic,strong)UIColor *borderColor;
@property(nonatomic,assign)float borderWidth;
@end

@interface LTRadarView : UIView
@property(nonatomic,strong)UIColor *color;
@property(nonatomic,strong)UIColor *borderColor;
@property(nonatomic,assign)float borderWidth;
@property(nonatomic,assign)int pulsingCount;
@property(nonatomic,assign)float duration;
@property(nonatomic,assign)float repeatCount;
@property(nonatomic,strong)CALayer *pulsingLayer;

@end

.m文件

//
//  LTRadarView.m
//  raderScan
//
//  Created by mac on 17/2/5.
//  Copyright © 2017年 mac. All rights reserved.
//

#import "LTRadarView.h"

#define Angel 15

@interface LTRadarButton : UIButton

@end

@implementation LTRadarButton

- (void)removeFromSuperview
{
    [UIView beginAnimations:@"" context:nil];
    [UIView setAnimationDuration:0.5];
    self.transform = CGAffineTransformMakeScale(0.2, 0.2);
    self.alpha = 0;
    [UIView setAnimationDidStopSelector:@selector(callSuperRemoveFromSuperview)];
    [UIView commitAnimations];

}

- (void)callSuperRemoveFromSuperview
{
    [super removeFromSuperview];
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    self.alpha = 0;
    return self;
}

- (void)didMoveToWindow
{
    [super didMoveToWindow];
     self.transform = CGAffineTransformMakeScale(0.2, 0.2);
    if (self.window) {
        [UIView animateWithDuration:0.5 animations:^{
            self.transform = CGAffineTransformIdentity;
            self.alpha = 1;
        }];
    }

}

@end

@implementation LTIndicatiorView

- (id)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        _color = [UIColor greenColor];
        _repeatCount = HUGE_VALF;
        _borderColor = [UIColor redColor];
        _borderWidth = 1.0f;
    }
    return self;
}

 // Only override drawRect: if you perform custom drawing.
 // An empty implementation adversely affects performance during animation.
 - (void)drawRect:(CGRect)rect {
 // Drawing code

     self.backgroundColor = [UIColor whiteColor];
     [super drawRect:rect];
     self.layer.cornerRadius = self.frame.size.height/2.0f;
     self.clipsToBounds = YES;
     self.layer.borderColor = [UIColor clearColor].CGColor;
     self.layer.borderWidth = 50;
     self.layer.masksToBounds = YES;

     CGContextRef context = UIGraphicsGetCurrentContext();
     for (int i = 0; i < Angel; i++) {
         CGFloat alpha = (float)i /(float)600;
         CGColorRef shadowColor = [[UIColor greenColor] colorWithAlphaComponent:alpha].CGColor;//计算扇形填充颜色
         CGContextSetFillColorWithColor(context, shadowColor);
         CGContextMoveToPoint(context, self.center.x, self.center.y);//指定员心
         CGFloat startAngle =  (-Angel+i+1.15)/Angel*(float)M_PI;
         CGFloat endAngle = (-Angel+i-1.15)/Angel*(float)M_PI;
//         NSLog(@"startAngle = %f endAngle = %f ,alpha = %f",startAngle,endAngle,alpha);
         CGContextAddArc(context, self.center.x, self.center.y, self.frame.size.height/2.0f,0, 25, 1);//画一个扇形
         CGContextClosePath(context);

         CGContextDrawPath(context, kCGPathFill);//绘制扇形

     }

     CGContextSetLineWidth(context, 1);//扫描线宽度
     CGContextSetStrokeColorWithColor(context, [_color colorWithAlphaComponent:1].CGColor);//扫描线颜色
     CGContextMoveToPoint(context, self.center.x, self.center.y);
     CGContextAddLineToPoint(context, self.frame.size.height, self.center.y);
     CGContextStrokePath(context);

     CGContextSetRGBStrokeColor(context,255/255.0, 255/255.0, 255/255.0, 0.1);//最外面圆颜色
     CGContextSetLineWidth(context, 10);//线宽度
     CGContextAddArc(context, self.center.x, self.center.y, self.frame.size.height/2.0, 0, 2*M_PI, 1);//添加一个圆
     CGContextDrawPath(context, kCGPathStroke);//绘制路径

     CGContextStrokePath(context);//显示绘制

     //扫描动画
     CABasicAnimation *rotateAnimation = [CABasicAnimation animation];
     rotateAnimation.keyPath = @"transform.rotation.z";
     rotateAnimation.toValue = @(2*M_PI);
     rotateAnimation.duration = 3;
     rotateAnimation.removedOnCompletion = NO;
     rotateAnimation.repeatCount = _repeatCount;

     [self.layer addAnimation:rotateAnimation forKey:@"rotate_layer"];
 }

@end

@implementation LTRadarView
{
    NSMutableArray *items;
}

- (id)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {

        items = [NSMutableArray array];
        _color = [UIColor redColor];

        _borderColor = [UIColor greenColor];
        _pulsingCount = 3;
        _duration = 3;
        _repeatCount = HUGE_VALF;
        _borderWidth = 3.0f;
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    [super drawRect:rect];

    self.layer.cornerRadius = self.frame.size.height/2;
    self.clipsToBounds = YES;
    self.layer.borderColor = [UIColor clearColor].CGColor;
    self.layer.borderColor = [UIColor clearColor].CGColor;
    self.layer.borderWidth = 50;
    self.layer.masksToBounds = YES;

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetRGBFillColor(ctx, 0/255.0, 0/255.0, 0/255.0, 1);//圆颜色
    CGContextSetLineWidth(ctx, 1);//宽度
    CGContextAddArc(ctx, self.center.x, self.center.y, self.frame.size.height/2, 0, 2*M_PI, 1);//添加一个圆
    CGContextDrawPath(ctx, kCGPathStroke);//绘制
    CGContextStrokePath(ctx);//显示

    CALayer *animationLayer = [CALayer layer];
    animationLayer.frame = self.layer.frame;
    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 clearColor].CGColor;
        pulsingLayer.borderWidth = 1;
        pulsingLayer.cornerRadius = rect.size.height/2;
        pulsingLayer.backgroundColor = [UIColor redColor].CGColor;

        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
        animationGroup.fillMode = kCAFillModeBoth;
        animationGroup.beginTime = CACurrentMediaTime() + (float) i * _duration / _pulsingCount;
        animationGroup.duration = _duration;
        animationGroup.repeatCount = HUGE_VALF;
        animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
        animationGroup.autoreverses = NO;
        animationGroup.delegate = self;
        animationGroup.removedOnCompletion = NO;

        CABasicAnimation *scaleAnimation = [CABasicAnimation animation];
        scaleAnimation.keyPath = @"transform.scale";
        scaleAnimation.removedOnCompletion = NO;
        scaleAnimation.fromValue = @(0.0f);
        scaleAnimation.toValue = @1.0f;
        scaleAnimation.autoreverses = NO;

        CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimation animation];
        opacityAnimation.keyPath = @"opacity";
        opacityAnimation.values = @[@1.0,@0.75,@0.5,@0.25,@0.0];
        opacityAnimation.keyTimes = @[@0.0,@0.25,@0.5,@0.75,@1];
        opacityAnimation.autoreverses = NO;
        opacityAnimation.removedOnCompletion = NO;

        animationGroup.animations = @[scaleAnimation,opacityAnimation];
        [pulsingLayer addAnimation:animationGroup forKey:@"pulsing"];

        [animationLayer addSublayer:pulsingLayer];
    }

    [self.layer addSublayer:animationLayer];

    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(addOrReplaceItem) userInfo:nil repeats:YES];
}

- (void)animation:(CALayer *)layer
{
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.fillMode = kCAFillModeBoth;
    animationGroup.beginTime = CACurrentMediaTime() + 1 * _duration / _pulsingCount;
    animationGroup.duration = _duration;
    animationGroup.repeatCount = HUGE_VALF;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animationGroup.autoreverses = NO;
    animationGroup.delegate = self;
    animationGroup.removedOnCompletion = NO;

    CABasicAnimation *scaleAnimation = [CABasicAnimation animation];
    scaleAnimation.keyPath = @"transform.scale";
    scaleAnimation.removedOnCompletion = NO;
    scaleAnimation.fromValue = @(0.0f);
    scaleAnimation.toValue = @1.0f;
    scaleAnimation.autoreverses = NO;

    CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimation animation];
    opacityAnimation.keyPath = @"opacity";
    opacityAnimation.values = @[@1.0,@0.75,@0.5,@0.25,@0.0];
    opacityAnimation.keyTimes = @[@0.0,@0.25,@0.5,@0.75,@1];
    opacityAnimation.autoreverses = NO;
    opacityAnimation.removedOnCompletion = NO;

    animationGroup.animations = @[scaleAnimation,opacityAnimation];
    [layer addAnimation:animationGroup forKey:@"pulsing"];

}

#define RandomColor [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0]
/*
 生成一个在圆里面的坐标
 生成的坐标要围绕中心的绿点(圆心),让我们重新翻开数学课本,看看高中数学对三角函数的定义:
 在一个平面直角坐标系中,以原点为圆心,1 为半径画一个圆,这个圆交 x 轴于 A 点。以 O 为旋转中心,将 A 点逆时针旋转一定的角度α至 B 点,设此时 B 点的坐标是(x,y),那么此时 y 的值就叫做α的正弦,记作 sinα;此时 x 的值就叫做α的余弦,记作 cosα;y 与 x 的比值 y/x 就叫做α的正切,记作 tanα。

 任意角三角函数 正弦sinθ=y/r, 余弦cosθ=x/r,正切tanθ=y/x,余切cotθ=x/y,正割secθ=r/x,余割cscθ=r/y
 锐角三角函数 正弦sinA=a/c, 余弦cosA=b/c,正切tanA=a/b,余切cotA=b/a,正割secA=c/b,余割cscA=c/a

 还有一个很重要的公式:圆的参数方程:以点O(a,b)为圆心,以r为半径的圆的参数方程是 x=a+r*cosθ, y=b+r*sinθ, (其中θ为参数)
 到这里为止,思路就清晰了,以下是generateCenterPointInRadar的方法实现:
 */

- (CGPoint)generateCenterPointInRadar
{
    float  angle = arc4random() % 360;//随机一个角度
    float radius = arc4random() % (int)((self.bounds.size.width - 44)/2);//随机一个半径, 这里减去44是因为要把这个view显示在圆里面,如果不减44,则有可能会显示在圓外面
    double x = cos(angle) * radius;//计算随机出现的一个角度的x坐标 x=a+r*cosθ r = radius, θ = angle ,a = 圆心的x坐标
    double y = sin(angle) * radius;//计算随机出现的一个角度的y坐标 y=b+r*sinθ r = radius, θ = angle ,b = 圆心的y坐标
    return CGPointMake(x + self.bounds.size.width / 2, y + self.bounds.size.height / 2);//x y 分别加个圆心的坐标即self.center.x.y
}

- (void)addOrReplaceItem
{
    int maxCount = 10;

    LTRadarButton *radarButton = [LTRadarButton buttonWithType:UIButtonTypeCustom];
    radarButton.frame = CGRectMake(0, 0, 44, 44);
    radarButton.backgroundColor = RandomColor;
    radarButton.layer.cornerRadius = 44/2;

    do {
        CGPoint center = [self generateCenterPointInRadar];
        radarButton.center = CGPointMake(center.x, center.y);
    } while ([self itemFrameIntersectsInOtherItem:radarButton.frame]);

    [self addSubview:radarButton];
    [items addObject:radarButton];

    if (items.count > maxCount)
    {
        UIView * view = [items firstObject];
        [view removeFromSuperview];
        [items removeObject:view];
    }
}

/*
 我们现在在生成每个item的center的时候,没有和已有的item进行比较,这是一个比较耗性能的操作,如果你的itemSize过大,maxCount过多,这甚至能导致死循环,如果是那样的话,你可能在对itemSize以及maxCount做出限制的同时,也对循环的数量也进行控制,如果在生成一个item的center的时候,进行了过多的循环,就可以视为进入死循环了,在这种情况下,你只能重新计算已有的centers。这里不考虑这种极端情况,因为目前的itemSize和maxCount的配合,不会出现死循环。
 我们添加一个itemFrameIntersectsInOtherItem私有方法来判断是否和之前生成的center有了重叠:
 */
- (BOOL)itemFrameIntersectsInOtherItem:(CGRect)frame
{
    for (UIView *item in items)
    {
        if (CGRectIntersectsRect(item.frame, frame))
        {
            return YES;
        }
    }
    return NO;
}

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

(0)

相关推荐

  • iOS 雷达效果实例详解

    iOS雷达效果 这段时间新app开始了,有个产品需求是做一个类似如下效果的雷达图: 中间的图片是用户头像,然后需要展示一个雷达扫描的效果. 分析下雷达图的大致构成: 底部一个呈现用户头像的UIImageView 几个颜色渐变的同心圆,这些同心圆. 只需要在雷达视图的drawRect方法里画就可以了 盖在最上层的一个扇形,且扇形的圆心和雷达图视图的圆心是同一个点.扫描效果就是让这个扇形绕圆心转,因此把这个扇形抽成一个单独的类比较好. 同时这个雷达图应该提供两个接口:开始动画,暂停动画.因此雷达图的

  • iOS自定义雷达扫描扩散动画

    本文实例为大家分享了iOS实现雷达扫描扩散动画的具体代码,供大家参考,具体内容如下 自己自定义了 一个雷达扫描/扩散效果的View. 扫描View 效果如下: 扩散View 效果如下: 自定义的代码如下: 1. RadarView.h #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, RadarViewType) { RadarViewTypeScan, RadarViewTypeDiffuse }; @interface RadarView

  • iOS实现雷达扫描效果

    本文实例为大家分享了iOS实现雷达扫描的具体代码,供大家参考,具体内容如下 #import <UIKit/UIKit.h> @interface LTIndicatiorView : UIView @property(nonatomic,strong)UIColor *color; @property(nonatomic,assign)float repeatCount; @property(nonatomic,strong)UIColor *borderColor; @property(no

  • Android动画之雷达扫描效果

    我们首先看一下效果图,有个整体的印象 好了,为了便于理解,这里就按照动画所见内容依次展开来说 准备 这里决定采用canvas(画布)和paint(画笔)实现了这个简单动画控件. 由图片可以看到有两条交叉的十字线.几个圆圈和一些白点,那么首先定义一下所需的画笔,画布及一些数据 setBackgroundColor(Color.TRANSPARENT); //宽度=5,抗锯齿,描边效果的白色画笔 mPaintLine = new Paint(); mPaintLine.setStrokeWidth(

  • Android编程简单实现雷达扫描效果

    本文实例讲述了Android编程简单实现雷达扫描效果.分享给大家供大家参考,具体如下: 在eoe看到有一篇关于雷达扫描的文章,然后看了下,很简单,但是觉得还有很多可以优化的地方,下面贴出来 package com.example.wave; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; im

  • Android仿微信雷达扫描效果的实现方法

    本文主要给大家介绍的是关于Android实现微信雷达扫描效果的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 废话不多说 先上图(用AS录制的 转换工具不是很好 所以看得效果不是很好) 效果图 示例代码 Activity 代码 public class ShapeDrawableActivity extends AppCompatActivity { private ImageView ivLightbeam; private ObjectAnimator radarScanAnim;

  • Android Shader应用开发之雷达扫描效果

    本文实例为大家分享了Android雷达扫描效果的具体代码,供大家参考,具体内容如下 效果图 知识点提要 Shader 矩阵matrix 属性动画 ShaderView3 package com.example.apple.shaderdemo; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.

  • Android仿微信、QQ附近好友雷达扫描效果

    1.概述 最近一直到在带实习生,因为人比较多,所以很长一段时间没有更新博客了,今天更新一篇雷达扫描附近好友效果,以后尽量每周更新一篇,先看一下效果: 2.实现 1.效果分析 效果分为两个部分,一个是上半部分的自定义RadarView,还有就是下半部分的ViewPager,至于怎么做到缩放和背景虚化的效果大家可以去看看LazyViewPager这里不详细介绍,这里主要实现扫描效果部分. 2.扫描效果实现 2.1自定义RadarView在onDraw()方法中画六个圆圈,至于圆圈的半径是多少我们需要

  • Android雷达扫描动态界面制作

    先看看效果图: 源码: package com.zihao.radar; import android.app.Activity; import android.os.Bundle; import android.view.Window; import android.view.WindowManager; import com.zihao.radar.view.RadarView; public class MainActivity extends Activity { private Rad

  • Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果

    去年春节的时候支付宝推行的集福娃活动着实火的不能再火了,更给力的是春晚又可以全民参与咻一咻集福娃活动,集齐五福就可平分亿元大红包,只可惜没有敬业福--那时候在家没事写了个咻一咻插件,只要到了咻一咻的时间点插件就可以自动的点击咻一咻来咻红包,当时只是纯粹练习这部分技术代码没有公开,后续计划写篇关于插件这方面的文章,扯远了(*^__^*) --我们知道在支付宝的咻一咻页面有个雷达扩散的动画效果,当时感觉动画效果非常棒,于是私下尝试着实现了类似的效果,后来在github发现有大神也写有类似效果,于是读

  • Android实现雷达View效果的示例代码

    样式效果 还是先来看效果: 这是一个仿雷达扫描的效果,是之前在做地图sdk接入时就想实现的效果,但之前由于赶着毕业设计,就没有亲手去实现,不过现在自己撸一个发现还是挺简单的. 这里主要分享一下我的做法. 目录 主体轮廓的实现(雷达的结构) 动画的实现(雷达扫描的效果) 目标点的加入(图片/点) 主体轮廓实现 不难分析得出,这个View主要由外部的一个圆,中间的锚点圆以及扇形旋转区域组成.而且每个部分理应由不同的Paint去绘制,以方便去定制各部分的样式. 外部圆以及锚点圆的绘制较为简单,主要的点

随机推荐