如何在Swift中设置带有约束的UIView动画？

Question

在我的人造示例中，我有以下单个视图：

如您所见，它由几个简单的约束组成：

1. 将水平和垂直中心对齐，
2. 高度（设置为常数）
3. 前导空格和尾随空格（设置为常量）

我想要实现的是让这个红色/粉红色的视图从顶部“进来”。传统上，在一个没有约束的世界中，我只需修改UIView内部的框架。animateWithDuration，但我不确定在约束世界中如何进行类似操作。

为了重申我的问题，我如何使我的视图从场景开始，并为从顶部飞入的视图设置动画？

我考虑过设置垂直中心约束的动画（并随后调用layoutifneed），但没有达到预期效果。

谢谢你的帮助。

Answer 1

试试这个：

class ViewController: UIViewController {

    // red view
    @IBOutlet weak var myView: UIView!
    //  vertical align contraint
    @IBOutlet weak var verticalConstraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()
        verticalConstraint.constant = (myView.bounds.height + self.view.bounds.height)/2
    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        self.view.layoutIfNeeded()
        UIView.animateWithDuration(0.5) {
            self.verticalConstraint.constant = 0
            self.view.layoutIfNeeded()
        }
    }

}

注意约束中的第一项和第二项顺序。以上代码假定Superview是第一项：

另一种方法是定义两个约束：

• 中心Y对齐约束（Superview.CenterY==View.CenterY）优先级=750

并调整优先级，以确定应采用哪种约束。

class ViewController: UIViewController {

    //  vertical align contraint
    @IBOutlet weak var centerYConstraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()
        centerYConstraint.priority = 250
    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        self.view.layoutIfNeeded()
        UIView.animateWithDuration(0.5) {
            self.centerYConstraint.priority = 750
            self.view.layoutIfNeeded()
        }
    }

}

Answer 2

你想要的其实很简单，我将详细说明如何做到这一点，而不干扰优先级或时髦的常数。这样我们就可以得到一个可以在任何屏幕大小上工作的动画。

TL； DR是你需要配置你的约束，然后在你的动画块中调用layoutIfNeed来动画修改。更多信息请参见这篇SO文章。

所以我们需要两组约束来隐藏和显示视图。在viewdiload中，视图将被隐藏，然后在viewdilead中出现或我们希望该视图滑入的任何位置。

因此，第一件事是配置在IB中不会改变的约束（或代码，随便你喜欢哪个）。即红色视图的高度及其到容器的前导和尾随空间。因此，您的约束可能如下所示（注意：我没有设置宽度约束，但让前导和尾随空格定义宽度）：

现在，您将看到IB将警告您，没有为视图的Y位置配置约束（因此使用红色虚线）

您现在可以将顶部空间添加到容器约束中，并将其设置为占位符约束（复选框表示“在构建时删除”）。我们这样做是因为我们想以编程方式控制视图的位置。

这意味着加载视图后，该约束将不存在，但当您告诉IB您知道如何在加载视图时处理该约束时，该约束将删除所有警告。

现在我们需要一个隐藏视图的方法，一个显示视图的方法。为此，我们将在视图上存储Y定位约束，然后对其设置动画。我们的viewController可以如下所示：

@IBOutlet weak var redView: UIView!
var redViewYPositionConstraint: NSLayoutConstraint?

override func viewDidLoad() {
    super.viewDidLoad()
    self.hideRedViewAnimated(false)
}

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    self.showRedViewAnimated(true)
}

我们隐藏视图的方法可以简单地删除位置约束，然后添加一个红色视图底部等于视图控制器的视图顶部：

func hideRedViewAnimated(animated: Bool) {
    //remove current constraint
    self.removeRedViewYPositionConstraint()
    let hideConstraint = NSLayoutConstraint(item: self.redView,
        attribute: .Bottom,
        relatedBy: .Equal,
        toItem: self.view,
        attribute: .Top,
        multiplier: 1,
        constant: 0)
    self.redViewYPositionConstraint = hideConstraint
    self.view.addConstraint(hideConstraint)
    //animate changes
    self.performConstraintLayout(animated: animated)
}

同样，我们的show约束将把视图的中心Y移动到控制器的中心Y：

func showRedViewAnimated(animated: Bool) {
    //remove current constraint
    self.removeRedViewYPositionConstraint()
    let centerYConstraint = NSLayoutConstraint(item: self.redView,
        attribute: .CenterY,
        relatedBy: .Equal,
        toItem: self.view,
        attribute: .CenterY,
        multiplier: 1,
        constant: 0)
    self.redViewYPositionConstraint = centerYConstraint
    self.view.addConstraint(centerYConstraint)
    //animate changes
    self.performConstraintLayout(animated: animated)
}

为了完整起见，我使用的方便方法如下：

func performConstraintLayout(animated animated: Bool) {
    if animated == true {
          UIView.animateWithDuration(1,
          delay: 0,
          usingSpringWithDamping: 0.5,
          initialSpringVelocity: 0.6,
          options: .BeginFromCurrentState,
          animations: { () -> Void in
             self.view.layoutIfNeeded()
          }, completion: nil)
     } else {
          self.view.layoutIfNeeded()
     }
}

func removeRedViewYPositionConstraint() {
    if redViewYPositionConstraint != nil {
        self.view.removeConstraint(self.redViewYPositionConstraint!)
        self.redViewYPositionConstraint = nil
    }
}

您还可以通过使用一些CGRect数学来检查红色视图是否可见：

func isRedViewVisible() -> Bool {
    return CGRectContainsPoint(self.view.bounds, self.redView.frame.origin)
}

Answer 3

您所能做的是在您的viewdiAppar方法中添加以下代码。您首先为视图的中心Y约束创建一个IBOutlet属性，然后更改其常量值。

self.centerYConstraint.constant = 500.0
self.view.layoutIfNeeded()

UIView.animateWithDuration(Double(0.5), animations: {
        self.centerYConstraint.constant = 0
        self.view.layoutIfNeeded()
    })