1. 程式人生 > >CABasicAnimation的基本使用方法(移動·旋轉·放大·縮小)

CABasicAnimation的基本使用方法(移動·旋轉·放大·縮小)

min nts var enum 就是 too 基本 moved ios

CABasicAnimation的基本使用方法(移動·旋轉·放大·縮小)

CABasicAnimation類的使用方式就是基本的關鍵幀動畫。

所謂關鍵幀動畫,就是將Layer的屬性作為KeyPath來註冊,指定動畫的起始幀和結束幀,然後自動計算和實現中間的過渡動畫的一種動畫方式。

CABasicAnimation的基本使用順序

1.引用QuartzCore.framework

將"QuartzCore.framework"這個庫添加到項目中。並且在需要使用CABaseAnimation類的地方import頭文件。

[objc] view plain copy
  1. #import <QuartzCore/QuartzCore.h>


2.CABaseAnimation的實例化以及關鍵路徑的註冊

使用"animationWithKeyPath:"方法進行CABasicAnimation的實例化,並指定Layer的屬性作為關鍵路徑來註冊。

[objc] view plain copy
  1. // 指定position屬性
  2. CABasicAnimation *animation =
  3. [CABasicAnimation animationWithKeyPath:@"position"];

3.設定動畫

設定動畫的屬性。以下是屬性及其對應的說明:

屬性說明
duration 動畫時長(秒為單位)(註:此處與原文有出入)
repeatCount 重復次數。永久重復的話設置為HUGE_VALF。
beginTime 指定動畫開始時間。從開始指定延遲幾秒執行的話,請設置為
「CACurrentMediaTime() + 秒數」的形式。
timingFunction 設定動畫的速度變化
autoreverses 動畫結束時是否執行逆動畫

例:

