iOS 很美的一部分就是它的动画,动画对于用户体验的提升很重要。iOS 提供了一些简单的 API 来帮助我们实现一些比较简单的动画,不能小看这些简单的 API,大道至简不是么 :]
实际上的确是这样子,很多动画并不需要什么奇技淫巧,往往可以用更简单的方式来实现。
最近阅读完 ios 核心动画技巧 这本书后,对于 iOS 动画有了一些基本的了解,但是此书讲的比较深,所以有很多地方不是很明白。由于我是很快的去阅读,所以没有写一些比较基本的代码来做一些实现,因此又照着 RaywenderLich 的 iOS Animation 教程开始做一些例子,来加强学习。
UIView 类提供了大量的动画 API,这些都是 UIView 的类方法,使用这些方法来实现动画将会变的很简单。
视图的属性动画
UIView 的 + animateWithDuration:delay:options:animations:completion:
方法,可以通过改变视图的一些属性来生成动画。
+ (void)animateWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewAnimationOptions)options
animations:(void (^)(void))animations
completion:(void (^)(BOOL finished))completion
复制代码
这个方便使用起来很简单,只需要在 animations 参数中的 block 中写入对 UIView 属性的改变即可,系统会自动根据你的代码,将属性的改变做一个平缓的动画。
- duration :整个动画持续的时间
- delay:动画在多久之后开始,值为 0 表示代码执行到这里后动画立刻开始
- options:一些有关动画的设置,例如想要动画刚开始比较快,到快结束时比较慢,都在这里设置。
- animations:在这个 block 中写入你想要执行的代码即可。block 中对视图的动画属性所做的改变都会生成动画
- completion:动画完成后会调用,finished 表示动画是否成功执行完毕。可以将动画执行完成后需要执行的代码写在这里
举个例子,我想让一个 View 从左上角移动到右下角某个位置,并且背景色更改为 red,整个移动的过程(动画持续执行的时间)为 1 秒,并且延迟 0.3 秒执行。那么可以这么写:
- (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 来做动画,这样子就可以做更多的事情啦。transform 具体就不讲了,不懂的可以搜一下。
动画选项 Animation Options
在刚才的方法中,options 选项我们填写了 0 ,表示采用默认的值。options 主要用于设置动画的一些执行特性,告诉 UIKit 来如何创建动画。下面我们来看一哈这个枚举类型都有哪些值。
重复 Repeat
首先可以简单看一下下面两个选项:
-UIViewAnimationOptionRepeat:表示动画重复执行,即执行完成后再来一次. -UIViewAnimationOptionAutoreverse: 这个选项只能配合 repeat 一起使用,表示反向重复,即这个动画是来来回回的执行,并不是简单重复。更简单点说就是,动画完成后倒退回去再继续整个过程。
减缓 easing
在真实的世界中,运动都是有一个过程的,例如球的滚动是刚开始比较快,最后快停下来的时候比较慢。下面的选项就是设置动画执行的速度的:
-
UIViewAnimationOptionCurveLinear:线性地,即始终都是一个速率,以某个速度突然的开始动画,突然的停止动画,整个动画过程都是一个速率。
-
UIViewAnimationOptionCurveEaseIn:缓慢的开始,然后以某个速率开始动画,一直到结束
-
UIViewAnimationOptionCurveEaseOut:缓慢的结束
-
UIViewAnimationOptionCurveEaseInOut:开始和结束时都比较缓慢
还有其他的一些选项,这里不做多的说明,可以看文档并且自己动手实践来体会,这也是最好的方法。
动画完成时的回调 completion
当动画序列执行完毕后,系统将执行回调中的代码。block 中只有一个 finished 参数表示 block 被调用时,动画是否完成。
如果动画的 duration 为 0 ,那么block 中的代码将在下一个 RunLoop 循环中执行。
此时,我们可以使用这个 UIView 类方法实现大多数我们想要的动画。属性动画是可以合并的,比如在移动的同时缩放、更改背景色。
动画可以叠加,串成一个动画链。比如在 animation1 的 completion 回调中创建 animation2,那么动画1 完成后将继续执行动画 2。
根据官方文档,在整个动画过程中,用户交互对于此视图是暂时无效的(而IOS5.0前,动画过程中,用户交互对于整个应用是无效的),如果想要用户可以和视图交互,可以改变
UIViewAnimationOptionAllowUserInteraction
一些个人的想法
下面讲一下个人的一些理解,但是不能保证正确,如果有错误的地方还请在评论中指出,大家相互学习。
UIView 的这个类方法本质为创建 CAAnimation 对象并且添加到相应的 view 所管理的 CALayer 上,然后在下个 RunLoop 中执行动画。
如果在多个类方法中将 view 的属性做改变,那么创建的 CAAnimation 对象将做合并。