雷达扫描动画

#import "ViewController.h"
#import "RadarView.h"

@interface ViewController ()
@property (nonatomic, strong) RadarView *radarView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor blackColor];
    self.radarView = [[RadarView alloc]initWithFrame:CGRectMake(0, 0, 370, 370)];
    self.radarView.center = self.view.center;
    [self.view addSubview:self.radarView];
    [self.radarView radarScan];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
RadarView.h  文件
//
//  RadarView.h
//  ScanAnimation
//

#import <UIKit/UIKit.h>
#import "RadarIndicationView.h"
@interface RadarView : UIView

@property (nonatomic, strong)RadarIndicationView *radarIndicationView;

-(void) radarScan;

@end
RadarView.m  文件
//
//  RadarView.m
//  ScanAnimation
//

#import "RadarView.h"

@implementation RadarView

-(instancetype)initWithFrame:(CGRect)frame{
    if ([super initWithFrame:frame]) {
        [self addSubview:self.radarIndicationView];
    }
    return self;
}

-(void) drawRect:(CGRect)rect{

    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self drawCircle:context];

}

- (RadarIndicationView *)radarIndicationView{

    if (!_radarIndicationView) {
        _radarIndicationView = [[RadarIndicationView alloc]initWithFrame:CGRectMake(0, 0, 340, CGRectGetHeight(self.frame))];
        _radarIndicationView.center = self.center;
    }

    return _radarIndicationView;

}

- (void)drawCircle:(CGContextRef )context
{
    //将坐标轴移动到视图中心
    CGContextTranslateCTM(context, CGRectGetWidth(self.frame)/2.0, CGRectGetHeight(self.frame)/2.0);

    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    CGContextSetLineWidth(context, 2);

    //画圆弧
    for (int i = 0; i <4; i++) {
        CGContextMoveToPoint(context, 50+i*40, 0);
        CGContextAddArc(context, 0, 0, 50+i*40, 0,  M_PI*2, 0);
    }
    CGContextStrokePath(context);

    //画十字坐标
    CGContextMoveToPoint(context, -170, 0);
    CGContextAddLineToPoint(context, 170, 0);

    CGContextMoveToPoint(context, 0, -170);
    CGContextAddLineToPoint(context, 0, 170);

    CGContextStrokePath(context);

}

//开始扫描
-(void) radarScan{

    [self.radarIndicationView start];

}
RadarIndicationView.h  文件
//
//  RadarIndicationView.h
//  ScanAnimation
//

#import <UIKit/UIKit.h>

@interface RadarIndicationView : UIView

-(void) start;
-(void) stop;

@end
RadarIndicationView.m 文件
//
//  RadarIndicationView.m
//  ScanAnimation
//

#import "RadarIndicationView.h"

@implementation RadarIndicationView

-(instancetype)initWithFrame:(CGRect)frame{
    if ([super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
    }
    return self;

}

-(void) drawRect:(CGRect)rect{
    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self drawArc:context];
}

//画大扇形
-(void) drawArc:(CGContextRef) context{

    //将坐标轴移到视图中心
    CGContextTranslateCTM(context, CGRectGetWidth(self.frame)/2.0, CGRectGetHeight(self.frame)/2.0);
    //设置扇形半径

    CGFloat radius = CGRectGetWidth(self.frame)/2.0;
    CGContextSetLineWidth(context, 0.1);
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);

    CGFloat single = M_PI/180/2.0;//画图时每次旋转的度数
    CGFloat colorAlpha = M_PI_2/90/2.0;
    CGFloat x = 0.0;
    for (int i = 0; i < 90*2; i++) {
        //画小扇形
        CGContextMoveToPoint(context, 0, 0);
        CGContextAddArc(context, 0, 0, radius, 0, -single, 1);

        //设置填充颜色以及透明度
        x = x + colorAlpha;
        CGFloat alpha = sin(1-x);
        UIColor *color = [UIColor colorWithRed:41/255 green:253/255 blue:47/255 alpha:alpha];

        [color setFill];

        CGContextFillPath(context);
        CGContextDrawPath(context, kCGPathFillStroke);//绘制路径

        //逆时针旋转坐标
        CGContextRotateCTM(context, -single);

    }

}

- (void) start{
    [self setNeedsDisplay];

    CABasicAnimation *rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = @(2*M_PI);
    rotationAnimation.duration = 360/60;
    rotationAnimation.repeatCount = NSIntegerMax;
    [self.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];

}

