iOS第七章 视图和动画

目标

    CoreAnimation 入门

通过 UIKit 使用 Core Animation

理解 CoreAnimation 的工作原理

掌握 CoreAnimation 常用工具类

 

1、Core Animation 入门

 CoreAnimation(或 QuartzCore)是一个 Objective-C 的类库，可以翻译为核心动画，它直接内建于 IOS 媒体层，为图形渲染和动画提供了基础。

Core Animation 使用硬件加速，不用消耗cpu资源。其实平时咱们开发的iOS应用都在有意无意的使用了核心动画。(如导航、表格等)

[navcontroller pushViewController :  animated :YES];

Core Animation 能够完成的效果可以是二维 或 三维，如天气应用中卡片翻转动画。

使用 Core Animation 的许多效果，已经于UIKit 绑定了，你只需要设置一些参数比如起点和终点，剩下的帧核心动画为你自动完 成。

核心动画所在的位置：

注意：

    在 iOS 中，UIView 是所有界面元素的父类，所以一切可以用 UIView 父类完成的动画效果，同样也可以用任何子类来完成。

 

iOS 中，默认能够通过UIView 或它的子类，实现一些简单的动画属性，主要修改 UIView 的如下属性

 

属性	描述
frame	视图边框，矩形高宽及在父视图中的起点位置
bounds	视图边界，同样定义高宽，不过起点相对当前视图，常为(0,0)
center	定义视图在父视图中的中心位置
transform	视图变换，定义了其相对中心点的缩放、旋转、坐标转换。UIKit API限制变换在二维空间(三维变换必须使用 Core Animation)
alpha	视图整体透明度，取值范围 0-1
backgroundColor	视图的背景色
contentStretch	视图的拉伸模式，决定里面的内容如何填充可用空间。如拉伸一个 UIImageView 中的图像，缩放填充为(scale-to-fill)模式的话，东环方式为缩放适应(scale-to-fit)模式

2、通过 UIKit 使用 Core Animation

使用 UIKit 中动画 API ，可以快速完成动画效果，但是效果比较简单。有两种方法可以实现。

(1)使用 动画上下文

背景

为了使动画制作易于使用

UIKit将动画模型集成于UIView

只需设置简单的属性便可完成动画

完整的动画块

从beginAnimations:context:方法开始

       ………………

调用commitAnimations:结束

 

 

动画实现步骤，这样理解上下文：

<1>开始一个动画

<2>动画效果一，时长 1.25秒

<3>动画效果二，设置移动曲线

<4>动画效果三，设置3D转换效果

<5>动画效果四，…..

<6>提交，并执行上面的 四个动画效果

上面的一个动画，有完整的开始和结束，具有明确的范围，有一个上下文关系。

代码：

[UIView beginAnimations:@"ViewFlip" context: nil];

[UIView setAnimationDuration:1.25];

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

[UIView setAnimationTransition:   UIViewAnimationTransitionFlipFromRight

       forView: self.view

               cache: YES];

//你的代码

// [blueViewController viewWillAppear: YES];

// [yellowViewController viewWillDisappear:YES];

//………

 

[UIView commitAnimations];

 

 

 

UIView 中提供的类方法

   

 

 

(2)使用 动画代码块

 

3、理解 Core Animation 的工作原理

(1)Core Animation 简介

(2)Core Animation 图层(CALayer)

(3)隐式动画和显式动画

 

(1)Core Animation 简介

ObjC封装的一套图形渲染、投影及动画库的集合

使用简单的编程方法实现高性能的合成

使用层对象(CALayer)创建复杂的用户界面

轻量型数据结构，能够同时使几百个层产生动画

不依赖于应用程序主线程，动画在单独的线程里运行

改进了应用程序性能

局部刷新：应用程序只需要重画它变化的部分

灵活的布局管理模式

相关类

提供显示内容的层（CALayer）

动画和时间类（CAAnimationand timing classes）

布局和约束类（Layoutand constraint classes）

