使用CALayer製作動畫

一篇比較高水平的介紹CALayer的部落格：點我 CALayer與一般的UIView同屬層級的架構，在每個CALayer物件中，都可存放該動畫圖層的屬性與它的子層級中每一個動畫圖層的引用。 CALayer的相關屬性標示：
下面通過修改CALayer的position屬性來說明CALayer的使用方法：

<pre name="code" class="objc">- (void)viewDidLoad {
    [super viewDidLoad];
    
    
    //#import "QuartzCore/QuartzCore.h"
    UIImage *image = [UIImage imageNamed:@"bg.png"];
    layer = [CALayer layer];
    layer.bounds = CGRectMake(0, 0, 326, 444);
    layer.contents = (id)[image CGImage];
    layer.position = CGPointMake(183, 242);
    [self.view.layer addSublayer:layer];
}
- (IBAction)leftPress:(id)sender {
    [CATransaction setAnimationDuration:5];//修改動畫預設時長（為1/4秒）屬性
    layer.position = CGPointMake(10, 242);

}

- (IBAction)rightPress:(id)sender {
    [CATransaction setAnimationDuration:5];
    layer.position = CGPointMake(330, 242);
}
 

動畫效果：
下面看看CALayer的另一個子類CATextLayer的相關內容： CATextLayer是專門的文字圖層，通過string屬性設定文字內容，fontSize設定位子大小，foregroundColor設定文字顏色。 其中fontSize和foregroundColor屬性是可以通過動畫形式變化的。文字圖層也可以加到其他圖層上成為子圖層，這樣文字 圖層就會隨著父圖層而變化。

-(void)initTextLayer{
    textLayer = [CATextLayer layer];
    textLayer.bounds = CGRectMake(0, 0, 150, 50);
    //文字內容
    textLayer.string = @"文字圖層";
    //字型顏色,字型大小預設為36
    textLayer.foregroundColor = [[UIColor redColor]CGColor];
    textLayer.position = CGPointMake(150, 100);
    [layer addSublayer:textLayer];
}
- (IBAction)leftPress:(id)sender {
    [CATransaction setAnimationDuration:5];//修改動畫預設時長（為1/4秒）屬性
    layer.position = CGPointMake(10, 242);
    textLayer.fontSize = 24;
    textLayer.foregroundColor = [[UIColor yellowColor]CGColor];
}
- (IBAction)rightPress:(id)sender {
    [CATransaction setAnimationDuration:5];
    layer.position = CGPointMake(330, 242);
    textLayer.fontSize = 36;
    textLayer.foregroundColor = [[UIColor redColor]CGColor];
}
 

layer是圖片圖層。 效果如下：
下面是本節最後一個圖層CAReplicatiorLayer，它也是CALayer子類。 replicator翻譯過來是複製基因，重複符的意思。 可以把CAReplicatiorLayer看作是一個管理子圖層及子圖層副本的一種圖層，子圖層的副本不是CAReplicatiorLayer的子圖層（可以通過列印sublayers.count得知） 可以指定子圖層副本的不同位置、顏色等等。

//定義角度轉弧度巨集
#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/180)
//初始化複製圖層
-(void)initReplicatorLayer{
    replicatorLayer = [CAReplicatorLayer layer];
    //副本數
    replicatorLayer.instanceCount = 5;//建立4個副本
    
    CATransform3D finalTransform = CATransform3DMakeTranslation(50, 50, 0);//副本依次位移
    [replicatorLayer setInstanceTransform:finalTransform];
    [replicatorLayer addSublayer:[self createShapeLayer]];//把形狀圖層加為子圖層
    [self.view.layer addSublayer:replicatorLayer];
    NSLog(@"圖層數＝%ld",replicatorLayer.sublayers.count);
}

//分離
- (IBAction)doSplit:(id)sender {
    [CATransaction setAnimationDuration:3];
    CATransform3D finalTransform = CATransform3DMakeTranslation(50, 50, 0.1);
    [replicatorLayer setInstanceTransform:finalTransform];
    replicatorLayer.instanceAlphaOffset = -0.25;//副本透明度從1依次減0.25
}

//合併
- (IBAction)doMerge:(id)sender {
    [CATransaction setAnimationDuration:3];
    CATransform3D finalTransform = CATransform3DMakeTranslation(0, 0, 0.1);
    [replicatorLayer setInstanceTransform:finalTransform];
}

//建立形狀圖層
-(CAShapeLayer *)createShapeLayer{
    CAShapeLayer * shapeLayer = [CAShapeLayer layer];
    shapeLayer.bounds = CGRectMake(0, 0, 100, 100);
    shapeLayer.position = CGPointMake(50, 50);
    UIBezierPath * path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(70, 70)];
    [path addArcWithCenter:CGPointMake(70, 70) radius:50 startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(270) clockwise:NO];//新增弧形
    //[path moveToPoint:CGPointMake(70, 120)];
    [path addArcWithCenter:CGPointMake(70, 70) radius:50 startAngle:DEGREES_TO_RADIANS(90) endAngle:DEGREES_TO_RADIANS(180) clockwise:YES];//
    [path closePath];
    shapeLayer.path = path.CGPath;
    return shapeLayer;
}
 

效果如下：