iOS開發UI篇—核心動畫(轉場動畫和組動畫

iOS開發UI篇—核心動畫(轉場動畫和組動畫)

1、轉場動畫簡單介紹

CAAnimation的子類，用於作轉場動畫，可以爲層提供移出屏幕和移入屏幕的動畫效果。iOS比Mac OS X的轉場動畫效果少一點

UINavigationController就是經過CATransition實現了將控制器的視圖推入屏幕的動畫效果

屬性解析:

type：動畫過渡類型

subtype：動畫過渡方向

startProgress：動畫起點(在總體動畫的百分比)

endProgress：動畫終點(在總體動畫的百分比)

 

2、轉場動畫代碼示例

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

點擊上一張，或者下一張的時候，展現對應的動畫效果。

3、組動畫簡單說明

CAAnimation的子類，能夠保存一組動畫對象，將CAAnimationGroup對象加入層後，組中全部動畫對象能夠同時併發運行

屬性解析：

animations：用來保存一組動畫對象的NSArray

默認狀況下，一組動畫對象是同時運行的，也能夠經過設置動畫對象的beginTime屬性來更改動畫的開始時間

4、分組動畫代碼示例

代碼：

 1 #import "YYViewController.h"  2  3 @interface YYViewController ()  4 @property (weak, nonatomic) IBOutlet UIView *iconView;  5  6 @end  7  8 @implementation NJViewController  9 10 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 11 { 12 13 // 平移動畫 14 CABasicAnimation *a1 = [CABasicAnimation animation]; 15 a1.keyPath = @"transform.translation.y"; 16 a1.toValue = @(100); 17 // 縮放動畫 18 CABasicAnimation *a2 = [CABasicAnimation animation]; 19 a2.keyPath = @"transform.scale"; 20 a2.toValue = @(0.0); 21 // 旋轉動畫 22 CABasicAnimation *a3 = [CABasicAnimation animation]; 23 a3.keyPath = @"transform.rotation"; 24 a3.toValue = @(M_PI_2); 25 26 // 組動畫 27 CAAnimationGroup *groupAnima = [CAAnimationGroup animation]; 28 29 groupAnima.animations = @[a1, a2, a3]; 30 31 //設置組動畫的時間 32 groupAnima.duration = 2; 33 groupAnima.fillMode = kCAFillModeForwards; 34 groupAnima.removedOnCompletion = NO; 35 36  [self.iconView.layer addAnimation:groupAnima forKey:nil]; 37 } 38 39 @end

說明：平移-旋轉-縮放做爲一組動畫一塊兒執行。

執行效果：