资讯专栏INFORMATION COLUMN

iOS动画编程-AutoLayout动画[ 1 ]Animating Constraints

sihai / 331人阅读

摘要:简介自动布局功能随着的发布横空出世,现在已经成为了机型适配最佳的解决方案之一。由于自动布局的特点,对于使用自动布局功能的视图,我们不能再像之前一样去操作它的等属性,我们通过对布局约束的操作来代替之前的方法来实现动画。

简介

AutoLayout自动布局功能随着iOS6的发布横空出世,现在已经成为了iOS机型适配最佳的解决方案之一。由于自动布局的特点,对于使用自动布局功能的视图,我们不能再像之前一样去操作它的frame、center等属性,我们通过对布局约束的操作来代替之前的方法来实现动画。
自然的,你可能会问:我们如何去操作一个约束呢?
其实操作约束和操作属性的区别并不大

Animating Interface Builder constraints


这是我们Demo的模版,上方的View高度是固定的
首先我们通过连线操作将高度的约束拿到,创建一个outlet

@IBOutlet weak var menuHeightConstraint: NSLayoutConstraint!

接下来修改菜单按钮的响应方法

  @IBAction func actionToggleMenu(sender: AnyObject) {
    //修改开关状态
    isMenuOpen = !isMenuOpen
    //调整高度约束的值
    menuHeightConstraint.constant = isMenuOpen ? 200.0 : 60.0
    //修改Title
    titleLabel.text = isMenuOpen ? "Select Item" : "Packing List"
  }

这样我们就已经实现了界面的调整,怎么让它动起来呢
这里我们又要用到我们的老朋友animateWithDuration(_:animations:)和其它几个相近API了

Animating layout changes

让我们的变化动起来!

UIView.animateWithDuration(1.0, delay: 0.0, usingSpringWithDamping: 0.4, initialSpringVelocity: 10.0, options: .CurveEaseIn, animations: {
self.view.layoutIfNeeded()
}, completion: nil)

将上面这段代码加在后面,就可以实现动画效果了
在修改了约束后,iOS并没有机会去重新布局界面,通过在动画闭包中调用layoutIfNeeded方法,实现了对这个界面的布局

Rotating view animations

这次我们添加一个简单的旋转动画放在动画闭包中

let angle = self.isMenuOpen ? CGFloat(M_PI_4) : 0.0
self.buttonMenu.transform = CGAffineTransformMakeRotation(angle)
最终效果

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/15950.html

相关文章

  • iOS动画编程-AutoLayout动画[ 2 ]Inspecting and animating

    摘要:介绍通过可视化方法,使用来控制约束,实现动画确实非常方便也非常容易,但是有时你不可能把上所有元素都做,这会有巨大的工程量。也许你希望通过代码来增减调整约束由于这些原因,你将需要在运行时检查已存在的约束,并且用代码让它们动起来。 介绍 通过可视化方法,使用outlets来控制约束,实现动画确实非常方便也非常容易,但是有时你不可能把UI上所有元素都做outlet,这会有巨大的工程量。也许你...

    ad6623 评论0 收藏0
  • iOS动画编程-AutoLayout动画[ 3 ] Animating by replacing c

    介绍 之前的几节中,我们都是通过修改一个约束的值来实现动画的。但是如果你想做的更多,你可能需要删除旧的约束并添加新的约束 删除约束 在IB中,我们可以为每一个约束注册一个identifiershowImg(https://segmentfault.com/img/bVqExV);showImg(https://segmentfault.com/img/bVqExY);showImg(https:/...

    miya 评论0 收藏0
  • iOS动画编程-AutoLayout动画[ 5 ] Animating dynamically cr

    摘要:前段时间考试,没有来得及写文,最近会抽时间把部分写完介绍这一节中,我们将利用本节所学的内容,创建一个新的,添加约束并显示出来函数将在我们点击的时候显示出来一个新的,实现如下效果在方法中加入如下代码来创建一个新的在上面的代码中,我们加载了一张 前段时间考试,没有来得及写文,最近会抽时间把Animation部分写完 介绍 这一节中,我们将利用本节所学的内容,创建一个新的View,添加约束并...

    Rocko 评论0 收藏0
  • 从此爱上iOS Autolayout

    摘要:二为啥我要用随着寸寸在市面同时使用越来越多,以及即将上市的,不同尺寸不同分辨率的设备将会越来越多,使用传统布局的工作量必将越来越大加上苹果发出的信号,使用势在必行。再看看苹果的态度,默认就是选择了使用。 这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程。这篇文章两个月前就想写下...

    yibinnn 评论0 收藏0
  • IOS开发之Autolayout自动布局

    摘要:先在中取消勾选选项在自定义的大小和位置栏目中,对中的线全部去掉,这样就可以自适应各种尺寸大小的屏幕了。取消连线取消之后的结果可以看出,如果横屏,里边的块也处于中间位置。 一、简介 在以前的iOS程序中,是如何设置布局UI界面的?经常编写大量的坐标计算代码为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时还需要分别为2种屏幕编写不同的坐标计算代码(即传说中的...

    Jingbin_ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<