将多个层分成几个原子更新的执行类

 

(2)Core Animation 图层(CALayer)

CALayer是个简单的类，它是用来在屏幕上显示内容展示的矩形区域。 

每个UIView都有一个根CALayer，UIView在这个layer上描绘东西。

Layer Classes是coreanimation的基础。Layer Classes提供了一个抽象的概念，这个概念对于那些使用NSView和UIView的开发者来说是很熟悉的。

 

基础层是由CAlayer类提供 的，CAlayer是所有Core Animation层的父类。    
同一个视图类的实例一样，一个CAlayer实例也有一个单独的 superlayer和上面所有的子层（sublayers），它创建了一个有层次结构的层，我们称之为layer tree。

layers的绘制就像views一样是从后向前绘制的，绘制的时候我们要指定其相对与他们的superlayer的集合形状，同时还需要创建 一个局部的坐标系。

CALayers类有 26 个属性可以修改，所以可以做一些更复杂的操作，例如rotate(旋转)，skew(倾斜)，scale(放缩)，和project the layer content(层的投影)。   


 

那怎么访问这个layer ：

    CALayer *myLayer = myView.layer;  

CA 开头， CoreAnimation 首字母,库需要另外导入，Quartz

 

 

CALayer有这么些属性，可以设置改变层的显示：

层的大小和位置

层的背景颜色

层的内容（图像，core graphics）

层的的圆角，半径

层的阴影设置

等等....

2、开始

新建项目默认的模版里是QuartzCore库的，先添加它，才能使用CALayer。

 

设置层的背景颜色，层的设置圆角半径为20,边框大小

#import <QuartzCore/QuartzCore.h>  

   

- (void)viewDidLoad {   

   self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;

    self.view.layer.cornerRadius = 20.0;

    self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);

}

 

层和子层

获取一个新CALayer的实例

[cpp] viewplaincopy

1.     CALayer *sublayer = [CALayer layer];  

设置layler的属性，下面分别是

设置背景色，

阴影的偏差值，

阴影的半径，

阴影的颜色，

阴影的透明度，

子层的freme值。

然后把新的层add到view的层里。

[cpp] viewplaincopy

1.  CALayer *sublayer = [CALayer layer];  

2.      sublayer.backgroundColor = [UIColor purpleColor].CGColor;  

3.      sublayer.shadowOffset = CGSizeMake(0, 3);  

4.      sublayer.shadowRadius = 5.0;  

5.      sublayer.shadowColor = [UIColor blackColor].CGColor;  

6.      sublayer.shadowOpacity = 0.8;  

7.      sublayer.frame = CGRectMake(30, 30, 128, 192);  

8.      [self.view.layer addSublayer:sublayer];  

效果如下：

 

 

添加图片内容和层的圆角

主要内容有：

新建imagelayer放置图片

设置圆角半径cornerRadius

设置层的内容contents为图片

边界遮罩masksToBounds

[cpp] viewplaincopy

9.  CALayer *sublayer = [CALayer layer];  

10. sublayer.backgroundColor = [UIColor purpleColor].CGColor;  

11. sublayer.shadowOffset = CGSizeMake(0, 3);  

12. sublayer.shadowRadius = 5.0;  

13. sublayer.shadowColor = [UIColor blackColor].CGColor;  

14. sublayer.shadowOpacity = 0.8;  

15. sublayer.frame = CGRectMake(30, 30, 128, 192);  

16. sublayer.borderColor = [UIColor blackColor].CGColor;  

17. sublayer.borderWidth = 2.0;  

18. sublayer.cornerRadius = 10.0;  

19. [self.view.layer addSublayer:sublayer];  

20.   

1. CALayer *imageLayer = [CALayer layer];  

2. imageLayer.frame = sublayer.bounds;  

3. imageLayer.cornerRadius = 10.0;  

4. imageLayer.contents = (id)[UIImage imageNamed:@"aaa.png"].CGImage;  

