(Swift 3) - 如何在自定义 UIView 中包含动画

Question

我有一个名为View 的UIView 子类，我希望在其中有一个“波纹”从用户双击的位置向外移动（以及执行其他绘图功能）。这是我的draw方法的相关部分，目前：

override func draw(_ rect: CGRect) {
    for r in ripples {
        r.paint()
    }
}

这就是r.paint() 的实现方式，在Ripple 类中：

func paint() {
    let c = UIColor(white: CGFloat(1.0 - (Float(iter))/100), alpha: CGFloat(1))
    print(iter, " - ",Float(iter)/100)
    c.setFill()
    view.fillCircle(center: CGPoint(x:x,y:y), radius: CGFloat(iter))
}

iter 应该每 0.1 秒递增一个 Timer，它在 Ripple 的构造函数中启动：

Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true, block: move)

move实现如下：

func move(_ timer: Timer) {
    while (tier<100) {
        iter += 1
        DispatchQueue.main.async {
            self.view.setNeedsDisplay()
        }
    }
    timer.invalidate()
}

应该发生的是，当计时器触发时，每 0.1 秒，它会增加 iter 并告诉 View 重新绘制，然后它将使用 Ripple.paint() 方法来完成，该方法使用 iter确定圆的颜色和半径。

但是，正如使用 print 语句所揭示的那样，所发生的情况是 Timer 在重绘实际发生之前全部触发了 100 次。我尝试通过用DispatchQueue.main.sync 替换DispatchQueue.main.async 来解决这个问题，但这只是让应用程序挂起。我究竟做错了什么？如果这不是解决问题的正确方法，我如何才能在应用程序仍然执行其他功能（例如产生更多涟漪）的同时获得平滑的涟漪动画（其中涉及一个在改变颜色的同时增长的圆圈）？ （这意味着多个涟漪需要能够同时工作。）

Answer 1

您可以使用CABasicAnimation 和自定义CALayer 实现您想要的，就像这样：

class MyLayer : CALayer
{
    var iter = 0

    override class func needsDisplay(forKey key: String) -> Bool
    {
        let result = super.needsDisplay(forKey: key)
        return result || key == "iter"
    }

    override func draw(in ctx: CGContext) {
        UIGraphicsPushContext(ctx)
        UIColor.red.setFill()
        ctx.fill(self.bounds)
        UIGraphicsPopContext()
        NSLog("Drawing, \(iter)")
    }
}

class MyView : UIView
{
    override class var layerClass: Swift.AnyClass {
        get {
            return MyLayer.self
        }
    }
}

class ViewController: UIViewController {

    let myview = MyView()

    override func viewDidLoad() {
        super.viewDidLoad()

        myview.frame = self.view.bounds
        self.view.addSubview(myview)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        let animation = CABasicAnimation(keyPath: "iter")
        animation.fromValue = 0
        animation.toValue = 100
        animation.duration = 10.0
        myview.layer.add(animation, forKey: "MyIterAnimation")
        (myview.layer as! MyLayer).iter = 100
    }
}

Answer 2

自定义 UIView，例如带有动画的 AlertView，适用于 Swift 3 和 Swift 4

你可以使用扩展：

extension UIVIew{
  func customAlertView(frame: CGRect, message: String, color: UIColor, startY: CGFloat, endY: CGFloat) -> UIVIew{

     //Adding label to view
     let label = UILabel()
     label.frame = CGRect(x: 0, y: 0, width: frame.width, height:70)
     label.textAlignment = .center
     label.textColor = .white
     label.numberOfLines = 0
     label.text = message
     self.addSubview(label)
     self.backgroundColor = color

     //Adding Animation to view
     UIView.animate(withDuration:0.5, delay: 0, options: 
     [.curveEaseOut], animations:{
        self.frame = CGRect(x: 0, y: startY, width: frame.width, height: 64)
        }) { _ in
           UIView.animate(withDuration: 0.5, delay: 4, options: [.curveEaseOut], animations: {
                 self.frame = CGRect(x: 0, y: endY, width: frame.width, height:64)
           }, completion: {_ in
               self.removeFromSuperview()
           })
        }
     return self
  }

你可以在你的班级使用它。这个例子 startY 是当你有一个导航控制器时：

class MyClassViewController: UIViewController{

      override func viewDidLoad(){
         super.viewDidLoad()
         self.view.addSubView(UIView().addCustomAlert(frame: self.view.frame, message: "No internet connection", color: .red, startY:64, endY:-64))
      }
}