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 @end19 20 @implementation YYViewController21 22 - (void)viewDidLoad23 {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 *)event28 {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 *)event21 {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 }

 

 

 

iOS開發——動畫編程OC篇&（四）轉場動畫