您的位置:主页 > 动画资讯 >
动画篇-layout动画的更多使用
发布时间:2017-06-21 17:15    来源:网络整理    浏览量:

不得不说,单单是文章的标题,可能不足以说明本文的内容。因此,在继续讲述约束动画之前,我先放上本文要实现的动画效果。

动画篇-layout动画的更多使用

 

动画

约束动画并不是非常复杂的技巧,在你熟练使用约束之后,你总能创建些独具匠心的动画。在上一篇autolayout动画初体验中,我们根据监听列表视图的滚动偏移来不断改变约束值,从而制作出动画的效果。但上个动画的实现更像是我们制作了一帧帧连续的界面从而达成动画的效果 —— 这未免太过繁杂。而在本文我们将抛弃这种繁杂的方式,通过调用UIView的重绘制视图方法来实现动画。

本文的动画主要存在这么几个:

账户纪录列表的弹出和收回

登录按钮的点击形变

登录按钮被点击后的转圈动画(不做详细讲述)

实际上来说,上述的转圈动画我是通过CoreAnimation框架的动画+定时器的方式实现的,当然这也意味着在本篇文章是约束动画的终结

准备

首先我们需要把所有控件的层次弄清楚,然后搭建整个界面。在demo中,在动画开始前可视的控件总共有五个 —— 用户头像、账户输入框、下拉按钮、密码输入框以及登录按钮,还有一个保存账号信息的列表在账户输入框下面。我们通过修改这个列表跟账户顶部约束值来使其下移出现:

动画篇-layout动画的更多使用

 

纪录列表向下移动

在这些控件的约束中我们需要在代码中改变用到的约束包括:

纪录列表的顶部约束listTopConstraint,修改后可以让列表向下移动出现

纪录列表的高度约束listHeightConstraint,用来设置产生展开动画

账户输入框的高度约束accountHeightConstraint,用来设置列表的下移量

登录按钮左右侧相对于父视图的间距约束loginLeftConstraint以及loginRightConstraint,通过改变这两个约束来使按钮缩小

登录按钮的高度约束loginHeightConstraint,用来计算缩小后的按钮宽度

除了约束属性之外,我们还需要一些数据来支持我们的动画:

@property(assign, nonatomic) BOOL isAnimating; // 用来判断登录按钮的动画状态 @property(strong, nonatomic) NSArray * records; // 列表的数据源,demo中存储五个字符串

为了保证列表出现的时候不被其他视图遮挡,设置的视图层级关系如下:

下拉按钮 > 账户输入框 > 纪录列表 > 头像 = 登录按钮 = 密码输入框 下拉动画

在这里我把demo的动画分为两小节来讲解,因为这两个动画的实现方式有很大的差别。当然了,这两者都能通过直接修改约束的constant值来实现,但这不是本文的讲解目的。

在我们点击下拉按钮的时候会出现两个动画,包括下拉列表的180°旋转以及下拉或者隐藏消失。正常来说,我们需要使用一个BOOL类型的变量来标识列表是否处在展开的状态以此来决定动画的方式,但在关联事件方法的时候作为发送者的下拉按钮已经提供给了我们这个变量isSelected,通过修改这个值来完成标记列表展开状态。因此旋转下拉按钮的代码如下:

/// 点击打开或者隐藏列表 - (IBAction)actionToOpenOrCloseList:(UIButton *)sender { [self.view endEditing: YES]; [self animateToRotateArrow: sender.selected]; sender.isSelected ? [self showRecordList] : [self hideRecordList]; } /// 按钮转向动画 - (void)animateToRotateArrow: (BOOL)selected { CATransform3D transform = selected ? CATransform3DIdentity : CATransform3DMakeRotation(M_PI, 0, 0, 1); [_dropdownButton setSelected: !selected]; [UIView animateWithDuration: 0.25 animations: ^{ _dropdownButton.layer.transform = transform; }]; }

可以看到我们的代码中根据按钮的isSelected属性来决定列表的展开或者收回,对此我们需要修改列表的listHeightConstraint和listTopConstraint来设置列表的大小和位置,而且我们需要给展开的列表加上一个弹出来的动画:

/// 显示纪录列表 - (void)showRecordList { [UIView animateWithDuration: 0.25 delay: 0 usingSpringWithDamping: 0.4 initialSpringVelocity: 5 options: UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations: ^{ _listTopConstraint.constant = _accountHeightConstraint.constant; _listHeightConstraint.constant = _accountHeightConstraint.constant * 5; } completion: nil]; } /// 隐藏纪录列表 - (void)hideRecordList { [UIView animateWithDuration: 0.25 animations: ^{ _listTopConstraint.constant = 0; _listHeightConstraint.constant = 0; } completion: nil]; }

好,运行你的代码,看看效果,这肯定不会是你想要的效果。

动画篇-layout动画的更多使用

 

错误的动画