利用Constraint给Storyboard添加动画

自从使用Storyboard后,感觉添加动画变的操作好复杂,以前只要几行代码可以搞定的事情,到了Storyboard时代,变成了拖来拖去的操作,复杂的界面想加个动画有时还觉得无从下手,下面介绍的一个动画操作很简单,利用Constraint的优先级来设置动画,这个是这篇文章的核心。

首先展示下动画效果

amimate.gif

好了,我们开始一步步实现这个动画

首先拖动2个View到ViewController上,设置各自的约束,然后拖一个UISwitch放在界面下方,方便控制动画

红色View的约束如下

Paste_Image.png

蓝色View的约束如下:

Paste_Image.png

现在我们需要红色的View可以扩充到全屏,那么接下来我们需要添加一个约束,就是红色View到父View的右侧约束

Paste_Image.png

再设置下约束的优先级为High


Paste_Image.png

接下来我们需要降低蓝色View的右侧约束的优先级,这样才可以让红色View可以扩充到父View

Paste_Image.png

同样设置优先级成High

Paste_Image.png

然后把这个2个约束都拖到代码里面

@IBOutlet weak var redViewToViewConstraint: NSLayoutConstraint!
@IBOutlet weak var blueViewTrailingConstraint: NSLayoutConstraint!

接下来设置动画,我们需要将红色View右侧约束变成0,同时需要降低蓝色View右侧约束的优先级

这里有个示意图,大致画了一下,大家随便看看下吧

Paste_Image.png
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()
    }
 }

Demo代码在这里

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,246评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,428评论 25 708
  • 你说一切都在变好,而对于我,却是越来越糟。宿醉一晚,最后还是那么的难过悲伤,我想你,却再无法告诉你。我爱你,也仅能...
    芷水流殇阅读 136评论 0 1
  • 只是很心疼 最后寒冬无人于你雪中送碳 最后暖春无人与你锦上添花 只是很心疼 对你那么好的他们最后釜底抽薪 对他们那...
    NA小酒馆阅读 230评论 0 0
  • 桃红柳绿的春山,熙暖的阳光照耀,和柔的东风吹拂。粉白的杏花娇媚艳丽,惹人流连。柳花飞扑,随人流走。鲜红的桃花绽放着...
    独立行走的鱼阅读 1,333评论 3 27