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

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

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

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

 

CABasicAnimation的基本使用順序

1.引用QuartzCore.framework

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

 

#import <QuartzCore/QuartzCore.h>

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

 

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

 

// 指定position屬性
CABasicAnimation *animation =
    [CABasicAnimation animationWithKeyPath:@"position"];

 

3.設定動畫

 

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

 

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

例：

 

 

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	終了值（相對值）

例：

 

 

// 指定position屬性（移動）
CABasicAnimation *animation =
    [CABasicAnimation animationWithKeyPath:@"position"];

・・・

// 設定動畫起始幀和結束幀
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; // 起始點
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 終了點

 

5.添加動畫

 

爲Layer添加設置完成的動畫，能夠給Key指定任意名字。

 

[myView.layer addAnimation:animation forKey:@"move-layer"];

 

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

 

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

 

// 動畫終了後不返回初始狀態
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;

 

CABasicAnimation的使用示例

 

實際上CABasicAnimation有不少種使用方法，如下將一一列舉。

 

移動動畫

移動動畫的代碼以下：

 

/* 移動 */
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"];

 

 

旋轉動畫

旋轉動畫的代碼以下：

 

/* 旋轉 */

// 對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"];

 

縮放動畫

縮放動畫的代碼以下：

 

 

/* 放大縮小 */

// 設定爲縮放
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類進行復數動畫的組合。代碼以下：

 

/* 動畫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"];

 

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

 

博主：設定委託對象，實現委託方法，以下：

 

/* 移動 */
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實現關鍵幀動畫的示例程序以下：

 

- (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的示例程序的執行結果以下：

控制檯輸出以下：

 

begin
end