iOS開發UI篇—核心動畫(基礎動畫)
1、簡單介紹app
CAPropertyAnimation的子類動畫
屬性解析:atom
fromValue：keyPath相應屬性的初始值spa
toValue：keyPath相應屬性的結束值3d
隨着動畫的進行，在長度爲duration的持續時間內，keyPath相應屬性的值從fromValue漸漸地變爲toValue代理
若是fillMode=kCAFillModeForwards和removedOnComletion=NO，那麼在動畫執行完畢後，圖層會保持顯示動畫執行後的狀態。但在實質上，圖層的屬性值仍是動畫執行前的初始值，並無真正被改變。code
好比，CALayer的position初始值爲(0,0)，CABasicAnimation的fromValue爲(10,10)，toValue爲(100,100)，雖然動畫執行完畢後圖層保持在(100,100)這個位置，實質上圖層的position仍是爲(0,0)orm
2、平移動畫對象
代碼示例：blog
1 //
2 // YYViewController.m
3 // 07-核心動畫（基礎動畫）
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,strong)CALayer *myLayer;
13 @end
14
15 @implementation YYViewController
16
17 - (void)viewDidLoad
18 {
19 [super viewDidLoad];
20
21 //建立layer
22 CALayer *myLayer=[CALayer layer];
23 //設置layer的屬性
24 myLayer.bounds=CGRectMake(0, 0, 50, 80);
25 myLayer.backgroundColor=[UIColor yellowColor].CGColor;
26 myLayer.position=CGPointMake(50, 50);
27 myLayer.anchorPoint=CGPointMake(0, 0);
28 myLayer.cornerRadius=20;
29 //添加layer
30 [self.view.layer addSublayer:myLayer];
31 self.myLayer=myLayer;
32 }
33
34 //設置動畫（基礎動畫）
35 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
36 {
37 //1.建立核心動畫
38 // CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
39 CABasicAnimation *anima=[CABasicAnimation animation];
40
41 //1.1告訴系統要執行什麼樣的動畫
42 anima.keyPath=@"position";
43 //設置經過動畫，將layer從哪兒移動到哪兒
44 anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
45 anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
46
47 //1.2設置動畫執行完畢以後不刪除動畫
48 anima.removedOnCompletion=NO;
49 //1.3設置保存動畫的最新狀態
50 anima.fillMode=kCAFillModeForwards;
51
52 //2.添加核心動畫到layer
53 [self.myLayer addAnimation:anima forKey:nil];
54
55 }
@end
代碼說明：
第42行設置的keyPath是@"position"，說明要修改的是CALayer的position屬性，也就是會執行平移動畫
第44，45行，這裏的屬性接收的時id類型的參數，所以並不能直接使用CGPoint這種結構體類型，而是要先包裝成NSValue對象後再使用。
默認狀況下，動畫執行完畢後，動畫會自動從CALayer上移除，CALayer又會回到原來的狀態。爲了保持動畫執行後的狀態，能夠加入第48，50行代碼
byValue和toValue的區別，前者是在當前的位置上增長多少，後者是到指定的位置。
執行效果：
設置代理：設置動畫的代理，能夠監聽動畫的執行過程，這裏設置控制器爲代理。
代碼示例：
1 #import "YYViewController.h"
2
3 @interface YYViewController ()
4 @property(nonatomic,strong)CALayer *myLayer;
5 @end
6
7 @implementation YYViewController
8
9 - (void)viewDidLoad
10 {
11 [super viewDidLoad];
12
13 //建立layer
14 CALayer *myLayer=[CALayer layer];
15 //設置layer的屬性
16 myLayer.bounds=CGRectMake(0, 0, 50, 80);
17 myLayer.backgroundColor=[UIColor yellowColor].CGColor;
18 myLayer.position=CGPointMake(50, 50);
19 myLayer.anchorPoint=CGPointMake(0, 0);
20 myLayer.cornerRadius=20;
21 //添加layer
22 [self.view.layer addSublayer:myLayer];
23 self.myLayer=myLayer;
24 }
25
26 //設置動畫（基礎動畫）
27 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
28 {
29 //1.建立核心動畫
30 // CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
31 CABasicAnimation *anima=[CABasicAnimation animation];
32
33 //1.1告訴系統要執行什麼樣的動畫
34 anima.keyPath=@"position";
35 //設置經過動畫，將layer從哪兒移動到哪兒
36 anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
37 anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
38
39 //1.2設置動畫執行完畢以後不刪除動畫
40 anima.removedOnCompletion=NO;
41 //1.3設置保存動畫的最新狀態
42 anima.fillMode=kCAFillModeForwards;
43 anima.delegate=self;
44 //打印
45 NSString *str=NSStringFromCGPoint(self.myLayer.position);
46 NSLog(@"執行前：%@",str);
47
48 //2.添加核心動畫到layer
49 [self.myLayer addAnimation:anima forKey:nil];
50
51 }
52
53 -(void)animationDidStart:(CAAnimation *)anim
54 {
55 NSLog(@"開始執行動畫");
56 }
57
58 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
59 {
60 //動畫執行完畢，打印執行完畢後的position值
61 NSString *str=NSStringFromCGPoint(self.myLayer.position);
62 NSLog(@"執行後：%@",str);
63 }
64
65 @end
打印position的屬性值，驗證圖層的屬性值仍是動畫執行前的初始值{50，50}，並無真正被改變爲{200，300}。
3、縮放動畫
實現縮放動畫的代碼示例：
1 //
2 // YYViewController.m
3 // 08-核心動畫平移
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,strong)CALayer *myLayer;
13 @end
14
15 @implementation YYViewController
16
17 - (void)viewDidLoad
18 {
19 [super viewDidLoad];
20
21 //建立layer
22 CALayer *myLayer=[CALayer layer];
23 //設置layer的屬性
24 myLayer.bounds=CGRectMake(0, 0, 150, 60);
25 myLayer.backgroundColor=[UIColor yellowColor].CGColor;
26 myLayer.position=CGPointMake(50, 50);
27 myLayer.anchorPoint=CGPointMake(0, 0);
28 myLayer.cornerRadius=40;
29 //添加layer
30 [self.view.layer addSublayer:myLayer];
31 self.myLayer=myLayer;
32 }
33
34 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
35 {
36 //1.建立動畫
37 CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"];
38 //1.1設置動畫執行時間
39 anima.duration=2.0;
40 //1.2設置動畫執行完畢後不刪除動畫
41 anima.removedOnCompletion=NO;
42 //1.3設置保存動畫的最新狀態
43 anima.fillMode=kCAFillModeForwards;
44 //1.4修改屬性，執行動畫
45 anima.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
46 //2.添加動畫到layer
47 [self.myLayer addAnimation:anima forKey:nil];
48 }
49
50 @end
實現效果：
4、旋轉動畫
代碼示例：
1 //
2 // YYViewController.m
3 // 09-核心動畫旋轉
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,strong)CALayer *myLayer;
13 @end
14
15 @implementation YYViewController
16 - (void)viewDidLoad
17 {
18 [super viewDidLoad];
19
20 //建立layer
21 CALayer *myLayer=[CALayer layer];
22 //設置layer的屬性
23 myLayer.bounds=CGRectMake(0, 0, 150, 60);
24 myLayer.backgroundColor=[UIColor yellowColor].CGColor;
25 myLayer.position=CGPointMake(50, 50);
26 myLayer.anchorPoint=CGPointMake(0, 0);
27 myLayer.cornerRadius=40;
28 //添加layer
29 [self.view.layer addSublayer:myLayer];
30 self.myLayer=myLayer;
31 }
32
33 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
34 {
35 //1.建立動畫
36 CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"transform"];
37 //1.1設置動畫執行時間
38 anima.duration=2.0;
39 //1.2修改屬性，執行動畫
40 anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];
41 //1.3設置動畫執行完畢後不刪除動畫
42 anima.removedOnCompletion=NO;
43 //1.4設置保存動畫的最新狀態
44 anima.fillMode=kCAFillModeForwards;
45
46 //2.添加動畫到layer
47 [self.myLayer addAnimation:anima forKey:nil];
48 }
49 @end
實現效果：
提示：若是要讓圖形以2D的方式旋轉，只須要把CATransform3DMakeRotation在z方向上的值改成1便可。
anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];
4、補充
能夠經過transform（KVC）的方式來進行設置。
代碼示例（平移）：
1 #import "YYViewController.h"
2
3 @interface YYViewController ()
4 @property(nonatomic,strong)CALayer *myLayer;
5 @end
6
7 @implementation YYViewController
8 - (void)viewDidLoad
9 {
10 [super viewDidLoad];
11
12 //建立layer
13 CALayer *myLayer=[CALayer layer];
14 //設置layer的屬性
15 myLayer.bounds=CGRectMake(0, 0, 150, 60);
16 myLayer.backgroundColor=[UIColor yellowColor].CGColor;
17 myLayer.position=CGPointMake(50, 50);
18 myLayer.anchorPoint=CGPointMake(0, 0);
19 myLayer.cornerRadius=40;
20 //添加layer
21 [self.view.layer addSublayer:myLayer];
22 self.myLayer=myLayer;
23 }
24
25 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
26 {
27 //1.建立動畫
28 CABasicAnimation *anima=[CABasicAnimation animation];
29 anima.keyPath=@"transform";
30 //1.1設置動畫執行時間
31 anima.duration=2.0;
32 //1.2修改屬性，執行動畫
33
34 anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1)];
35 //1.3設置動畫執行完畢後不刪除動畫
36 anima.removedOnCompletion=NO;
37 //1.4設置保存動畫的最新狀態
38 anima.fillMode=kCAFillModeForwards;
39
40 //2.添加動畫到layer
41 [self.myLayer addAnimation:anima forKey:nil];
42 }
實現效果：
繪製的圖形在y的方向上移動100個單位。
相關文章
- 1. iOS開發UI篇—核心動畫(基礎動畫)
- 2. iOS開發UI篇—核心動畫(關鍵幀動畫)
- 3. iOS開發UI篇—核心動畫(UIView封裝動畫)
- 4. IOS開發核心動畫篇---核心動畫簡介
- 5. iOS開發UI篇—核心動畫(轉場動畫和組動畫)
- 6. iOS開發UI篇—核心動畫(轉場動畫和組動畫
- 7. iOS基礎 - 核心動畫
- 8. iOS Core Animation（核心動畫基礎篇）
- 9. iOS核心動畫(基礎篇)
- 10. ios核心動畫之基本動畫
- 更多相關文章...
- • ionic 加載動畫 - ionic 教程
- • PHP imagearc - 畫橢圓弧 - PHP參考手冊
- • PHP開發工具
- • 算法總結-滑動窗口
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
