自从使用Storyboard后,感觉添加动画变的操作好复杂,以前只要几行代码可以搞定的事情,到了Storyboard时代,变成了拖来拖去的操作,复杂的界面想加个动画有时还觉得无从下手,下面介绍的一个动画操作很简单,利用Constraint的优先级来设置动画,这个是这篇文章的核心。
首先展示下动画效果
好了,我们开始一步步实现这个动画
首先拖动2个View到ViewController上,设置各自的约束,然后拖一个UISwitch放在界面下方,方便控制动画
红色View的约束如下
蓝色View的约束如下:
现在我们需要红色的View可以扩充到全屏,那么接下来我们需要添加一个约束,就是红色View到父View的右侧约束
再设置下约束的优先级为High
接下来我们需要降低蓝色View的右侧约束的优先级,这样才可以让红色View可以扩充到父View
同样设置优先级成High
然后把这个2个约束都拖到代码里面
@IBOutlet weak var redViewToViewConstraint: NSLayoutConstraint!
@IBOutlet weak var blueViewTrailingConstraint: NSLayoutConstraint!
接下来设置动画,我们需要将红色View右侧约束变成0,同时需要降低蓝色View右侧约束的优先级
这里有个示意图,大致画了一下,大家随便看看下吧
func updateConstraintsForMode(isOn : Bool)
{
if (isOn) {
self.redViewToViewConstraint.constant = 0
self.blueViewTrailingConstraint.priority = UILayoutPriorityDefaultHigh - 1
} else {
self.blueViewTrailingConstraint.priority = UILayoutPriorityDefaultHigh + 1
}
}
最后将UISwitch的Action拖进代码,加上启用动画代码,就完成啦
@IBAction func switchAction(sender: UISwitch) {
updateConstraintsForMode(sender.on)
UIView.animateWithDuration(1.0) { () -> Void in
self.view.layoutIfNeeded()
}
}