Core Animation2-CABasicAnimation

CABasicAnimation是CAPropertyAnimation的子類，使用它可以實現一些基本的動畫效果，它可以讓CALayer的某個屬性從某個值漸變到另一個值。下面就用CABasicAnimation實現幾個簡單的動畫。

* 先初始化一個UIView添加到控制器的view中，然后在這個UIView的layer上執行動畫，下面的self是指控制器

_myView = [[UIView alloc] init];
_myView.layer.position = CGPointMake(100, 100);
_myView.layer.bounds = CGRectMake(0, 0, 100, 100);
_myView.backgroundColor = [UIColor blueColor];
[self.view addSubview:_myView];
[_myView release];

一、平移動畫

實現平移動畫有好幾種方法，這里列舉2種。

1.方法1

// 說明這個動畫對象要對CALayer的position屬性執行動畫
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];
// 動畫持續1.5s
anim.duration = 1.5; 

// position屬性值從(50, 80)漸變到(300, 350)
anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 80)];
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 350)];

// 設置動畫的代理
anim.delegate = self;

// 保持動畫執行后的狀態
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeForwards;

// 添加動畫對象到圖層上
[_myView.layer addAnimation:anim forKey:@"translate"];

* 第2行設置的keyPath是@"position"，說明要修改的是CALayer的position屬性，也就是會執行平移動畫

* 注意第7、8行，這里並不是直接使用CGPoint這種結構體類型，而是要先包裝成NSValue對象后再使用。這2行代碼表示CALayer從位置(50, 80)移動到位置(300, 350)

* 如果將第8行的toValue換成byValue，代表CALayer從位置(50, 80)開始向右移動300、向下移動350，也就是移動到位置(350, 430)

* 默認情況下，動畫執行完畢后，動畫會自動從CALayer上移除，CALayer又會回到原來的狀態。為了保持動畫執行后的狀態，可以加入第14、15行代碼

* 第18行后面的@"translate"是給動畫對象起個名稱，以后可以調用CALayer的removeAnimationForKey:方法根據動畫名稱停止相應的動畫

* 第11行是設置動畫的代理，可以監聽動畫的執行過程，這里設置控制器為代理。代理需要實現的方法有：

#pragma mark 動畫開始
- (void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"動畫開始了");
}

#pragma mark 動畫結束
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    // 查看一下動畫執行完畢后的position值
    NSString *string = NSStringFromCGPoint(_myView.layer.position);
    NSLog(@"動畫結束了，position:%@", string);
}

打印結果為：

2013-04-14 23:44:26.197 CAAnimation[5995:c07] 動畫開始了
2013-04-14 23:44:27.697 CAAnimation[5995:c07] 動畫結束了，position:{100, 100}

從第2行的打印信息可以看出，實際上，動畫執行完畢后，並沒有真正改變CALayer的position屬性的值！

 

2.方法2

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
anim.duration = 1;

CATransform3D form = CATransform3DMakeTranslation(350, 350, 0);
anim.toValue = [NSValue valueWithCATransform3D:form];

[_myView.layer addAnimation:anim forKey:nil];

通過CALayer的transform屬性實現平移動畫，layer會從自己的初始位置平移到(350, 350)位置

 

二、縮放動畫

實現縮放動畫有好幾種方法，這里列舉2種。

1.方法1

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];
anim.duration = 2;

anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 30, 30)];

[_myView.layer addAnimation:anim forKey:nil];

layer會從原來的尺寸(100x100)變為30x30

 

2.方法2

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
anim.duration = 1.5; // 動畫持續1.5s

// CALayer的寬度從0.5倍變為2倍
// CALayer的高度從0.5倍變為1.5倍
anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 1)];
anim.toValue  = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2, 1.5, 1)];

[_myView.layer addAnimation:anim forKey:nil];

 

三、旋轉動畫

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
anim.duration = 1.5;

// 繞着(0, 0, 1)這個向量軸順時針旋轉45°
anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 1)];

[_myView.layer addAnimation:anim forKey:nil]; 

其實可以不用設置fromValue，這里只設置了toValue

 

四、其他

* 除開前面使用的position、transform屬性，其實CALayer還有好多屬性都可以形成動畫，這些屬性統稱為"Animatable Properties"。在《CALayer3-層的屬性》開頭有介紹如何搜索這些屬性

* CABasicAnimation雖然能夠做很多基本的動畫效果，但是有個局限性，只能讓CALayer的屬性從某個值漸變到另一個值，僅僅是在2個值之間漸變