iOS 开发之动画篇 - 从 UIView 动画说起

毋庸置疑的：在iOS开发中，制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果，吸引他们的眼光 —— 这对于app而言是非常重要的。

本文作为动画文集的第一篇，最开始是想做个qq下拉刷新的水滴动画的制作讲解，但这几天研读《iOS Animations by Tutorials》一书，对iOS动画开发有了更为深刻的了解，于是决定动画篇将从UIView动画开始讲起，以后还会有Layer、Transitioning等在内的动画，希望本文能抛砖引玉，带给大家不一样的理解，下面送上一张书中demo的效果图。购买书籍

动效

先放上本文demo：点这

ps：本文属于新手向的动画入门文章

从登录动画说起

在我们了解这些强大的接口前，我们先来看看第一个效果：在用户打开app要进行登录的时候，账户和密码输入框从屏幕的左边进入，接着登录按钮出现。

界面动画

在这段动画之中发生的最为明显的事情就是两个文本框的位置变化，在动画开始之前，两个文本框的位置应该是在屏幕的左边，而下方的按钮现在是隐藏状态（设置alpha）

动画开始前

因此，这个动画之中发生的事情，我们可以用概括为下面的代码：

self.userName.center.x += offset;    //userName进入
self.password.center.x += offset;    //password进入
self.login.alpha = 1;                //显示登录按钮

既然已经知道了我们的动画发生了什么，接着就可以使用UIKit的动画API让我们的动画活起来了

[js] view
plain copy

1. //设置文本框初始位置为屏幕左侧
2. CGPoint accountCenter = self.userName.center;
3. CGPoint psdCenter = self.password.center;
4. accountCenter.x -= 200;
5. pasCenter.x -= 200;
6. self.userName.center = accountCenter;
7. self.password.center = psdCenter;
8. //还原中心坐标
9. accountCenter.x += 200;
10. psdCenter.x += 200;
11. [UIView animateWithDuration: 0.5 animations: ^{
12. self.userName.center = accountCenter;
13. self.password.center = passwordCenter;
14. self.login.alpha = 1;
15. } completion: nil];

在UIKit中，系统提供了animate标题打头的属于UIView的类方法让我们可以轻松的制作动画效果，每一个这样的类方法提供了名为animations的block代码块，这些代码会在方法调用后立刻或者延迟一段时间以动画的方式执行。此外，所有这些API的第一个参数都是用来设置动画时长的。

在viewDidAppear:中运行这段代码，你会看到文本框从左侧滑动，按钮也渐变显示出来的，但是跟我们要的结果不太一样 —— 三个动画没有错开，效果并不那么的好看。我们希望密码框能在账户文本框滑动后的一段时间后再出现，按钮同样也需要晚一些显示。所以，我们需要使用下面的方法来实现这个效果：

[js] view
plain copy

1. [UIView animateWithDuration: 0.5 delay: 0.35 options: UIViewAnimationOptionCurveEaseInOut animations: ^{
2. self.password.center = passwordCenter;
3. } completion: ^(BOOL finished) {
4. [UIView animateWithDuration: 0.2 animations: ^{
5. self.login.alpha = 1;
6. }];
7. }];

这个方法看起来非常的熟悉，相比上面的方法这里多了几个参数来高度定制我们的动画：

• duration：  动画时长
• delay：  决定了动画在延迟多久之后执行
• options：用来决定动画的展示方式，接下来会进行讲解
• animations：转化成动画表示的代码
• completion：动画结束后执行的代码块

在上面的代码中，密码输入框在延后0.35秒之后开始从左侧出来，在持续0.5秒的动画之后，开始渐变显示按钮，然后动画完成。

可实现动画的属性

这些可以生成动画的属性大致可以分成这么三类：坐标尺寸、视图显示、形态变化

坐标尺寸类

• bounds：修改这个属性会结合center属性重新计算frame。建议通过这个属性修改尺寸
• frame：修改这个属性通常会导致视图形变的同时也发生移动，然后会重新设置center跟bounds属性
• center: 设置后视图会移动到一个新位置，修改后会结合bounds重新计算frame

  

  尺寸修改