21. imageLayer.masksToBounds = YES;  

22. [sublayer addSublayer:imageLayer];  

效果：

 

 

(2)动画的分类

CALayer 图层，也分为两部分：数据层(组件的位置等数据)、视图层(组件的样式)

隐式动画

层的属性，默认与动画相关联

值改变会有动画效果

最终效果与初始效果不同

 

显式动画

设置动画属性，产生显式的动画效果

最终效果与初始效果一样

 

4、掌握 Core Animation 常用工具类

Core Animation 于 UIKit动画之间一个关键区别在于 Core Animation 有多个专门的类处理动画。一个动画类，定义了特定动画的独特属性，使用这些类，可以将整个图层作为动画或进行切换，也可以只对图层d特定属性进行动画。

常用动画类：

CABasicAnimation  简单的为图层的属性提供修改。 很多图层的属性修改默认会执行这个动画类。比如大小，透明度，颜色等属性

CAKeyframeAnimation 支持关键帧动画,你可以指定的图层属性的关键路径动画,包括动画的每个阶段的价值,以及关键帧时间和计时功能的一系列值。在 动画运行是,每个值被特定的插入值替代

CATransitionAnimation  整个图层切换，提供了一个图层变化的过渡效果,它能影响图层的整个内容。 动画进行的时候淡入淡出(fade)、推(push)、显露(reveal)图层的内容。

CAAnimationGroup   允许一系列动画效果组合在一起,并行显示动画

 

 

自定义动画的步骤：

1、创建一个新的 CAAnimation 子类对象

2、定义动画的属性

3、将动画赋予一个图层，iOS 就会自动在一个单独线程中处理动画

例子：

    //创建动画类对象

   CABasicAnimation*anim = [CABasicAnimationanimation];

   //设置动画属性的结束值

   anim.toValue= (id)[UIColor blueColor].CGColor;

   //设置动画的时长 1 秒

   anim.duration= 1;

   //设置动画自动反转，最后变回原样

   anim.autoreverses=YES;

   //添加动画到图层中，指定这个动画修改那个属性

   [self.view.layer addAnimation:anim forKey:@"backgroundColor"];

 

 

 

动画练习：

 

1、commitAnimations方式使用UIView动画

- (void)viewDidLoad

{

    [superviewDidLoad];

   

   UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];

   

   [button setTitle:@"改变"forState:UIControlStateNormal];

   button.frame = CGRectMake(10, 10, 60, 40);

   [button addTarget:self action:@selector(changeUIView)forControlEvents:UIControlEventTouchUpInside];

   [self.view addSubview:button];

   

}

 

- (void)changeUIView{

   [UIView beginAnimations:@"animation" context:nil];

    [UIViewsetAnimationDuration:1.0f];

    [UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];

   [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRightforView:self.view cache:YES];

   [UIView commitAnimations];

 }

 

下面是点击改变后的效果（两种）：

 

 

动画的常量有一下四种

  UIViewAnimationTransitionNone,

  UIViewAnimationTransitionFlipFromLeft,  Flip  弹，蹦跳

  UIViewAnimationTransitionFlipFromRight,

  UIViewAnimationTransitionCurlUp,         curl 使卷曲

  UIViewAnimationTransitionCurlDown,

 

1.2 交换本视图控制器中2个view位置

 [self.view exchangeSubviewAtIndex:1withSubviewAtIndex:0];

先添加两个view ,一个redview  一个yellowview

 

- (void)viewDidLoad

{

    [superviewDidLoad];

    UIView*redView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    redView.backgroundColor= [UIColor redColor];

   [self.view addSubview:redView];

   

    UIView*yellowView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

   yellowView.backgroundColor = [UIColor yellowColor];

   [self.view addSubview:yellowView];

   

   UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];

   [button setTitle:@"改变"forState:UIControlStateNormal];

   button.frame = CGRectMake(10, 10, 300, 40);

   [button addTarget:self action:@selector(changeUIView)forControlEvents:UIControlEventTouchUpInside];

   [self.view addSubview:button];

   

   UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];

   [button1 setTitle:@"改变1"forState:UIControlStateNormal];

   button1.frame = CGRectMake(10, 60, 300, 40);

   [button1 addTarget:self action:@selector(changeUIView1)forControlEvents:UIControlEventTouchUpInside];

   [self.view addSubview:button1];

   

}

 

