iOS开发——动画编程OC篇&（四）转场动画

转场 动画

一、转场动画简单介绍

CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点

UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果

属性解析:

type：动画过渡类型

subtype：动画过渡方向

startProgress：动画起点(在整体动画的百分比)

endProgress：动画终点(在整体动画的百分比)

 

二、转场动画代码示例

1.界面搭建

2.实现代码

 1 //  2 // YYViewController.m  3 // 13-转场动画  4 //  5 // Created by apple on 14-6-21.  6 // Copyright (c) 2014年 itcase. All rights reserved.  7 //  8  9 #import "YYViewController.h" 10 11 @interface YYViewController () 12 @property(nonatomic,assign) int index; 13 @property (weak, nonatomic) IBOutlet UIImageView *iconView; 14 15 - (IBAction)preOnClick:(UIButton *)sender; 16 - (IBAction)nextOnClick:(UIButton *)sender; 17 18 @end 19 20 @implementation YYViewController 21 22 - (void)viewDidLoad 23 { 24  [super viewDidLoad]; 25 self.index=1; 26 27 } 28 29 - (IBAction)preOnClick:(UIButton *)sender { 30 self.index--; 31 if (self.index<1) { 32 self.index=7; 33  } 34 self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]]; 35 36 //创建核心动画 37 CATransition *ca=[CATransition animation]; 38 //告诉要执行什么动画 39 //设置过度效果 40 ca.type=@"cube"; 41 //设置动画的过度方向（向左） 42 ca.subtype=kCATransitionFromLeft; 43 //设置动画的时间 44 ca.duration=2.0; 45 //添加动画 46  [self.iconView.layer addAnimation:ca forKey:nil]; 47 } 48 49 //下一张 50 - (IBAction)nextOnClick:(UIButton *)sender { 51 self.index++; 52 if (self.index>7) { 53 self.index=1; 54  } 55 self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]]; 56 57 //1.创建核心动画 58 CATransition *ca=[CATransition animation]; 59 60 //1.1告诉要执行什么动画 61 //1.2设置过度效果 62 ca.type=@"cube"; 63 //1.3设置动画的过度方向（向右） 64 ca.subtype=kCATransitionFromRight; 65 //1.4设置动画的时间 66 ca.duration=2.0; 67 //1.5设置动画的起点 68 ca.startProgress=0.5; 69 //1.6设置动画的终点 70 // ca.endProgress=0.5; 71 72 //2.添加动画 73  [self.iconView.layer addAnimation:ca forKey:nil]; 74 } 75 @end

点击上一张，或者下一张的时候，展示对应的动画效果。

 

单视图转场

 1 - (void)viewDidLoad

 2 {

 3     [super viewDidLoad];

 4 

 5     // 实例化imageView

 6     UIImageView *imageView = [[UIImageView alloc]initWithFrame:self.view.bounds];

 7     UIImage *image = [UIImage imageNamed:@"1.jpg"];

 8     [imageView setImage:image];

 9     

10     [self.view addSubview:imageView];

11     

12     self.imageView = imageView;

13     

14     // 3. 初始化数据

15     NSMutableArray *arrayM = [NSMutableArray arrayWithCapacity:9];

16     

17     for (NSInteger i = 1; i < 10; i++) {

18         NSString *fileName = [NSString stringWithFormat:@"%d.jpg", i];

19         UIImage *image = [UIImage imageNamed:fileName];

20         

21         [arrayM addObject:image];

22     }

23     

24     self.imageList = arrayM;

25 }

26 

27 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

28 {

29     [UIView transitionWithView:self.imageView duration:1.0f options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{

30         

31         // 在此设置视图反转之后显示的内容

32         

33         self.imageView.tag = (self.imageView.tag + 1) % self.imageList.count;

34         [self.imageView setImage:self.imageList[self.imageView.tag]];

35     } completion:^(BOOL finished) {

36         NSLog(@"反转完成");

37     }];

38     

39 }

 

多视图转场

 1 /*

 2  双视图转场时，转出视图的父视图会被释放

 3  

 4  强烈建议使用但视图转场，如果单视图转场无法满足需求，通常可以考虑视图控制器的切换

 5  */

 6 - (void)viewDidLoad

 7 {

 8     [super viewDidLoad];

 9 

10     UIView *view2 = [[UIView alloc]initWithFrame:self.view.bounds];

11     [view2 setBackgroundColor:[UIColor blueColor]];

12     self.subView2 = view2;

13     

14     UIView *view1 = [[UIView alloc]initWithFrame:self.view.bounds];

15     [view1 setBackgroundColor:[UIColor redColor]];

16     [self.view addSubview:view1];

17     self.subView1 = view1;

18 }

19 

20 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

21 {

22     // 在双视图转场时，我们可以根据是否有父视图，来判断谁进谁出

23     UIView *fromView = nil;

24     UIView *toView = nil;

25     

26     if (self.subView1.superview == nil) {

27         // 说明subView1要转入

28         toView = self.subView1;

29         fromView = self.subView2;

30     } else {

31         // 说明subView2要转入

32         toView = self.subView2;

33         fromView = self.subView1;

34     }

35 

36     [UIView transitionFromView:fromView toView:toView duration:1.0f options:UIViewAnimationOptionTransitionFlipFromTop completion:^(BOOL finished) {

37         

38         NSLog(@"转场完成");

39         // 每次转场后，会调整参与转场视图的父视图，因此，参与转场视图的属性，需要是强引用

40         // 转场之后，入场的视图会有两个强引用，一个是视图控制器，另一个是视图

41         NSLog(@"sub view 1 %@", self.subView1.superview);

42         NSLog(@"sub view 2 %@", self.subView2.superview);

43     }];

44 }