Swift：UIView.animate意外地工作

我試圖做一個「記錄按鈕」這是一個UIView與我的應用程序的手勢識別器。目前我正在實現的功能是，當我點擊視圖時，我想縮小內圈（紅圈），但最終會出現意想不到的變形。我用UIView.animate功能來做到這一點，下面是我的代碼相關：Swift：UIView.animate意外地工作

import UIKit 

@IBDesignable 
class RecordView: UIView { 

    @IBInspectable 
    var borderColor: UIColor = UIColor.clear { 
     didSet { 
      self.layer.borderColor = borderColor.cgColor 
     } 
    } 

    @IBInspectable 
    var borderWidth: CGFloat = 20 { 
     didSet { 
      layer.borderWidth = borderWidth 
     } 
    } 

    @IBInspectable 
    var cornerRadius: CGFloat = 100 { 
     didSet { 
      layer.cornerRadius = cornerRadius 
     } 
    } 

    private var fillView = UIView() 

    private func setupFillView() { 
     let radius = (self.cornerRadius - self.borderWidth) * 0.95 
     fillView.frame = CGRect(origin: CGPoint.zero, size: CGSize(width: radius * 2, height: radius * 2)) 
     fillView.center = CGPoint(x: self.bounds.midX, y: self.bounds.midY) 
     fillView.layer.cornerRadius = radius 
     fillView.backgroundColor = UIColor.red 
     self.addSubview(fillView) 
    } 

    override func layoutSubviews() { 
     super.layoutSubviews() 
     setupFillView() 
    } 

    func didClick() { 
     UIView.animate(withDuration: 1.0, animations: { 
      self.fillView.transform = CGAffineTransform(scaleX: 0.6, y: 0.6) 
     }) { (true) in 
      print() 
     } 
    } 

}

在我的ViewController，我有：

@IBAction func recoreViewTapped(_ sender: UITapGestureRecognizer) { 
     recordView.didClick() 
    }

然而，這種效果達到： https://media.giphy.com/media/3ohjUQrWt7vfIxzBrG/giphy.gif。我是初學者，真的不知道我的代碼有什麼問題？

來源

2017-12-03 Yongliang He

你未定義的行爲..您正在將視圖應用到視圖..但在佈局子視圖中，您正通過setupFillView函數修改其框架。您無法這樣做。轉換已經修改了視圖的框架。因此，當使用原始的BasicAnimation時，我們總是修改圖層而不是框架的邊界和位置。接下來，您將在佈局子視圖中添加視圖..這將導致遞歸，因爲視圖將再次佈局.. – Brandon

@Brandon感謝您的回覆。我仍然感到困惑。我對這個主題沒有多少資源，只是從幾個教程彙編代碼。你能告訴我如何糾正它嗎？ –

問題是，您正在應用一個轉換，它將再次觸發layoutSubviews，因此frame的fillView正在應用於轉換後的視圖。

至少有兩個選項：

你可以只改變整個RecordButton觀點：

@IBDesignable 
class RecordView: UIView { 

    @IBInspectable 
    var borderColor: UIColor = .clear { didSet { layer.borderColor = borderColor.cgColor } } 

    @IBInspectable 
    var borderWidth: CGFloat = 20 { didSet { layer.borderWidth = borderWidth; setNeedsLayout() } } 

    private var fillView = UIView() 

    override init(frame: CGRect) { 
     super.init(frame: frame) 

     configure() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 

     configure() 
    } 

    private func configure() { 
     fillView.backgroundColor = .red 
     self.addSubview(fillView) 
    } 

    override func layoutSubviews() { 
     super.layoutSubviews() 

     let radius = min(bounds.width, bounds.height)/2 - borderWidth 
     fillView.frame = CGRect(origin: CGPoint(x: bounds.midX - radius, y: bounds.midY - radius), 
           size: CGSize(width: radius * 2, height: radius * 2)) 
     fillView.layer.cornerRadius = radius 
    } 

    func didClick() { 
     UIView.animate(withDuration: 1.0, animations: { 
      self.transform = CGAffineTransform(scaleX: 0.6, y: 0.6) 
     }, completion: { _ in 
      print("completion", #function) 
     }) 
    } 

}

或者你可以把fillView一個容器內，並隨後變換fillView將不會觸發RecordView的layoutSubviews：

@IBDesignable 
class RecordView: UIView { 

    @IBInspectable 
    var borderColor: UIColor = .clear { didSet { layer.borderColor = borderColor.cgColor } } 

    @IBInspectable 
    var borderWidth: CGFloat = 20 { didSet { layer.borderWidth = borderWidth; setNeedsLayout() } } 