- (void)changeUIView1{

   [UIView beginAnimations:@"animation" context:nil];

    [UIViewsetAnimationDuration:1.0f];

    [UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];

   [UIView setAnimationTransition:UIViewAnimationTransitionCurlDownforView:self.view cache:YES];

   //  交换本视图控制器中2个view位置

   [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];

   [UIView commitAnimations];

}

 

 

这样看起来就像两页一样了。

1.3 、  [UIView setAnimationDidStopSelector:@selector(animationFinish:)];

在commitAnimations消息之前，可以设置动画完成后的回调，设置方法是：

    [UIView setAnimationDidStopSelector:@selector(animationFinish:)];

 

2、使用：CATransition

- (void)changeUIView2{

   CATransition *transition = [CATransition animation];

   transition.duration = 2.0f;

     transition.type = kCATransitionPush;

   transition.subtype = kCATransitionFromTop;

   [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];

   [self.view.layer addAnimation:transition forKey:@"animation"];

}

transition.type 的类型可以有

淡化、推挤、揭开、覆盖

NSString * const kCATransitionFade;

NSString * const kCATransitionMoveIn;

NSString * const kCATransitionPush;

NSString * const kCATransitionReveal;

这四种，

transition.subtype 

也有四种

NSString * const kCATransitionFromRight;

NSString * const kCATransitionFromLeft;

NSString * const kCATransitionFromTop;

NSString * const kCATransitionFromBottom;

 

 

 

3、UIView的 + (void)animateWithDuration

:(NSTimeInterval)duration animations:(void(^)(void))animations completion:(void (^)(BOOL finished))completion

方法。

这个方法是在iOS4.0之后才支持的。

比 1 里的UIView的方法简洁方便使用。

DidView里添加moveView。

   moveView = [[UIView alloc] initWithFrame:CGRectMake(10, 180, 200, 40)];

   moveView.backgroundColor = [UIColor blackColor];

   [self.view addSubview:moveView];

- (void)changeUIView3{

   [UIView animateWithDuration:3 animations:^(void){

       moveView.frame = CGRectMake(10, 270, 200, 40);

   }completion:^(BOOL finished){

       UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 40,40)];

       label.backgroundColor = [UIColor blackColor];

       [self.view addSubview:label];

    }];

}

然后用UIView animateWithDuration动画移动，移动动画完毕后添加一个Label。

3.2、 animateWithDuration的嵌套使用

- (void)changeUIView3{

 

   

   [UIView animateWithDuration:2

                          delay:0

                       options:UIViewAnimationOptionCurveEaseOut animations:^(void){

       moveView.alpha = 0.0;

   }completion:^(BOOL finished){

       [UIView animateWithDuration:1

                              delay:1.0

                           options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat

                         animations:^(void){

                             [UIViewsetAnimationRepeatCount:2.5];

                             moveView.alpha =1.0;

                         }completion:^(BOOLfinished){

                            

                        }];

       

    }];

}

这个嵌套的效果是先把view变成透明，在从透明变成不透明，重复2.5次透明到不透明的效果。

 

 

 

补充：

UIView 中的三维坐标系

 

    //普通的组件添加方式，不考虑多个图层

   [self.view addSubview:infoButton];

   //在插入组件的时候考虑组件在多个图层中如何排列

   [self.view insertSubview:mainViewController aboveSubview:infoButton];

   [self.view insertSubview:infoButton atIndex:100];

   [self.view insertSubview:mainViewController.view belowSubview:infoButton];

代码下载地址http://vdisk.weibo.com/s/IdBMg