Auto Layout 使用心得（六）—— 制造炫酷的下拉刷新动画

---

原文发表在个人我的网站：Auto Layout 使用心得（六）—— 制造炫酷的下拉刷新动画

---

此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ，有不明白的地方能够参考个人 Auto Layout 设置哦，下载到本地打开就能够了。

简介

本文中，咱们将一块儿使用 Auto Layout 技术制造一个炫酷的下拉刷新动画。Auto Layout 除了在布局的时候比较繁琐之外，还有一个常常被人吐槽的点：让许多 UIView.animateWithDuration 失效，甚至在界面上出现 “反方向动画” 的视觉效果。本文中咱们将主要讲述制造下拉刷新动画的过程，关于 Auto Layout 与动画的详细配合咱们之后再一块儿仔细探究。

实现首页总体下拉回弹效果

创建接受下拉事件的主 View

使用一个跟窗体同样很大的 mainView 把目前首页的五个元素包括，并补全 Auto Layout 布局。层次结构改变会让除尺寸约束以外的全部约束消失。

修改 UI 绑定及动画函数

UI 和代码的绑定修改为以下：

从新给 mainView 绑定上 panGesture，从 mainView 向 panGesture 拖动：

修改存储值的变量名称和初始化代码：

swift...
var mainViewTopSpaceLayoutConstraintValue: CGFloat!
var mainViewOriginY: CGFloat!

...

mainViewTopSpaceLayoutConstraintValue = topLayoutConstraintOfMainView.constant
mainViewOriginY = mainView.frame.origin.y

...

修改手势触发的目标函数（增长冒号）：

swiftpanGesture.addTarget(self, action: Selector("pan:"))

改写动画目标函数：

swiftfunc pan(recongnizer: UIPanGestureRecognizer) {
    if panGesture.state == UIGestureRecognizerState.Ended {
        UIView.animateWithDuration(0.4, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
            recongnizer.view?.frame.origin.y = self.mainViewOriginY
            }, completion: { (success) -> Void in
                if success {
                    self.topLayoutConstraintOfMainView.constant = self.mainViewTopSpaceLayoutConstraintValue
                }
        })
        return
    }
    let y = panGesture.translationInView(self.view).y
    topLayoutConstraintOfMainView.constant = mainViewTopSpaceLayoutConstraintValue + y
}

查看新的拖动回弹效果

创建动画视图

创建动画主视图

拖动一个 View 到 mainView 上面，目的是置于 mainView 图层之下。在 Xcode 里，最上面的元素位于 UI 的最底层，这个顺序跟 PS 正好相反。修改其 frame，添加 Auto Layout 约束，以下图：

将 UI 和代码绑定：

动画的时候咱们须要该主视图进行必定程度的下移，故将其 “到父视图顶部的距离” 的约束也进行绑定。（此图为后期补充，请自动忽略其子元素）

填充动画元素

将动画主视图更名为 HiddenTopView。为了方便的填充动画元素，须要先将 HiddenTopView 移动到 mainView 之下，以便将图层显示在 mainView 之上，不被其遮挡，没法编辑。我填充了三个图片资源，所有加上约束。具体约束你们能够自由发挥。效果以下：

因为我使用了白云元素，故将最大的 view 的背景色填充为灰色，将 HiddenTopView 背景色设置为透明。

查看布局效果

动画规划

咱们计划整个下拉刷新动画分为四个部分。下拉时：

1. 整个 HiddenTopView 下移
2. 小云彩从屏幕右侧飞入
3. 大云彩持续作往复运动
4. 下拉距离超过必定值时，中间子元素进行必定程度的放大

完善准备工做

分析须要获取的约束

“动画规划”中，1 上面已经准备过，二、3 须要将小云、大云的横向定位参数向代码绑定，4 只需绑定中间元素便可。

绑定三个子元素及其关键约束到代码

Make them move!

因为事先动画效果的代码描述起来过于麻烦，请直接看代码：https://github.com/johnlui/AutoLayout/blob/1420fddee57d22ebd443656fb31...

查看效果