文档章节

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

hejunbinlan
 hejunbinlan
发布于 2016/08/01 13:34
字数 442
阅读 6
收藏 0

简介

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://segmentfault.com/a/1190000003920891

共有 人打赏支持
hejunbinlan
粉丝 41
博文 595
码字总数 21569
作品 0
浦东
高级程序员
私信 提问
如何判断你是合格的高级iOS开发工程师?

前言 随着移动互联网的高速发展泄洪而来,有意学习移动开发的人越来越多了,竞争也是越来越大,需要学习的东西很多。如何才能在激烈的移动开发者竞争中一枝独秀,成为一名真正合格的高级iOS...

_小迷糊
05/26
0
0
UIView Animations 学习笔记(一)简介及API说明

目录 UIView Animations 学习笔记(一)简介及API说明 UIView Animation 学习笔记 应用示例 一、简介 随着iOS7的发布,动画与运动效果变成了Apple和第三方开发者进行app设计的中心。iOS7介绍...

灰大羊
2015/08/01
0
0
iOS一些代码的取巧写法总结(二)

一、在xib/storyboard里面设置view圆角半径 在xib/storyboard里面设置view圆角半径 神奇的IB_DESIGNABLE和IBInspectable(xib中设置圆角) 二、push pop 动画突然消失的解决方案 产生的原因是动...

朝雨晚风
2016/12/05
0
0
AutoLayout and animateWithDuration problems

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, ......

Ylang
2014/06/04
279
0
UIView Animations 学习笔记(二)定制动画效果及切换效果

目录 UIView Animations 学习笔记(一)简介及API说明 UIView Animations 学习笔记(二)定制动画效果及切换效果 UIView Animation 学习笔记 应用示例 二、视图切换定制 2.1 基础说明 要创建...

灰大羊
2015/08/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Netty handle方法周期 (四)

写了一个练习之后,发现自定义的助手类每次肯定是必须的,对于不同的业务逻辑需求,会写相对应的逻辑 最简单的查看Handle生命周期的方式,就是重写上级方法,看名字差不多应该可以知道方法的作用 ...

_大侠__
7分钟前
0
0
vue主动刷新页面及列表数据删除后的刷新实例

1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者...

前端小攻略
17分钟前
1
0
闲话高并发的那些神话,看京东架构师如何把它拉下神坛

高并发也算是这几年的热门词汇了,尤其在互联网圈,开口不聊个高并发问题,都不好意思出门。高并发有那么邪乎吗?动不动就千万并发、亿级流量,听上去的确挺吓人。但仔细想想,这么大的并发与...

James-
23分钟前
3
0
Emacs 系列:让我们拥抱 Emacs 和 org 模式

导读 我必须承认,在使用了几十年的 vim 后, 我被 Emacs 吸引了。长期以来,我一直对如何组织安排事情感到沮丧。我也有用过 GTD 和 ZTD 之类的方法,但是像邮件或是大型文件这样的事务真的很...

问题终结者
24分钟前
3
0
解析Node.js通过axios实现网络请求

本次给大家分享一篇node.js通过axios实现网络请求的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 1、使用Npm 下载axios n...

前端攻城老湿
37分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部