如何在UIView的draw:inRect:方法中添加闪烁的圆圈？

Question

在我的自定义 UIView 和

draw:inRect

初始化程序中，我有以下代码：

override func draw(_ rect: CGRect) {
    super.draw(rect)

    //...

    let axisPath = UIBezierPath()

    axisPath.move(to: CGPoint(x: paddingHorizontal + 20, y: paddingVertical))
    axisPath.addLine(to: CGPoint(x: leftOffset, y: bottomOffset))
    axisPath.addLine(to: CGPoint(x: rect.width - paddingHorizontal, y: bottomOffset))
    axisPath.lineWidth = 1

    UIColor.black.set()
    axisPath.stroke()

    var currentIndex = 0

    for yearData in data {

      //...

        let circle = UIBezierPath(roundedRect: CGRect(x: x - 4, y: y - 4, width: 8, height: 8), cornerRadius: 4)
        circle.fill()
        circle.stroke() //red circle, I need to make it blinking somehow
        //...
    }

    //...
}

结果如下：

现在我需要让红色圆圈闪烁:)我该怎么做？

Answer 1

我会采取不同的方法。仅对图表的静态部分使用

draw(_:)

。

闪烁的红色圆圈应该是添加在图形视图上的一个简单的小子视图。使用重复的

UIView

动画，利用其

alpha

属性使小圆圈视图淡入淡出。

请参阅如何让淡入淡出动画发挥作用？了解执行闪烁动画的示例。

Answer 2

您可以在 ViewController 中切换变量（circleAlpha），并在视图中使用它来设置填充颜色（见下文）。 我使用重复的 ScheduledTimer 在最小值 (0.2) 和最大值 (1.0) 之间切换 CircleAlpha。

视图控制器

import UIKit

struct Constant {
    static let minAlpha = 0.2
    static let maxAlpha = 1.0
}

class ViewController: UIViewController {

    var circleView = CircleView()
    var blinkTimer: Timer?
    var circleAlpha = Constant.maxAlpha

    override func viewDidLoad() {
        super.viewDidLoad()
        circleView = CircleView(frame: CGRect(x: 100, y: 200, width: 100, height: 100))
        circleView.backgroundColor = .white
        view.addSubview(circleView)
        startBlinking()
    }

    private func startBlinking() {
        if blinkTimer == nil {
            blinkTimer = Timer.scheduledTimer(timeInterval: 0.4,
                                              target: self,
                                              selector: #selector(blink),
                                              userInfo: nil,
                                              repeats: true)
        }
    }
    
    @objc func blink() {
        circleAlpha = (1 + Constant.minAlpha - circleAlpha) // toggle between min and max alpha
        circleView.circleAlpha = circleAlpha
    }
    
    @objc func stopBlinking() {
        blinkTimer?.invalidate()
        blinkTimer = nil
    }
}

圆形视图

import UIKit

class CircleView: UIView {
    
    var circleAlpha = 1.0 { didSet { setNeedsDisplay() } } // redraw when circleAlpha changes

    override func draw(_ rect: CGRect) {
        let circle = UIBezierPath(arcCenter: CGPoint(x: 50, y: 50),
                                  radius: 10,
                                  startAngle: 0,
                                  endAngle: 2 * .pi,
                                  clockwise: true)
        let color = UIColor.red.withAlphaComponent(circleAlpha)
        color.setFill()
        circle.fill()
    }
}

Answer 3

设置一个 NSTimer 并根据它绘制和取消绘制红色圆圈。 您至少有两个选择：将红色圆圈创建为 UIView 并适当设置隐藏标志，或者切换计时器上的标志并使红色圆圈所包围的区域无效。