    private var fillView = UIView() 
    private var containerView = UIView() 

    override init(frame: CGRect) { 
     super.init(frame: frame) 

     configure() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 

     configure() 
    } 

    private func configure() { 
     fillView.backgroundColor = .red 
     self.addSubview(containerView) 
     containerView.addSubview(fillView) 
    } 

    override func layoutSubviews() { 
     super.layoutSubviews() 

     containerView.frame = bounds 

     let radius = min(bounds.width, bounds.height)/2 - borderWidth 
     fillView.frame = CGRect(origin: CGPoint(x: bounds.midX - radius, y: bounds.midY - radius), 
           size: CGSize(width: radius * 2, height: radius * 2)) 
     fillView.layer.cornerRadius = radius 
    } 

    func didClick() { 
     UIView.animate(withDuration: 1.0, animations: { 
      self.fillView.transform = CGAffineTransform(scaleX: 0.6, y: 0.6) 
     }, completion: { _ in 
      print("completion", #function) 
     }) 
    } 

}

順便說一句，一些其他的小東西：

就像我和你其他地方討論，初始配置（例如應該從init調用子視圖的添加。但是任何frame/bounds應該從layoutSubviews調用或有的東西。
完全不相關，但傳遞給completion的參數UIView.animate(withDuration:animations:completion:)是布爾值，指示動畫是否爲finished。如果您不打算使用該布爾值，則應該使用_，而不是(true)。

長期來看，我建議將「觸摸」/手勢相關的東西移到RecordButton中。我很容易想象你會變得更加奇特：例如（「縮小」按鈕以呈現「壓低」的氛圍），另一個用於「擡起」（例如，取消按下按鈕並將圓形「記錄」按鈕轉換爲方塊「停止」按鈕）。然後，您可以通過該按鈕通知視圖控制器何時發生重大事件（例如記錄或停止識別），但會降低視圖控制器本身的複雜性。

protocol RecordViewDelegate: class { 
    func didTapRecord() 
    func didTapStop() 
} 

@IBDesignable 
class RecordView: UIView { 

    @IBInspectable 
    var borderColor: UIColor = .clear { didSet { layer.borderColor = borderColor.cgColor } } 

    @IBInspectable 
    var borderWidth: CGFloat = 20 { didSet { layer.borderWidth = borderWidth; setNeedsLayout() } } 

    weak var delegate: RecordViewDelegate? 

    var isRecordButton = true 

    private var fillView = UIView() 
    private var containerView = UIView() 

    override init(frame: CGRect) { 
     super.init(frame: frame) 

     configure() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 

     configure() 
    } 

    private func configure() { 
     fillView.backgroundColor = .red 
     self.addSubview(containerView) 
     containerView.addSubview(fillView) 
    } 

    private var radius: CGFloat { return min(bounds.width, bounds.height)/2 - borderWidth } 

    override func layoutSubviews() { 
     super.layoutSubviews() 

     containerView.frame = bounds 

     fillView.frame = CGRect(origin: CGPoint(x: bounds.midX - radius, y: bounds.midY - radius), 
           size: CGSize(width: radius * 2, height: radius * 2)) 
     fillView.layer.cornerRadius = isRecordButton ? radius : 0 
    } 

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { 
     UIView.animate(withDuration: 0.25) { 
      self.fillView.transform = CGAffineTransform(scaleX: 0.8, y: 0.8) 
      self.fillView.backgroundColor = UIColor(red: 0.75, green: 0, blue: 0, alpha: 1) 
     } 
    } 

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { 
     if let touch = touches.first, containerView.bounds.contains(touch.location(in: containerView)) { 
      if isRecordButton { 
       delegate?.didTapRecord() 
      } else { 
       delegate?.didTapStop() 
      } 
      isRecordButton = !isRecordButton 
     } 

     UIView.animate(withDuration: 0.25) { 
      self.fillView.transform = .identity 
      self.fillView.backgroundColor = UIColor.red 
      self.fillView.layer.cornerRadius = self.isRecordButton ? self.radius : 0 
     } 

    } 
}

國債收益率：

來源

2017-12-03 18:53:15 Rob

當我實現它，甚至直接複製代碼，我看不到layer.cornerRadius得到動畫。然後在[另一個線程]（https://stackoverflow.com/questions/5948167/uiview-animatewithduration-doesnt-animate-cornerradius-variation），有人說核心動畫應該用來爲動畫cornerRadius。你怎麼能意識到這與UIKit？或者在我的代碼中錯過了其他東西？ –

它在iOS 11中具有動畫效果，但在早期版本中，您必須使用CoreAnimation或其他技術。 – Rob

Swift：UIView.animate意外地工作

回答

相關問題