iOS開發UI篇—核心動畫(轉場動畫群組動畫)
一、轉場動畫簡單介紹
CAAnimation的子類,用于做轉場動畫,能夠為層提供移出螢幕和移入螢幕的動畫效果。iOS比Mac OS X的轉場動畫效果少一點
UINavigationController就是通過CATransition實作了将控制器的視圖推入螢幕的動畫效果
屬性解析:
type:動畫過渡類型
subtype:動畫過渡方向
startProgress:動畫起點(在整體動畫的百分比)
endProgress:動畫終點(在整體動畫的百分比)
二、轉場動畫代碼示例
1.界面搭建

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
點選上一張,或者下一張的時候,展示對應的動畫效果。
三、組動畫簡單說明
CAAnimation的子類,可以儲存一組動畫對象,将CAAnimationGroup對象加入層後,組中所有動畫對象可以同時并發運作
屬性解析:
animations:用來儲存一組動畫對象的NSArray
預設情況下,一組動畫對象是同時運作的,也可以通過設定動畫對象的beginTime屬性來更改動畫的開始時間
四、分組動畫代碼示例
代碼:
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
說明:平移-旋轉-縮放作為一組動畫一起執行。
執行效果: