UIView Animation感悟

动画对于用户体验的提升很重要。

动画的流畅和真实性,决定了用户接下来的交互体验,当用户点击,手势滑动或者摇晃手机,人眼第一时间收到反馈的是动画,然后是数据。比如红包的开启,摇一摇的弹出,下拉刷新的弹性,loading加载等。我们程序员如果从用户角度出发,展开联想,换位思考,这样的应用才是有灵魂的App,而不是装着数据的躯壳,做一名开发人员要对得起自己的努力和应用的使用率,排开用户粘性不谈,一款合格的App,从视觉,动画,交互给人感觉自然得体最重要,还记得一次乔布斯公开tableView滑动弹性给人们的震撼吗?

视图的属性动画

UIView 的 + animateWithDuration:delay:options:animations:completion: 方法,可以通过改变视图的一些属性来生成动画。

1
+ (void)animateWithDuration:(NSTimeInterval)duration             delay:(NSTimeInterval)delay                         options:(UIViewAnimationOptions)options                         animations:(void (^)(void))animations                         completion:(void (^)(BOOL finished))completion

可以改变的属性有:

  • frame
  • bounds
  • center
  • alpha
  • transform….等

这个方便使用起来很简单,只需要在 animations 参数中的 block 中写入对 UIView 属性的改变即可,系统会自动根据你的代码,将属性的改变做一个平缓的动画。

  • duration :整个动画持续的时间
  • delay:动画在多久之后开始,值为 0 表示代码执行到这里后动画立刻开始
  • options:一些有关动画的设置,例如想要动画刚开始比较快,到快结束时比较慢,都在这里设置。
  • animations:在这个 block 中写入你想要执行的代码即可。block 中对视图的动画属性所做的改变都会生成动画
  • completion:动画完成后会调用,finished 表示动画是否成功执行完毕。可以将动画执行完成后需要执行的代码写在这里

举个例子,我想让一个 View 从左上角移动到右下角某个位置,并且背景色更改为 red,整个移动的过程(动画持续执行的时间)为 1 秒,并且延迟 0.3 秒执行。那么可以这么写:

1
2
3
4
5
6
7
8
9
10
11
- (void)animationProperty {   
 [UIView animateWithDuration:1.0 delay:0.3 options:0 animations:^{    
     self.someView.center = CGPointMake(300, 400);     
     self.someView.backgroundColor = [UIColor redColor];   

 } completion:^(BOOL finished)
 {        NSLog(@"动画完成了");   
 
 }];

}

当这个方法被调用时,首先有一个 0.3 秒的延迟,然后动画开始,在 1 秒内 someView 将从原来的位置移动到 (300,400)的位置,并且背景色有原来的颜色逐渐变为红色。
其实在上面的代码中,我们只是告诉系统,我希望有一个动画,这个动画的动作为视图位置与背景色的更改,设置好动画时间,其他的工作系统已经为我们全部做好,并且在动画完成时还通知我们。
可以看出使用 UIView 的类方法实现动画很是便捷。
细心点就会发现,我们对 UIView 的属性做了改变,然后系统相应地自动为属性的整个改变过程做了动画。那么 UIView 的哪些属性支持动画呢?

  • 位置和大小(Position & Size):你可以改变视图的位置和大小,使得 View 变大变小或移动到某个位置,具体可以使用这些属性:
  • bounds:重新设置 View 的大小
  • Frame:移动或缩放 View
  • center:更改 View 的位置(有关 UIView 的 center、Frame 等关系另行搜索 )
    外观(Appearance):可以通过设置以下属性来更改 view 的外观:
  • backgroundColor:这个就比较简单啦,背景色的改变在这个动画期间是从原来的旧值过渡到新值的
  • alpha:此值的变化也是过渡的,设置为 0 可以让 view 逐渐消失
  • 变换(Transformation):主要通过改变 View 的 transform 来做动画,这样子就可以做更多的事情啦。

动画选项 Animation Options

在刚才的方法中,options 选项我们填写了 0 ,表示采用默认的值。options 主要用于设置动画的一些执行特性,告诉 UIKit 来如何创建动画。下面我们来看一哈这个枚举类型都有哪些值。

重复 Repeat

首先可以简单看一下下面两个选项:
-UIViewAnimationOptionRepeat:表示动画重复执行,即执行完成后再来一次.
-UIViewAnimationOptionAutoreverse: 这个选项只能配合 repeat 一起使用,表示反向重复,即这个动画是来来回回的执行,并不是简单重复。更简单点说就是,动画完成后倒退回去再继续整个过程。

减缓 easing

在真实的世界中,运动都是有一个过程的,例如球的滚动是刚开始比较快,最后快停下来的时候比较慢。下面的选项就是设置动画执行的速度的:

  • UIViewAnimationOptionCurveLinear:线性地,即始终都是一个速率,以某个速度突然的开始动画,突然的停止动画,整个动画过程都是一个速率。
  • UIViewAnimationOptionCurveEaseIn:缓慢的开始,然后以某个速率开始动画,一直到结束
  • UIViewAnimationOptionCurveEaseOut:缓慢的结束
  • UIViewAnimationOptionCurveEaseInOut:开始和结束时都比较缓慢
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    #转场类型(仅适用于转场动画设置,可以从中选择一个进行设置,基本动画、关键帧动画不需要设置)
    [UIView transitionWithView:animationView duration: 1 options: UIViewAnimationOptionTransitionFlipFromLeft animations: ^{
    //动画操作
    } completion: ^(BOOL finished) {
    //动画完成操作
    }];

    UIViewAnimationOptionTransitionNone = 0 << 20, // 没有转场动画效果
    UIViewAnimationOptionTransitionFlipFromLeft = 1 << 20, // 从左侧翻转效果
    UIViewAnimationOptionTransitionFlipFromRight = 2 << 20, // 从右侧翻转效果
    UIViewAnimationOptionTransitionCurlUp = 3 << 20, // 向后翻页的动画过渡效果
    UIViewAnimationOptionTransitionCurlDown = 4 << 20, // 向前翻页的动画过渡效果
    UIViewAnimationOptionTransitionCrossDissolve = 5 << 20, // 旧视图溶解消失显示下一个新视图的效果
    UIViewAnimationOptionTransitionFlipFromTop = 6 << 20, // 从上方翻转效果
    UIViewAnimationOptionTransitionFlipFromBottom = 7 << 20, // 从底部翻转效果

    动画完成时的回调 completion

当动画序列执行完毕后,系统将执行回调中的代码。block 中只有一个 finished 参数表示 block 被调用时,动画是否完成。

1
如果动画的 duration 为 0 ,那么block 中的代码将在下一个 RunLoop 循环中执行。

此时,我们可以使用这个 UIView 类方法实现大多数我们想要的动画。属性动画是可以合并的,比如在移动的同时缩放、更改背景色。
动画可以叠加,串成一个动画链。比如在 animation1 的 completion 回调中创建 animation2,那么动画1 完成后将继续执行动画 2。

1
根据官方文档,在整个动画过程中,用户交互对于此视图是暂时无效的(而IOS5.0前,动画过程中,用户交互对于整个应用是无效的),如果想要用户可以和视图交互,可以改变 UIViewAnimationOptionAllowUserInteraction

想法

UIView 的这个类方法本质为创建 CAAnimation 对象并且添加到相应的 view 所管理的 CALayer 上,然后在下个 RunLoop 中执行动画。
如果在多个类方法中将 view 的属性做改变,那么创建的 CAAnimation 对象将做合并。