iOS開發UI篇—核心動畫(基礎動畫)

標籤：

iOS開發UI篇—核心動畫(基礎動畫)

一、簡單介紹

CAPropertyAnimation的子類

屬性解析:

fromValue：keyPath相應屬性的初始值

toValue：keyPath相應屬性的結束值

隨著動畫的進行，在長度為duration的期間內，keyPath相應屬性的值從fromValue漸漸地變為toValue

如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那麼在動畫執行完畢後，圖層會保持顯示動畫執行後的狀態。但在實質上，圖層的屬性值還是動畫執行前的初始值，並沒有真正被改變。

比如，CALayer的position初始值為(0,0)，CABasicAnimation的fromValue為(10,10)，toValue為(100,100)，雖然動畫執行完畢後圖層保持在(100,100)這個位置，實質層的position還是為(0,0)

 

二、平移動畫

程式碼範例：

 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 @end14 15 @implementation YYViewController16 17 - (void)viewDidLoad18 {19     [super viewDidLoad];20     21     //建立layer22     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     //添加layer30     [self.view.layer addSublayer:myLayer];31     self.myLayer=myLayer;32 }33 34 //設定動畫（基礎動畫）35 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event36 {37     //1.建立核心動畫38     //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]39     CABasicAnimation *anima=[CABasicAnimation animation];40     41     //1.1告訴系統要執行什麼樣的動畫42     [email protected]"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.添加核心動畫到layer53     [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)viewDidLoad10 {11     [super viewDidLoad];12     13     //建立layer14     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     //添加layer22     [self.view.layer addSublayer:myLayer];23     self.myLayer=myLayer;24 }25 26 //設定動畫（基礎動畫）27 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event28 {29     //1.建立核心動畫30     //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]31     CABasicAnimation *anima=[CABasicAnimation animation];32     33     //1.1告訴系統要執行什麼樣的動畫34     [email protected]"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.添加核心動畫到layer49     [self.myLayer addAnimation:anima forKey:nil];50 51 }52 53 -(void)animationDidStart:(CAAnimation *)anim54 {55     NSLog(@"開始執行動畫");56 }57 58 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag59 {60     //動畫執行完畢，列印執行完畢後的position值61     NSString *str=NSStringFromCGPoint(self.myLayer.position);62     NSLog(@"執行後：%@",str);63 }64 65 @end

列印position的屬性值，驗證圖層的屬性值還是動畫執行前的初始值{50，50}，並沒有真正被改變為{200，300}。

三、縮放動畫

實現縮放動畫的程式碼範例：

 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 @end14 15 @implementation YYViewController16 17 - (void)viewDidLoad18 {19     [super viewDidLoad];20     21     //建立layer22     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     //添加layer30     [self.view.layer addSublayer:myLayer];31     self.myLayer=myLayer;32 }33 34 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event35 {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.添加動畫到layer47     [self.myLayer addAnimation:anima forKey:nil];48 }49 50 @end

實現效果：

  

四、旋轉動畫

程式碼範例：

 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 @end14 15 @implementation YYViewController16 - (void)viewDidLoad17 {18     [super viewDidLoad];19     20     //建立layer21     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     //添加layer29     [self.view.layer addSublayer:myLayer];30     self.myLayer=myLayer;31 }32 33 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event34 {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.添加動畫到layer47     [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)];

四、補充

可以通過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     //建立layer13     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     //添加layer21     [self.view.layer addSublayer:myLayer];22     self.myLayer=myLayer;23 }24 25 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event26 {27     //1.建立動畫28     CABasicAnimation *anima=[CABasicAnimation animation];29     [email protected]"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.添加動畫到layer41     [self.myLayer addAnimation:anima forKey:nil];42 }

實現效果：

繪製的圖形在y的方向上移動100個單位。

    

iOS開發UI篇—核心動畫(基礎動畫)