-(void)stop{
    [self.layer removeAnimationForKey:@"rotationAnimation"];
}
-(void)rectangularCoordinates{

    //画x
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 1);
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, 150, 0);
    CGContextStrokePath(context);

    CGContextMoveToPoint(context, 150, 0);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextAddLineToPoint(context, 140, 5);
    CGContextMoveToPoint(context, 150, 0);
    CGContextAddLineToPoint(context, 140, -5);
    CGContextStrokePath(context);

    //画y
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, 0, 150);
    CGContextAddLineToPoint(context, 5, 140);
    CGContextMoveToPoint(context, -5, 150);
    CGContextAddLineToPoint(context, -5, 140);
    CGContextStrokePath(context);

}
时间: 2024-10-29 10:46:23

雷达扫描动画的相关文章

Android例子源码模仿安卓微信、云播雷达扫描动画效果

本项目是一个模仿Android微信.云播雷达扫描动画效果的小例子,点击中间的黑色圆圈开始扫描动画,再次点击复位,需要这种效果的朋友可以自己下载看一下,因为是动画效果所以截的静态图有点变形,项目编译版本4.4.2默认编码GBK 源码包下载地址以及运行截图. [点击这里]

Android自定义View——仿vivo i管家病毒扫描动画效果

技术是永无止境的,如果真的爱技术,那就勇敢的坚持下去.我很喜欢这句话,当我在遇到问题的时候.当我觉得代码枯燥的时候,我就会问自己,到底是不是真的热爱技术,这个时候,我心里总是起着波澜,我的答案是肯定的,我深深的爱着这门技术. 今天我们继续聊聊Android的自定义View系列.先看看效果吧: 这个是我手机杀毒软件的一个动画效果,类似于雷达搜索,所以用途还是很广泛的,特别是先了解一下这里的具体逻辑和写法,对技术的进步一定很有用. 先简单的分析一下这里的元素,主要有四个圆.一个扇形.还有八条虚线.当

雷达扫描

转载请注明出入:http://blog.csdn.net/forwardyzk/article/details/42640031 模拟扫描文件的效果,模拟雷达扫描. 思路: 1.使用旋转动画和渐变动画的结合. 2.使用线程和Handler进行消息的传递,刷新界面 不要在主线程上做耗时操作,不要在主线程上刷新界面. activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo

使用c++的OpenGL制作动态三维的雷达扫描效果

感谢参考原文-http://bjbsair.com/2020-04-01/tech-info/18506.html vc++ OpenGL制作动态三维的雷达扫描效果,一个在VC++下应用OpenGL技术绘制三维动画的好范例,虽然这个例子挺简单,但可以为你以后使用VC++6.0编写大型的3D图像处理软件 .3D游戏开发打下基础吧. 项目源代码: 部分代码: 程序执截图: 原文地址:https://blog.51cto.com/14744108/2484193

【canvas系列】canvas实现&quot;雷达扫描&quot;效果

今天来讲解"雷达扫描"效果demo,来源于QQ群里边有群友说想要个雷达效果,就尝试写了一下. 效果图: demo链接: https://win7killer.github.io/can_demo/demo/radar.html ******************************************************************** 这个东西,背景圆,坐标.圆圈都很简单实现,arc结合moveTo.lineTo就可以解决,背景色也不是问题,一句带过. 那么

html 类似雷达扫描效果 及 闪屏效果

//雷达扫描效果 1 <em id="Radar" class="RadarFast"></em> 2 3 css: 4 .RadarFast{ 5 position: absolute; 6 z-index: 10; 7 bottom: 140px; 8 left: 50%; 9 margin-left: -3px; 10 } 11 .RadarFast:after{ 12 content: ''; 13 position: absolut

cesium 雷达扫描(附源码下载)

前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内容概览 1.基于cesium 实现雷达扫描2.源代码 demo 下载 本篇实现 cesium 雷达扫描功能,效果图如下: 实现思路:核心引用 cesium PostProcessStage类 核心代码 /* 添加雷达扫描线 地形遮挡开启 lon:-74.01296152309055 lat:40.7

雷达扫描控件----------WinForm控件开发系列

/// <summary> /// 雷达扫描控件 /// </summary> [ToolboxItem(true)] [DefaultProperty("Items")] [Description("雷达扫描控件")] public partial class RadarExt : Control { #region private Color areaColor = Color.LawnGreen; /// <summary>

TWaver动画之雷达扫描效果

UI和功能是好的产品的两个重要因素,很多产品往往只注重功能上的设计,而忽略了UI.在这个“看脸”的时代,就算产品的功能很强大,如果UI跟不上步伐,你的产品都会在客户心中大打折扣.做安全和监控的项目中经常会进行扫描,一般会用一个gif图片来表示软件正在进行扫描,但是如果想更换这个图标的样式,就需要美工重新做图.TWaver提供了动画效果,如果对图标的动画样式不满意,可以通过简单的更改程序来实现,避免了美工的二次返工,提高了效率.切入正题,看我们怎么实现一个动画的雷达扫描图,首先注册一个图片,用HT