CABasicAnimation 的基本寫法

 

CABasicAnimation 或稱 CAAnimation 常使用在製作遊戲或是部份換場中的特殊效果，在撰寫上可以透過 Key-Value 來設定關鍵影格的物件位置與狀態，CAAnimation 將會透過此關鍵影格來執行動畫，下列程式碼將演示旋轉與移動這兩部份的程式碼。

在開始前由於我們有使用到 QuartzCore 的類別，所以必須要先匯入其標頭檔與 Framework。

#import <QuartzCore/QuartzCore.h>

如果不知道如何新增 Framework 的讀者們，可以參考 Xcode 4 新增 Framework 的方法一文。

接下來分別新增兩個按鈕事件並置入以下程式碼。

//旋轉
- (IBAction)onRotationButton:(id)sender {

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

    //動畫速度
    animation.duration = 15.0;

    //次數
    animation.repeatCount = 0.21;

    //設定key值
    animation.toValue = [NSNumber numberWithFloat:-30.0];

    //執行動畫
    [imageView.layer addAnimation:animation forKey:@"transform.rotation.z"];

    //同時對不同軸做旋轉
    animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    animation.duration = 15.0;
    animation.repeatCount = 0.21;
    animation.toValue = [NSNumber numberWithFloat:30.0];
    [imageView.layer addAnimation:animation forKey:@"transform.rotation.x"];
}
//移動
- (IBAction)onTranslationButton:(id)sender {

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
    animation.duration = 1.0;

    //循環
    animation.autoreverses = YES;
    animation.toValue = [NSNumber numberWithFloat:150.0];
    [imageView.layer addAnimation:animation forKey:@"transform.translation.x"];

    animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
    animation.duration = 1.0;
    animation.autoreverses = YES;
    animation.toValue = [NSNumber numberWithFloat:-200.0];
    [imageView.layer addAnimation:animation forKey:@"transform.translation.y"];
}

如果重複次數希望是無限可以採用以下寫法。

animation.repeatCount = FLT_MAX;

上述兩個函式中的 Key 雖然說是字串型態，但是卻不可以任意填寫，其他相關的 Key 可以參考官方的 Core Animation Extensions To Key-Value Coding 部份。

最後值得一提的是，還有許多 Key 是在文件中沒有被寫出來的，像是 position，其作用是使 Layer 移動到畫面上得座標點，這與 translation 賦予 Layer 一個位移量是不同的。

//移動到畫面上的x座標位置
[CABasicAnimation animationWithKeyPath:@"position.x"]

//往x軸的方向移動
[CABasicAnimation animationWithKeyPath:@"transform.translation.x"]