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

您可以尝试

Exception

您也可以这样做（不建议将自动布局与框架混合使用）

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

有没有一种方法可以使用自动布局扩展程序以动画方式设置自动布局约束？

2 个答案: