Core Animation（二）动画基础部分

一、概要

上一篇简单的描述了Core Animation相关的内容，并且亲自动手实践了一个动画，同时也提到了“隐式动画”和“显示动画”，也提到了UIKit动画，可见iOS的动画部分确实有些内容需要掌握，所以针对大体三个问题去研究学习：

1、为什么使用动画？有哪些好处？

2、动画都有哪些实现方式？该注意什么？

3、每种方式都是如何实现动画的？区别是什么？

二、动画基础

1、iOS动画使界面交互变得生动，当界面控件属性改变或者更新和切换视图时放缓节奏，显得不那么突兀，增强了用户体验，所有好的交互动画效果是一个App的亮点，是留住用户比较关键的一点。

2、iOS中动画一般有两种方式实现UIKit方式和Core Animation方式，而UIKit方式是对Core Animation的进一步封装，UIKit使用起来很方便，但也失去了一些灵活性。

（1）UIKit动画：常见如UIView动画和UIImageView序列帧动画

a、通过动画上下文来使用UIView动画，此种方式在iOS3.2及更早版本被使用，iOS4以后支持书写更简单的Block方式

- (void) animationOfUIKit {    UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(80, 80, 200, 80)];    testView.backgroundColor = [UIColor redColor];    [self.view addSubview:testView];        [UIView beginAnimations:@"Test Animation" context:nil];    //设置动画播放时间    [UIView setAnimationDuration:3];    //设置是否自动逆向播放    [UIView setAnimationRepeatAutoreverses:YES];    //设置重复播放次数    [UIView setAnimationRepeatCount:100];    //设置动画曲线    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];    //设置动画事件    [UIView setAnimationTransition:UIViewAnimationTransitionNone forView:self.view cache:YES];        //设置代理    [UIView setAnimationDelegate:self];    [UIView setAnimationDidStopSelector:@selector(animationOfUIKitDidStop)];    [UIView setAnimationWillStartSelector:@selector(animationOfUIKitStart)];        testView.backgroundColor = [UIColor cyanColor];    testView.frame = CGRectMake(80, 80, 100, 40);    testView.alpha = 0.3;        //提交并开始动画    [UIView commitAnimations];}- (void) animationOfUIKitStart {    NSLog(@"animationOfUIKitStart");}- (void) animationOfUIKitDidStop {    NSLog(@"animationOfUIKitDidStop");}

b、通过Block方法使用UIView动画

- (void) animationOfUIKitWithBlock {    UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(80, 80, 200, 80)];    testView.backgroundColor = [UIColor redColor];    [self.view addSubview:testView];        [UIView animateWithDuration:3 delay:0                        options:UIViewAnimationOptionRepeat |                                UIViewAnimationOptionAutoreverse |                                UIViewAnimationOptionCurveEaseInOut animations:^{        testView.backgroundColor = [UIColor cyanColor];        testView.frame = CGRectMake(80, 80, 100, 40);        testView.alpha = 0.3;    } completion:^(BOOL finished) {            }];}

注意：UIView动画除了可以产生例子a和b中展示的背景颜色（backgroundColor）、框架（frame）、透明度（alpha）动画，还可以展示的动画有改变状态（隐藏或显示状态）、改变视图层次顺序（调整视图的index）、旋转（视图上应用仿射变换）。

c、UIImageView序列帧动画

- (void) animationOfUIImageView {    UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];    [self.view addSubview:imageView];        imageView.animationImages = @[[UIImage imageNamed:@"bg.png"],                                  [UIImage imageNamed:@"image_a.png"],                                  [UIImage imageNamed:@"image_b.jpg"]];    imageView.animationDuration = 5;    imageView.animationRepeatCount = 10;    [imageView startAnimating];}

（2）Core Animation动画

- (void) animationOfCoreAnimation {    UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(80, 80, 200, 80)];    testView.backgroundColor = [UIColor redColor];    [self.view addSubview:testView];        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];    animation.toValue = (id)[UIColor cyanColor].CGColor;        CABasicAnimation *animationFrame = [CABasicAnimation animationWithKeyPath:@"bounds"];    animationFrame.fromValue = [NSValue valueWithCGRect:CGRectMake(80, 80, 200, 80)];    animationFrame.toValue = [NSValue valueWithCGRect:CGRectMake(80, 80, 100, 40)];    CAAnimationGroup* group = [CAAnimationGroup animation];    group.animations = [NSArray arrayWithObjects:animation, animationFrame, nil];    group.duration = 3.0;    group.removedOnCompletion=NO;    group.fillMode=kCAFillModeForwards;    group.autoreverses = YES;    group.repeatCount = 100;    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];        [testView.layer addAnimation:group forKey:@"Changes"];}

注意：Core Animation动画除了可以提供UIView动画能提供的效果之外，还可以根据你需要提供更加复杂和绚丽的动画，例如推挤、揭开、覆盖、波纹、吸收、翻页、镜头开关效果、空间沿着曲线路径非线性运动。

3、UIView动画和Core Animation动画联系和区别

步骤2中实现的几个动画，我们发现UIKit动画和Core Animation动画都可以实现相似的动画效果，但要注意一下几点：

UIView动画和Core Animation动画的区别

（1）UIKit动画使用UIView调用，Core Animation则在view.layer中使用

（2）UIKit动画调用简单，而Core Animation调用则复杂一些

（3）UIKit动画方式局限较大，而Core Animation则自由很多，可以实现很多奇妙的设计

UIView动画和Core Animation动画的联系：

（1）实际上UIView是iOS系统中界面元素的基础，所有页面都继承自UIView，但UIView真正的绘图部分是CALayer，而Core Animation动画主要在CALayer上操作

（2）但CALayer不能响应用户事件，所以UIView更像是一个CALayer的管理器，访问UIView的frame、bounds等属性，实际上内部操作的是CALayer的frame、bounds等属性。从继承关系来看UIView继承UIResponder，而CALayer继承NSObject。UIView有一个属性是layer（CALayer类型），所以理解起来就容易了。

注意：以上我们使用的UIKit和Core Animation动画都是我们自己定义的，都属于“显示动画”，当一个UI控件使用显示动画的时候，系统将不在提供“隐式动画”。

接下来详细学习Core Animation相关内容。

Demo下载