0%

CoreAnimation专题

发表于 更新于 分类于

CoreAnimation官方文档

CALayer

CALayer与UIView是平行关系，CALayer负责处理显示相关，UIVIew负责处理触控相关。

  • doubleSided: 设置双面渲染，决定180度旋转后是否显示


CABasicAnimation

平移动画案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CABasicAnimation * animation = [CABasicAnimation animation];
animation.keyPath = @"position.y";
animation.toValue = @400;
animation.duration = 1;
animation.removedOnCompletion = NO;
    
/**
 kCAFillModeForwards
 kCAFillModeBackwards
 kCAFillModeBoth
 kCAFillModeRemoved
 */
animation.fillMode = kCAFillModeForwards;
    
[self.layer addAnimation:animation forKey:nil];


CATransform3D

平面投影案例

1
2
CATransform3D transform1 = CATransform3DMakeRotation(M_PI, 0, 1, 0);
self.layer.transform = transform1;

透视投影案例

1
2
3
4
5
CATransform3D transform = CATransform3DIdentity;
transform.m34 = -1.0/500.0; //矩阵因子m34决定灭点
self.view.layer.sublayerTransform = transform;	//所有子layer套用相同透视
CATransform3D transform1 = CATransform3DMakeRotation(M_PI_4, 1, 0, 0);
self.layer.transform = transform1;

旋转动画案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
NSThread * thread = [[NSThread alloc] initWithBlock:^{
        __block int count = 0;
        NSTimer * timer = [NSTimer timerWithTimeInterval:0.1 repeats:YES block:^(NSTimer * _Nonnull timer) {
            count ++;
            CATransform3D transform = CATransform3DIdentity;
            transform.m34 = -1.0 / 500.0;
            transform = CATransform3DRotate(transform, M_PI / 20 * count, 0, 1, 0);
            self.layer.transform = transform;
        }];
        [NSRunLoop.currentRunLoop addTimer:timer forMode:NSRunLoopCommonModes];
        [NSRunLoop.currentRunLoop run];
    }];
    
[thread start];


CAShapeLayer

画图案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(175, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[path moveToPoint:CGPointMake(150, 125)];
[path addLineToPoint:CGPointMake(150, 175)];

CAShapeLayer * shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = UIColor.redColor.CGColor;
shapeLayer.fillColor = UIColor.clearColor.CGColor;
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineJoinRound;

shapeLayer.path = path.CGPath;
[self.view.layer addSublayer:shapeLayer];


CATextLayer

使用CATextLayer来做文字展示，性能相比UILabel要好。

文字展示案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
CATextLayer * textLayer = [CATextLayer layer];
textLayer.frame = CGRectMake(10, 100, self.view.frame.size.width - 20, 200);
[self.view.layer addSublayer:textLayer];

// 字体颜色
textLayer.foregroundColor = UIColor.blackColor.CGColor;
// 对齐方式
textLayer.alignmentMode = kCAAlignmentCenter;
// 换行
textLayer.wrapped = YES;
// 设置像素比以适应不同分辨率屏幕
textLayer.contentsScale = UIScreen.mainScreen.scale;

UIFont * font = [UIFont systemFontOfSize:15];

// 将font转化为图层字体
CFStringRef fontName = (__bridge CFStringRef)font.fontName;
CGFontRef fontRef = CGFontCreateWithFontName(fontName);
textLayer.font = fontRef;
textLayer.fontSize = font.pointSize;
CGFontRelease(fontRef);

NSString * text = @"Hello, I am David.";
textLayer.string = text;


CATransformLayer

CALayer不能够管理3D层级的深度，它只是flattens the scene to a single Z level，但是CATransformLayer可以。

3D层级案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 将CATransformLayer改为CALayer将失去深度感
CATransformLayer * container = [CATransformLayer layer];
container.frame = CGRectMake(100, 100, 200, 200);
[self.view.layer addSublayer:container];

CATransform3D t = CATransform3DIdentity;

t.m34 = 1.0 / -500;
t = CATransform3DRotate(t, M_PI_4, 0, 1, 0);
container.transform = t;

// 紫色层级在前
CALayer * purplePlane = [CALayer layer];
purplePlane.backgroundColor = UIColor.purpleColor.CGColor;
purplePlane.frame = CGRectMake(0, 0, 50, 50);
[container addSublayer:purplePlane];
t = CATransform3DIdentity;
t = CATransform3DTranslate(t, 0, 0, -10);
purplePlane.transform = t;
    
// 红色层级在后
CALayer * redPlane = [CALayer layer];
redPlane.backgroundColor = UIColor.redColor.CGColor;
redPlane.frame = CGRectMake(0, 0, 50, 50);
[container addSublayer:redPlane];
t = CATransform3DIdentity;
t = CATransform3DTranslate(t, 0, 0, -50);
redPlane.transform = t;