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

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


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


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

简介

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

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

建立接受下拉事件的主 View

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

pic

修改 UI 绑定及动画函数

UI 和代码的绑定修改成如下:

pic

重新给 mainView 绑定上 panGesture,从 mainView 向 panGesture 拖动:

pic

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

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
}

查看新的拖动回弹效果

pic

建立动画视图

建立动画主视图

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

pic

将 UI 和代码绑定:

pic

动画的时候我们需要该主视图进行一定程度的下移,故将其 “到父视图顶部的距离” 的约束也进行绑定。(此图为后期补充,请自动忽略其子元素)

填充动画元素

将动画主视图改名为 HiddenTopView。为了方便的填充动画元素,需要先将 HiddenTopView 移动到 mainView 之下,以便将图层显示在 mainView 之上,不被其遮挡,无法编辑。我填充了三个图片资源,全部加上约束。具体约束大家可以自由发挥。效果如下:

pic

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

查看布局效果

pic

动画规划

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

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

完善准备工作

分析需要获取的约束

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

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

pic

Make them move!

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

查看效果

pic

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109474.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号