使用CATransformLayer制作3D图像和动画

Posted 2020-08-28 一切都是最好的安排

之前我们讲过可以用CALayer搭配CATransform3D来实现将View做3D旋转, 今天我们再看一个3D的新东西

CATransformLayer, 看名字就知道这个layer跟旋转有关, 那么具体是什么呢?

我们看他的头文件, 没有任何属性. 他其实是作为一个容器, 我们可以往里面添加其他的CALayer

比如我们要创建一个3D效果的立方体,

可以先创建一个CATransformlayer容器, 

正方体的6个面我们以3D旋转后的Layer表示, 加入到容器中, 调整好每个面的角度和位置让他们拼接再一起就是一个正方体了

我们上代码吧

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    //create cube layer
    CATransformLayer *cube = [CATransformLayer layer];
    
    //add cube face 1
    CATransform3D ct = CATransform3DMakeTranslation(0, 0, 50);
    [cube addSublayer:[self faceWithTransform:ct]];
    
    //add cube face 2
    ct = CATransform3DMakeTranslation(50, 0, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 0, 1, 0);
    [cube addSublayer:[self faceWithTransform:ct]];
    
    //add cube face 3
    ct = CATransform3DMakeTranslation(0, -50, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 1, 0, 0);
    [cube addSublayer:[self faceWithTransform:ct]];
    
    //add cube face 4
    ct = CATransform3DMakeTranslation(0, 50, 0);
    ct = CATransform3DRotate(ct, -M_PI_2, 1, 0, 0);
    [cube addSublayer:[self faceWithTransform:ct]];
    
    //add cube face 5
    ct = CATransform3DMakeTranslation(-50, 0, 0);
    ct = CATransform3DRotate(ct, -M_PI_2, 0, 1, 0);
    [cube addSublayer:[self faceWithTransform:ct]];
    
    //add cube face 6
    ct = CATransform3DMakeTranslation(0, 0, -50);
    ct = CATransform3DRotate(ct, M_PI, 0, 1, 0);
    [cube addSublayer:[self faceWithTransform:ct]];
    
    //center the cube layer within the container
    CGSize containerSize = self.view.bounds.size;
    cube.position = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);

    cube.transform = CATransform3DMakeRotation(30, 1, 1, 0);

    [self.view.layer addSublayer:cube];
}

- (CALayer *)faceWithTransform:(CATransform3D)transform
{
    //create cube face layer
    CALayer *face = [CALayer layer];
    face.bounds = CGRectMake(0, 0, 100, 100);
    //apply a random color
    CGFloat red = (rand() / (double)INT_MAX);
    CGFloat green = (rand() / (double)INT_MAX);
    CGFloat blue = (rand() / (double)INT_MAX);
    face.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor;
    face.transform = transform;
    return face;
}
@end

 

我们可以再给容器一个旋转动画, 就实现了一个旋转的立方体

CATransform3D transA = CATransform3DMakeRotation(60, 1, 1, 1);

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration          = 2;
    animation.autoreverses      = YES;
    animation.repeatCount       = 100;
    animation.toValue           = [NSValue valueWithCATransform3D:transA];
    [cube addAnimation:animation forKey:nil];