Question

如何对使用了autolayout的UIView添加动画

Answer 1

当我们对一个UIView使用了autolayout自动布局之后，也就意味着我们放弃了传统的通过设置
view的frame等方式手动的修改、确定这个view的位置、尺寸属性。甚至从某种程度上讲，我们应该忘记view的frame属性：它的确定不再取
决于我（手动的直接修改），而是通过我们在
storyboard或者code中提供的约束条件（constraints），通过一个自动布局引擎（苹果为autolayout采用的是
Cassowary布局引擎，参考文档： 点击打开链接
），计算出这个view的frame。因此我们可以认为使用了autolayout的view的frame属性是一个只读的属性。在代码里认为的改动这个
view的frame并不能对这个view的frame产生真正的效果（事实也确实如此）。
现在问题就来了，在以前我们经常通过对一个view的frame的修改产生view移动的动画效果，那么在使用了autolayout的view世界中我
们该如何实现相同的效果呢？答案是，我们“将计就计”，通过改变这个view上的某个约束constraint然后在uiview的animation
block中触发layout来实现。
一、预期效果
下面我们以一个简单的例子来进行详细的说明：

如上图所示，整个界面都使用了autolayout，现在我们想实现这样一个效果：当我们点击显示生日的按钮的时候，整个view向上滑动，同时向上推出一
个日期选取器（date
picker），类似于点击textfield，弹出键盘后整个界面为了避免被遮住而向上移动的效果。选取完成日期后点击生日日期按钮或者完成按钮整个
view向下缩回，同时date picker向下滑出可视范围。
二、实现细节
首先来看一眼storyboard中view的层级结构：如下图所示，从图中我们可以看到，整个view的布局相当简单，就两级：根view和我们的
date picker view，其中date picker view包含了一个完成按钮和系统的date
picker。这样的话，要实现整个view和date picker view同时上移的效果，我们只需要对根view和date picker
view同时做动画即可。

考虑如何实现根view的动画效果，这里我们可以巧妙的通过修改根view的bounds属性来实现根view的上移效果。注意这里我
们需要明白view的bounds属性和frame属性的区别，前者是相对于当前view的本地坐标系而言的，而后者则是相对于当前view的父view的坐标系而言的。
简单的讲，frame决定了一个view相对于父view的position和size信息。而bounds则决定了当前view展示的内容相对于本地坐
标系的位置。这里我们将view自身的可视内容和subviews可以看做一页纸上的内容信息，而view本身可以看成是一枚放于纸上的放大镜，放大镜的
大小不一定是和纸（content size）相同大小的。bounds属性的作用就是确定这枚放大镜相对于纸的位置：一个bounds =（0,
200, 300,
300）就意味着我们要将这枚放大镜向纸的下方移动200个points,但放大镜相对于父view的位置仍是保持不变的，这样给我们的效果就是这个
view（显示的内容）向上移动了200个points.

改动bounds的origin属性并不会改动这个view的frame，通过这种展示内容的移动给我们产生一种view向上移动了的幻觉。如上图中，“哪个位置...”为成为我们放大镜中看到的第一行。
根view上移动画的效果解决了，下面我们再来看日期选取器date picker，在storyboard中对其增加的约束如下：定高207、trailing/leading/top相对于super view (根view)的位置。

确定date picker view y轴方向上下移动的约束显然是top约束，点开top约束，可以看到该约束的详细内容：
一个约束可以描述为：
firstItem.attributeA = secondItem.attributeB * multipler + constant
结合上图我们可以得出date picker view的top约束为：

1

datePickerView.Top = topLayoutGuide.bottom * 1 + 400

我们可以通过修改这里的constant值来修改这个top约束以达到预期效果，事实上通过修改而不是删除旧的constraint再添加新的constraint也正是苹果所推荐的，在NSLayoutConstraint.h头文件中有如下说明：

