有没有办法以编程方式使用自动布局扩展来动画自动布局约束？

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()
    })

}

这还允许您通过颠倒顺序和激活状态来使按钮动画回到其原始位置：

    // 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
  })