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

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

執行效果：