CABasicAnimation的基本使用方法(移動·旋轉·放大·縮小)
阿新 • • 發佈:2017-12-06
min nts var enum 就是 too 基本 moved ios
CABasicAnimation的基本使用方法(移動·旋轉·放大·縮小)
CABasicAnimation類的使用方式就是基本的關鍵幀動畫。
所謂關鍵幀動畫,就是將Layer的屬性作為KeyPath來註冊,指定動畫的起始幀和結束幀,然後自動計算和實現中間的過渡動畫的一種動畫方式。
CABasicAnimation的基本使用順序
1.引用QuartzCore.framework
將"QuartzCore.framework"這個庫添加到項目中。並且在需要使用CABaseAnimation類的地方import頭文件。
[objc] view plain copy
- #import <QuartzCore/QuartzCore.h>
2.CABaseAnimation的實例化以及關鍵路徑的註冊
使用"animationWithKeyPath:"方法進行CABasicAnimation的實例化,並指定Layer的屬性作為關鍵路徑來註冊。
[objc] view plain copy
- // 指定position屬性
- CABasicAnimation *animation =
- [CABasicAnimation animationWithKeyPath:@"position"];
3.設定動畫
設定動畫的屬性。以下是屬性及其對應的說明:
屬性 | 說明 |
---|---|
duration | 動畫時長(秒為單位)(註:此處與原文有出入) |
repeatCount | 重復次數。永久重復的話設置為HUGE_VALF。 |
beginTime | 指定動畫開始時間。從開始指定延遲幾秒執行的話,請設置為 「CACurrentMediaTime() + 秒數」的形式。 |
timingFunction | 設定動畫的速度變化 |
autoreverses | 動畫結束時是否執行逆動畫 |
例:
[objc] view plain copy
- animation.duration = 2.5; // 動畫持續時間
- animation.repeatCount = 1; // 不重復
- animation.beginTime = CACurrentMediaTime() + 2; // 2秒後執行
- animation.autoreverses = YES; // 結束後執行逆動畫
- // 動畫先加速後減速
- animation.timingFunction =
- [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
4.設定動畫的開始幀和結束幀
設定動畫開始和結束幀時的狀態。設定的值會變為KeyPath所指定的屬性的值。
屬性 | 說明 |
---|---|
fromValue | 開始值 |
toValue | 終了值(絶対値) |
byValue | 終了值(相對值) |
例:
[objc] view plain copy
- // 指定position屬性(移動)
- CABasicAnimation *animation =
- [CABasicAnimation animationWithKeyPath:@"position"];
- ???
- // 設定動畫起始幀和結束幀
- animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; // 起始點
- animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 終了點
5.添加動畫
為Layer添加設置完成的動畫,可以給Key指定任意名字。
[objc] view plain copy
- [myView.layer addAnimation:animation forKey:@"move-layer"];
其他.動畫結束後回到初始狀態的現象的解決方法
用CABasicAnimation執行動畫,在動畫結束後會回歸動畫開始前的狀態。想要解決的話,必須設置“removedOnCompletion”和“fillMode”這兩個屬性。
[objc] view plain copy
- // 動畫終了後不返回初始狀態
- animation.removedOnCompletion = NO;
- animation.fillMode = kCAFillModeForwards;
CABasicAnimation的使用示例
實際上CABasicAnimation有很多種使用方法,以下將一一列舉。
移動動畫
移動動畫的代碼如下:[objc] view plain copy
- /* 移動 */
- CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
- // 動畫選項的設定
- animation.duration = 2.5; // 持續時間
- animation.repeatCount = 1; // 重復次數
- // 起始幀和終了幀的設定
- animation.fromValue = [NSValue valueWithCGPoint:myView.layer.position]; // 起始幀
- animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 終了幀
- // 添加動畫
- [myView.layer addAnimation:animation forKey:@"move-layer"];
旋轉動畫
旋轉動畫的代碼如下:[objc] view plain copy
- /* 旋轉 */
- // 對Y軸進行旋轉(指定Z軸的話,就和UIView的動畫一樣繞中心旋轉)
- CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
- // 設定動畫選項
- animation.duration = 2.5; // 持續時間
- animation.repeatCount = 1; // 重復次數
- // 設定旋轉角度
- animation.fromValue = [NSNumber numberWithFloat:0.0]; // 起始角度
- animation.toValue = [NSNumber numberWithFloat:22 * M_PI]; // 終止角度
- // 添加動畫
- [myView.layer addAnimation:animation forKey:@"rotate-layer"];
縮放動畫
縮放動畫的代碼如下:
[objc] view plain copy
- /* 放大縮小 */
- // 設定為縮放
- CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
- // 動畫選項設定
- animation.duration = 2.5; // 動畫持續時間
- animation.repeatCount = 1; // 重復次數
- animation.autoreverses = YES; // 動畫結束時執行逆動畫
- // 縮放倍數
- animation.fromValue = [NSNumber numberWithFloat:1.0]; // 開始時的倍率
- animation.toValue = [NSNumber numberWithFloat:2.0]; // 結束時的倍率
- // 添加動畫
- [myView.layer addAnimation:animation forKey:@"scale-layer"];
組合動畫
使用CAAnimationGroup類進行復數動畫的組合。代碼如下:
[objc] view plain copy
- /* 動畫1(在X軸方向移動) */
- CABasicAnimation *animation1 =
- [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
- // 終點設定
- animation1.toValue = [NSNumber numberWithFloat:80];; // 終點
- /* 動畫2(繞Z軸中心旋轉) */
- CABasicAnimation *animation2 =
- [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
- // 設定旋轉角度
- animation2.fromValue = [NSNumber numberWithFloat:0.0]; // 開始時的角度
- animation2.toValue = [NSNumber numberWithFloat:44 * M_PI]; // 結束時的角度
- /* 動畫組 */
- CAAnimationGroup *group = [CAAnimationGroup animation];
- // 動畫選項設定
- group.duration = 3.0;
- group.repeatCount = 1;
- // 添加動畫
- group.animations = [NSArray arrayWithObjects:animation1, animation2, nil nil];
- [myView.layer addAnimation:group forKey:@"move-rotate-layer"];
捕獲動畫開始時和終了時的事件
博主:設定委托對象,實現委托方法,如下:
[objc] view plain copy
- /* 移動 */
- CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
- animation.delegate = self; // 指定委托對象
- // 設定動畫選項
- animation.duration = 2.5; // 動畫時長
- animation.repeatCount = 1; // 重復次數
- // 終點設定
- animation.toValue = [NSNumber numberWithFloat:100];; // 終點
- // 添加動畫
- [myView.layer addAnimation:animation forKey:@"move-layer"];
- ???
- /**
- * 動畫開始時
- */
- - (void)animationDidStart:(CAAnimation *)theAnimation
- {
- NSLog(@"begin");
- }
- /**
- * 動畫結束時
- */
- - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
- {
- NSLog(@"end");
- }
CABasicAnimation使用時候的註意點
CABasicAnimation正在進行動畫的時候,點擊了Home按鈕後再回到app的時候,動畫會被清空。
Objective-C的示例程序
使用CABasicAnimation實現關鍵幀動畫的示例程序如下:
[objc] view plain copy
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- // 圖像顯示
- UIImage *image = [UIImage imageNamed:@"image01.png"];
- UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
- imageView.center = CGPointMake(160, 240);
- [self.view addSubview:imageView];
- /* 移動 */
- CABasicAnimation *animation1 =
- [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
- // 起止點的設定
- animation1.toValue = [NSNumber numberWithFloat:100];; // 終點
- /* 旋轉 */
- CABasicAnimation *animation2 =
- [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
- // 繞x軸轉3圈
- animation2.toValue = [NSNumber numberWithFloat:66 * M_PI]; // 結束時的角度
- /* 動畫組 */
- CAAnimationGroup *group = [CAAnimationGroup animation];
- group.delegate = self;
- group.duration = 5.0;
- group.repeatCount = 1;
- // 動畫結束後不變回初始狀態
- group.removedOnCompletion = NO;
- group.fillMode = kCAFillModeForwards;
- // 添加動畫
- group.animations = [NSArray arrayWithObjects:animation1, animation2, nil nil];
- [imageView.layer addAnimation:group forKey:@"move-rotate-layer"];
- }
- /**
- * 動畫開始時
- */
- - (void)animationDidStart:(CAAnimation *)theAnimation
- {
- NSLog(@"begin");
- }
- /**
- * 動畫結束時
- */
- - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
- {
- NSLog(@"end");
- }
示例程序的執行結果
Objective-C的示例程序的執行結果如下:
控制臺輸出如下:
[plain] view plain copy
- begin
- end
CABasicAnimation的基本使用方法(移動·旋轉·放大·縮小)