视图显示类

• backgroundColor: 修改这个属性会产生颜色渐变过渡的效果，本质上是系统不断修改了tintColor来实现的
• alpha：修改这个属性会产生淡入淡出的效果
• hidden：修改这个属性可以制作翻页隐藏的效果

  修改透明度

• 

形态变化类

• transform：修改这个属性可以实现旋转、形变、移动、翻转等动画效果，其通过矩阵运算的方式来实现，因此更加强大

  

  旋转

动画参数

• Repeating

  [js] view
  plain copy

  1. UIViewAnimationOptionRepeat       //动画循环执行
  2. UIViewAnimationOptionAutoreverse  //动画在执行完毕后会反方向再执行一次

  我们将这两个参数传入到上面密码框出现动画中，看看会有什么效果（不同的参数使用|操作符一起传入）

  [js] view
  plain copy

  1. [UIView animateWithDuration: 0.5 delay: 0.35 options: UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat animations: ^{
  2. self.password.center = passwordCenter;
  3. } completion: ^(BOOL finished) {
  4. [UIView animateWithDuration: 0.2 animations: ^{
  5. self.login.alpha = 1;
  6. }];
  7. }];

  

  重复的动画

  我们可以看到密码框在不断的循环进入屏幕，反方向退出屏幕这个操作，并且登录按钮也始终没有渐变出现。由此可以知道UIViewAnimationOptionRepeat参数不仅是让动画循环播放，并且还导致了completion的回调永远无法执行。

• Easing

  我们都知道，一个好的动画应该更符合我们认知的规则。比如，任何事物都不能突然间的开始移动和停下，像车辆启动和停止都有一个加速和减速的过程。

  

  汽车的加速减速.png

  为了让动画更具符合我们的认知，系统同样提供了类似的效果的参数给我们使用：

  [js] view
  plain copy

  1. UIViewAnimationOptionCurveEaseInOut   //先加速后减速，默认
  2. UIViewAnimationOptionCurveEaseIn      //由慢到快
  3. UIViewAnimationOptionCurveEaseOut     //由快到慢
  4. UIViewAnimationOptionCurveLinear      //匀速

  我在demo上创建了四个橙色的UIView，分别传入这四个不同的参数，然后让这四个view在同一时间y轴上向上移动。

  [js] view
  plain copy

  1. [self animatedView: _view1];
  2. [self animatedView: _view2];
  3. [self animatedView: _view3];
  4. [self animatedView: _view4];
  5. //y轴上移动视图上升250
  6. - (void)animatedView: (UIView *)view
  7. {
  8. [UIView animateWithDuration: 0.5 delay: 0 options: UIViewAnimationOptionCurveLinear animations: ^{
  9. CGPoint center = view.center;
  10. center.y -= 250;
  11. view.center = center;
  12. } completion: nil];
  13. }

  

  四种线性速度表示

  在模拟器运行状态下，点击上面的菜单栏 DEBUG -> Slow Animation 或者快捷键 command + T，这会放慢我们app的动画运行速度（demo在6p的模拟器上运行）。

  在减速环境下，我们看到四个view的速度变化如下：

  1、逐渐加速。EaseIn

  2、先加速，后减速。EaseInOut

  3、速度领先，然后减速。EaseOut

  4、匀速运动。Linear

  运行最开始的登录动画，放慢模拟器的动画速度，你会看到默认情况下使用的EaseInOut参数使得密码框在接近结束点的时候出现了明显的减速动画。

