swift版雷达扫描

跟大家分享一个雷达扫描得小东西,

制作这个效果分为以下几步:

1:首先画出范围


详见主要代码:

let context = UIGraphicsGetCurrentContext()

context?.move(to: CGPoint.init(x: 0, y: self.bounds.size.height*0.5))

context?.setStrokeColor(red: 8.0/255.0, green: 242.0/255.0, blue: 46.0/255.0, alpha: 1)

context?.setLineWidth(1)

context?.addLine(to: CGPoint.init(x: self.bounds.size.width, y: self.bounds.size.height*0.5))

context?.move(to: CGPoint.init(x: self.bounds.size.width*0.5, y: (self.bounds.size.height - self.bounds.size.width)*0.5))

context?.addLine(to:  CGPoint.init(x: self.bounds.size.width*0.5, y:self.bounds.size.height - (self.bounds.size.height - self.bounds.size.width)*0.5))

context?.closePath()

context?.drawPath(using: .stroke)

var sectionRadius = radius / CGFloat(sectionsNum)//这个是几个圈

for i in 0..<sectionsNum{

context?.setLineWidth(1)

context?.addArc(center: CGPoint.init(x: self.center.x, y: self.center.y), radius: CGFloat(sectionRadius - CGFloat(5*(sectionsNum - i - 1))), startAngle: 0, endAngle: CGFloat(2*M_PI), clockwise:false)

context?.drawPath(using: .stroke)

sectionRadius += radius / CGFloat(sectionsNum)

}


2:对于点的处理(主要是点在视图位置的处理,对于点这个类加一些动画操作,这里就不过多的说了),具体见主要代码详情

_ =  self.pointsView?.subviews.map({ $0.removeFromSuperview() })

let pointsNum = self.dataSource?.numberOfPointsInRadarView(radarView: self)

for index in 0..<Int(pointsNum!) {

let point:CGPoint = (self.dataSource?.radarView(radarView: self, positionForIndex: index))!

let posDirection = point.x

let posDistance = point.y

let pointView = WJFRadrarPointView.init(frame: CGRect.zero)

let customView = self.dataSource?.radarView(radarView: self, viewForIndex: index)

pointView.addSubview(customView!)

pointView.tag = index

pointView.frame = (customView?.frame)!

pointView.center = CGPoint.init(x: self.center.x+posDistance*sin(posDirection * CGFloat( M_PI / 180)), y: self.center.y + posDistance * cos(posDirection * CGFloat(M_PI / 180)))

pointView.delegate = self

pointView.alpha = 1.0

let fromTransform = pointsView?.transform.scaledBy(x: 0.1, y: 0.2)

pointView.transform = fromTransform!

let toTransform = pointView.transform.concatenating((pointView.transform.inverted()))

let delayInSeconds = 0.1 * Double(index)

//            DispatchQueue.aft

self.pointsView?.addSubview(pointView)

pointView.transform = toTransform

}


3:就是前面GIF展示的,对于扫描区的处理

3.1创建扫描区,主要就是 创建一个三角弧区域

override func draw(_ rect: CGRect) {

super.draw(rect)

//画布

let context = UIGraphicsGetCurrentContext()

let startColor = self.startColor

context?.setFillColor((startColor?.cgColor)!)//填充颜色

context?.setLineWidth(0)

context?.move(to: CGPoint.init(x: self.center.x, y: self.center.y))

context?.addArc(center: CGPoint.init(x: self.center.x, y: self.center.y) , radius: self.radius!, startAngle: ((self.clockwise! ? self.anglee! : 0) * CGFloat(M_PI / 180)), endAngle: (self.clockwise! ? (self.anglee! - 1) : 1) * CGFloat(M_PI / 180), clockwise: self.clockwise!)

context?.closePath()

context?.drawPath(using: .fillStroke)

let startColorComponents = (self.startColor?.cgColor)?.components

let endColorComponents = (self.endColor?.cgColor)?.components

var R:CGFloat = 0.0

var G:CGFloat = 0.0

var B:CGFloat = 0.0

var A:CGFloat = 0.0

for index in 0...Int(self.anglee!) {

let ratio = (self.clockwise! ? (self.anglee! - CGFloat(index)) : CGFloat(index)) / self.anglee!

R = (startColorComponents?[0])! - ((startColorComponents?[0])! - (endColorComponents?[0])!) * ratio

G = (startColorComponents?[1])! - ((startColorComponents?[1])! - (endColorComponents?[1])!) * ratio

B = (startColorComponents?[2])! - ((startColorComponents?[2])! - (endColorComponents?[2])!) * ratio

A = (startColorComponents?[3])! - ((startColorComponents?[3])! - (endColorComponents?[3])!) * ratio

let startColor = UIColor.init(red: R, green: G, blue: B, alpha: A)

context?.setFillColor(startColor.cgColor)

context?.setLineWidth(0)

context?.move(to: CGPoint.init(x: self.center.x, y: self.center.y))

context?.addArc(center: CGPoint.init(x: self.center.x, y: self.center.y) , radius: self.radius!, startAngle: CGFloat(Double(index) * M_PI / 180), endAngle: CGFloat((Double(index) + (self.clockwise! ? -1 : 1)) * M_PI / 180), clockwise: self.clockwise!)

context?.closePath()

context?.drawPath(using: .fillStroke)

}}

3.2 让这个区域动起来,比较简单的一个核心动画

let rotationAnimation = CABasicAnimation.init(keyPath: "transform.rotation.z")

var indicatorClockwise = true

if self.indicatorClockwise != nil {

indicatorClockwise = self.indicatorClockwise!

}

rotationAnimation.toValue = (indicatorClockwise ? 1 : -1) * M_PI * 2.0

rotationAnimation.duration = 360.0 / 60

rotationAnimation.isCumulative = true

rotationAnimation.repeatCount = Float(INT_MAX)

self.indicatorView?.layer.add(rotationAnimation, forKey: "rotationAnimation")

至此,swift版的雷达简单版就出来了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • #define kBlackColor [UIColor blackColor] //.h //划线 + (voi...
    CHADHEA阅读 817评论 0 1
  • Quartz2D以及drawRect的重绘机制字数1487 阅读21 评论1 喜欢1一、什么是Quartz2D Q...
    PurpleWind阅读 810评论 0 3
  • SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile丽语阅读 3,865评论 0 6
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,147评论 5 13
  • VLC的集成和使用 VLC介绍 VLC Media Player (VideoLAN) 为 Windows、Lin...
    Pocket阅读 19,937评论 75 66