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

最新推荐文章于 2021-07-31 16:44:50 发布

Gaos的BLOG

最新推荐文章于 2021-07-31 16:44:50 发布

阅读量1.1k

点赞数

分类专栏： --------动画

--------动画专栏收录该内容

7 篇文章 0 订阅

订阅专栏

转场动画

一、转场动画简单介绍

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 }