有沒有辦法以編程方式使用自動布局擴展為自動布局約束設置動畫？

Question

• 我正在完全以編程方式創建這個應用程序

我想將 addButton 從右下角動畫到 headerLabel 的 centerYAnchor，最好使用這個自動布局擴展（下面的擴展）。

view.addSubview(headerLabel)
    headerLabel.setAnchors(top: view.topAnchor, paddingTop: 50, bottom: nil, paddingBottom: 0, left: view.leftAnchor, paddingLeft: 40, right: view.rightAnchor, paddingRight: 40, centerX: nil, centerY: nil, width: 0, height: 0)

view.addSubview(addButton)
    addButton.setAnchors(top: nil, paddingTop: 0, bottom: view.bottomAnchor, paddingBottom: 16, left: nil, paddingLeft: 0, right: view.rightAnchor, paddingRight: 16, centerX: nil, centerY: nil, width: 60.0, height: 60.0)

當用戶單擊按鈕時，我希望按鈕的 centerYAnchor 向上動畫並匹配 headerLabel 的 centerYAnchor。

@objc func addListButtonClicked(sender : UIButton){
    UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 1, options: .curveEaseIn, animations: {


    })
}

任何人都可以幫我解決這個問題或給我一些關於從哪里開始的方向嗎？謝謝！

Answer 1

一種方法：

為您的addButton使用“開始”和“結束”約束變量，然后根據您想要按鈕的位置激活/停用它們。

var startConstraint: NSLayoutConstraint!
var endConstraint: NSLayoutConstraint!

override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(addButton)

    // set ONLY right anchor, width and height
    addButton.setAnchors(top: nil, paddingTop: 0, bottom: nil, paddingBottom: 0, left: nil, paddingLeft: 0, right: view.rightAnchor, paddingRight: 16, centerX: nil, centerY: nil, width: 60.0, height: 60.0)

    // define "starting location" constraint
    // bottom of addButton 16-pts from bottom of view
    startConstraint = addButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -16.0)

    // define "ending location" constraint
    // centerY of addButton at centerY of headerLabel
    endConstraint = addButton.centerYAnchor.constraint(equalTo: headerLabel.centerYAnchor)

    // activate the starting constraint
    startConstraint.isActive = true

}

然后，當您想要將按鈕動畫到 headerView 時：

@objc func addListButtonClicked(sender : UIButton) {

    // deactivate the start constraint      
    startConstraint.isActive = false

    // activate the end constraint 
    endConstraint.isActive = true

    UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 1, options: .curveEaseIn, animations: {
        self.view.layoutIfNeeded()
    })

}

這還允許您通過顛倒順序和激活狀態將按鈕設置回其原始 position：

    // moves button from bottom up to header view
    startConstraint.isActive = false
    endConstraint.isActive = true

    // moves button from header view down to bottom
    endConstraint.isActive = false
    startConstraint.isActive = true

Answer 2

你可以試試

// remove old bottom constraint 
self.view.constraints.forEach {
   if $0.firstItem == self.addButton && $0.firstAttribute == .bottom  {
       self.view.removeConstraint($0)
   }
} 

// add a new centerY
self.addButton.centerYAnchor.constraint(equalTo:self.headerLabel.centerYAnchor).isActive = true 

  UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 1, options: .curveEaseIn, animations: { 
      self.view.layoutIfNeeded()
  })

---

您也可以這樣做（不建議將自動布局與框架混合使用）

  UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 1, options: .curveEaseIn, animations: { 
      self.addButton.center = self.headerLabel.center
  })