[objc] view plain copy
  1. animation.duration = 2.5; // 動畫持續時間
  2. animation.repeatCount = 1; // 不重復
  3. animation.beginTime = CACurrentMediaTime() + 2; // 2秒後執行
  4. animation.autoreverses = YES; // 結束後執行逆動畫
  5. // 動畫先加速後減速
  6. animation.timingFunction =
  7. [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

4.設定動畫的開始幀和結束幀

設定動畫開始和結束幀時的狀態。設定的值會變為KeyPath所指定的屬性的值。

屬性說明
fromValue 開始值
toValue 終了值(絶対値)
byValue 終了值(相對值)

例:

[objc] view plain copy
  1. // 指定position屬性(移動)
  2. CABasicAnimation *animation =
  3. [CABasicAnimation animationWithKeyPath:@"position"];
  4. ???
  5. // 設定動畫起始幀和結束幀
  6. animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; // 起始點
  7. animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 終了點

5.添加動畫

為Layer添加設置完成的動畫,可以給Key指定任意名字。

[objc] view plain copy
  1. [myView.layer addAnimation:animation forKey:@"move-layer"];

其他.動畫結束後回到初始狀態的現象的解決方法

用CABasicAnimation執行動畫,在動畫結束後會回歸動畫開始前的狀態。想要解決的話,必須設置“removedOnCompletion”和“fillMode”這兩個屬性。

[objc] view plain copy
  1. // 動畫終了後不返回初始狀態
  2. animation.removedOnCompletion = NO;
  3. animation.fillMode = kCAFillModeForwards;

CABasicAnimation的使用示例

實際上CABasicAnimation有很多種使用方法,以下將一一列舉。

移動動畫

移動動畫的代碼如下:

[objc] view plain copy
  1. /* 移動 */
  2. CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
  3. // 動畫選項的設定
  4. animation.duration = 2.5; // 持續時間
  5. animation.repeatCount = 1; // 重復次數
  6. // 起始幀和終了幀的設定
  7. animation.fromValue = [NSValue valueWithCGPoint:myView.layer.position]; // 起始幀
  8. animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 終了幀
  9. // 添加動畫
  10. [myView.layer addAnimation:animation forKey:@"move-layer"];

旋轉動畫

旋轉動畫的代碼如下:

[objc] view plain copy
  1. /* 旋轉 */
  2. // 對Y軸進行旋轉(指定Z軸的話,就和UIView的動畫一樣繞中心旋轉)
  3. CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
  4. // 設定動畫選項
  5. animation.duration = 2.5; // 持續時間
  6. animation.repeatCount = 1; // 重復次數
  7. // 設定旋轉角度
  8. animation.fromValue = [NSNumber numberWithFloat:0.0]; // 起始角度
  9. animation.toValue = [NSNumber numberWithFloat:22 * M_PI]; // 終止角度
  10. // 添加動畫
  11. [myView.layer addAnimation:animation forKey:@"rotate-layer"];

縮放動畫

縮放動畫的代碼如下:

[objc] view plain copy
  1. /* 放大縮小 */
  2. // 設定為縮放
  3. CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
  4. // 動畫選項設定
  5. animation.duration = 2.5; // 動畫持續時間
  6. animation.repeatCount = 1; // 重復次數
  7. animation.autoreverses = YES; // 動畫結束時執行逆動畫
  8. // 縮放倍數
  9. animation.fromValue = [NSNumber numberWithFloat:1.0]; // 開始時的倍率
  10. animation.toValue = [NSNumber numberWithFloat:2.0]; // 結束時的倍率
  11. // 添加動畫
  12. [myView.layer addAnimation:animation forKey:@"scale-layer"];

組合動畫

使用CAAnimationGroup類進行復數動畫的組合。代碼如下:

[objc] view plain copy
  1. /* 動畫1(在X軸方向移動) */
  2. CABasicAnimation *animation1 =
  3. [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
  4. // 終點設定
  5. animation1.toValue = [NSNumber numberWithFloat:80];; // 終點
  6. /* 動畫2(繞Z軸中心旋轉) */
  7. CABasicAnimation *animation2 =
  8. [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
  9. // 設定旋轉角度
  10. animation2.fromValue = [NSNumber numberWithFloat:0.0]; // 開始時的角度
  11. animation2.toValue = [NSNumber numberWithFloat:44 * M_PI]; // 結束時的角度
  12. /* 動畫組 */
  13. CAAnimationGroup *group = [CAAnimationGroup animation];
  14. // 動畫選項設定
  15. group.duration = 3.0;
  16. group.repeatCount = 1;
  17. // 添加動畫
  18. group.animations = [NSArray arrayWithObjects:animation1, animation2, nil nil];
  19. [myView.layer addAnimation:group forKey:@"move-rotate-layer"];

捕獲動畫開始時和終了時的事件

博主:設定委托對象,實現委托方法,如下:

[objc] view plain copy
  1. /* 移動 */
  2. CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
  3. animation.delegate = self; // 指定委托對象
  4. // 設定動畫選項
  5. animation.duration = 2.5; // 動畫時長
  6. animation.repeatCount = 1; // 重復次數
  7. // 終點設定
  8. animation.toValue = [NSNumber numberWithFloat:100];; // 終點
  9. // 添加動畫
  10. [myView.layer addAnimation:animation forKey:@"move-layer"];
  11. ???
  12. /**
  13. * 動畫開始時
  14. */
  15. - (void)animationDidStart:(CAAnimation *)theAnimation
  16. {
  17. NSLog(@"begin");
  18. }
  19. /**
  20. * 動畫結束時
  21. */
  22. - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
  23. {
  24. NSLog(@"end");
  25. }

CABasicAnimation使用時候的註意點

CABasicAnimation正在進行動畫的時候,點擊了Home按鈕後再回到app的時候,動畫會被清空。

Objective-C的示例程序

使用CABasicAnimation實現關鍵幀動畫的示例程序如下:

[objc] view plain copy
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. // 圖像顯示
  5. UIImage *image = [UIImage imageNamed:@"image01.png"];
  6. UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
  7. imageView.center = CGPointMake(160, 240);
  8. [self.view addSubview:imageView];
  9. /* 移動 */
  10. CABasicAnimation *animation1 =
  11. [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
  12. // 起止點的設定
  13. animation1.toValue = [NSNumber numberWithFloat:100];; // 終點
  14. /* 旋轉 */
  15. CABasicAnimation *animation2 =
  16. [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
  17. // 繞x軸轉3圈
  18. animation2.toValue = [NSNumber numberWithFloat:66 * M_PI]; // 結束時的角度
  19. /* 動畫組 */
  20. CAAnimationGroup *group = [CAAnimationGroup animation];
  21. group.delegate = self;
  22. group.duration = 5.0;
  23. group.repeatCount = 1;
  24. // 動畫結束後不變回初始狀態
  25. group.removedOnCompletion = NO;
  26. group.fillMode = kCAFillModeForwards;
  27. // 添加動畫
  28. group.animations = [NSArray arrayWithObjects:animation1, animation2, nil nil];
  29. [imageView.layer addAnimation:group forKey:@"move-rotate-layer"];
  30. }
  31. /**
  32. * 動畫開始時
  33. */
  34. - (void)animationDidStart:(CAAnimation *)theAnimation
  35. {
  36. NSLog(@"begin");
  37. }
  38. /**
  39. * 動畫結束時
  40. */
  41. - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
  42. {
  43. NSLog(@"end");
  44. }

示例程序的執行結果

Objective-C的示例程序的執行結果如下:

技術分享圖片

控制臺輸出如下:

[plain] view plain copy
    1. begin
    2. end

CABasicAnimation的基本使用方法(移動·旋轉·放大·縮小)