这样，date picker
view的上下移动就可以通过获取并修改其top约束来实现。需要注意的是在代码中获取date picker
view的top约束实际上是要在其父view的constraints数组中查找，这是因为每个view的constraints数组中保存的实际上是
layout 子view所需的约束的集合。
我们还要定义个辅助BOOL变量，已判断date picker view是否以弹出：

1

@property (nonatomic, assign) BOOL hasShowPickerView;

接下来定义一个辅助函数，用于查找date picker view的top约束并修改其constant属性为给定的值：

1
2
3
4
5
6
7
8

- (void)replacePickerContainerViewTopConstraintWithConstant:(CGFloat)constant
{
for (NSLayoutConstraint *constraint in self.pickerContainerView.superview.constraints) {
if (constraint.firstItem == self.pickerContainerView && constraint.firstAttribute == NSLayoutAttributeTop) {
constraint.constant = constant;
}
}
}

代码里我们在picker container view
（即文中的date picker
view）的superview的constraints属性中查找，如果发现firstItem和firstAttribute属性分别是date
picker view和top，则该constraint即为目标约束，然后修改其constant属性。
在view首次被加载的时候我们想确保date picker view 处于整个view的最底部即隐藏的状态，因而我们在viewcontroller的viewDidLoad方法中调用辅助方法修改一下date picker view的top约束：

1

[self replacePickerContainerViewTopConstraintWithConstant:self.view.frame.size.height];

在首次点击birthday button的时候动画修改根view的bounds和date picker view的top
constraint，注意上移gap的计算。再次点击birthday button的时候将根view的bounds恢复到正常值，date
picker view的top constraint也恢复到viewDidLoad中设置的值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

- (IBAction)didTapOnBirthdayButton:(id)sender
{
self.hasShowPickerView = !self.hasShowPickerView;
if (self.hasShowPickerView) {
CGRect birthdayButtonFrame = self.birthdayButton.frame;
birthdayButtonFrame = [self.view convertRect:birthdayButtonFrame fromView:self.birthdayButton.superview];
CGFloat birthdayButtonYOffset = birthdayButtonFrame.origin.y + birthdayButtonFrame.size.height;
CGFloat gap = birthdayButtonYOffset - (self.view.frame.size.height - self.pickerContainerView.frame.size.height);
CGRect bounds = self.view.bounds;
if (gap > 0) {
bounds.origin.y = gap;
} else {
gap = 0;
}
[self replacePickerContainerViewTopConstraintWithConstant:birthdayButtonYOffset];
[UIView animateWithDuration:0.25 animations:^{
self.view.bounds = bounds;
[self.view layoutIfNeeded];
}];
} else {
[self replacePickerContainerViewTopConstraintWithConstant:self.view.frame.size.height];
CGRect bounds = self.view.bounds;
bounds.origin.y = 0;
[UIView animateWithDuration:0.25 animations:^{
self.view.bounds = bounds;
[self.view layoutIfNeeded];
}];
}
}

上述代码中的[self.view
layoutIfNeed]去掉也是没问题的。可能比较费解的是根view.bounds.origin.y的上移gap的计算以及top
constraint的constant值的计算，关键实在真正理解view的frame和bounds的意义。
至此程序达到了预期的效果。
三、小结

在使用autolayout之前我们写程序控制界面的构成就好比是开一辆手动挡的汽车，虽然频繁换挡（修改frame）很繁琐，却也很享受那种可以完全控
制汽车档位的自由感。使用了autolayout之后则一下子升级为了自动挡汽车，切换档位的活不再由我们直接操作，而只能通过油门
（constraints）的大小来间接的改变汽车的档位。在自动挡汽车里，我们必须要放弃直接控制档位的想法，那是不可能的了，我们必须要学会通过熟练
掌握脚下的油门和刹车来控制车速！在习惯了自动挡之后，相信大家也一样能够得心应手的做自己想做的事情。

Answer 2

1.点击需要添加动画的幻灯片2.点击右上角的“添加效果” 就可以了