• Transitioning

  除了上面提到的这些效果，在视图、图片切换的时候，我们还能通过传入下面的这些参数来实现一些特殊的动画效果。

  [js] view
  plain copy

  1. UIViewAnimationOptionTransitionNone            //没有效果，默认
  2. UIViewAnimationOptionTransitionFlipFromLeft    //从左翻转效果
  3. UIViewAnimationOptionTransitionFlipFromRight   //从右翻转效果
  4. UIViewAnimationOptionTransitionCurlUp          //从上往下翻页
  5. UIViewAnimationOptionTransitionCurlDown        //从下往上翻页
  6. UIViewAnimationOptionTransitionCrossDissolve   //旧视图溶解过渡到下一个视图
  7. UIViewAnimationOptionTransitionFlipFromTop     //从上翻转效果
  8. UIViewAnimationOptionTransitionFlipFromBottom  //从上翻转效果

  那么这些参数使用的时机是什么时候呢？我们来看看这么一段代码：

  [js] view
  plain copy

  1. [UIView transitionWithView: firstPV duration: 0.5 options: UIViewAnimationOptionTransitionFlipFromLeft animations: ^{
  2. [firstPV flipCard];
  3. } completion: ^(BOOL finished) {
  4. isAnimating = NO;
  5. }];
  6. - (void)flipCard
  7. {
  8. if (isfliped) {
  9. self.image = [UIImage imageNamed: @"flipPicBG.png"];
  10. isfliped = NO;
  11. } else {
  12. self.image = [UIImage imageNamed: [NSString stringWithFormat: @"flipPic%d.png", type]];
  13. isfliped = YES;
  14. }
  15. }

  这段代码中我改变了一个UIImageView的图片显示，同样用了一个动画的方式表现。这里用到了一个新的动画API方法，transitionWithView: duration: options: animations: completion:，这个方法跟上面的animateWithDuration系列方法相比多了一个UIView类型的参数，这个参数接收的对象作为动画的作用者。这段代码是我以前做的一个翻卡匹配的小游戏，点击之后的动画效果如下：

  

  翻卡匹配小游戏

  在模拟器下使用command+T放慢了动画的速度之后，我截取了翻转的四张图片：

  

  慢动作翻转

  在我们切换图片的时候，原有的图片会基于视图中心位置进行x轴上的翻转，为了达到更逼真的效果，系统还为我们在切换中加上了阴影效果（ps: 再次要说明的是，transition的动画你应该只用在视图的切换当中 —— 你不会在移动中产生任何transition效果的）

弹簧动画

[js] view
plain copy

1. + (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

照例科普一下额外的参数信息：

• dampingRatio：速度衰减比例。取值范围0 ~ 1，值越低震动越强
• velocity：初始化速度，值越高则物品的速度越快

当一个圆角按钮高速移动的进入界面中，接着狠狠的震动，这绝对会狠狠地吸引住你的眼球。比如我尝试着让某个UICollectionView的分类按钮从屏幕下方弹入视图的时候；又或者我让这个小球弹到右下角，以提示用户该如何操作：

小球弹出效果

这效果非常的棒，在看到这些小圆球之后，你本能的会想要去点击这些按钮，而这些小球弹出的动画仅仅需要下面这么几句代码：

[js] view
plain copy

1. CGPoint center = cell.center;
2. CGPoint startCenter = center;
3. startCenter.y += LXD_SCREEN_HEIGHT;
4. cell.center = startCenter;
5. [UIView animateWithDuration: 0.5 delay: 0.35 * indexPath.item usingSpringWithDamping: 0.6 initialSpringVelocity: 0 options: UIViewAnimationOptionCurveLinear animations: ^{
6. cell.center = center;
7. } completion: nil];

除了这段弹出的代码，在小球被点击的时候，还会产生一个弹到右下角的动画，然后从左侧弹出列表。这非常的酷，因为不用额外的提示，用户会很自然的知道该怎么回到分组的界面 —— 点击一下右下角的圆形按钮。这是非常重要的，我们的动画应该不仅仅只是为了让界面更加的优雅漂亮，还应该能用以减少用户学习使用app的成本，这些都是动画的追求。

最后

相比起PC端的粗糙，移动端的应用需要更加精致，精致复杂的动画都是源于一个个简单的动画组合而成的。本文作为动画篇的第一篇博客，目的是为了从最简单的UIView动画讲起，慢慢的拓展其它的动画，也希望能起到抛砖引玉的作用。在文章的最后，如果你是iOS动画的初学者，请尝试结合上面提到的知识，为本文最开始的登录demo中添加代码，让按钮从下方渐变显示弹出：

弹出的登录按钮