Core Animation | 核心动画 | 立方体实现

  • 实现效果

效果展示
  • 实现思路

  1. 6个面(layer)
  2. layer做一个3d转换(平移、旋转)
  3. 通过CATransform3D在变换
  4. 把每个面的layer再添加到CATransformLayer
  5. 把CATransformLayer添加在self.view.layer上
  • 核心代码

- (void)tranform3D{
    CATransformLayer *cubeLayer = [CATransformLayer layer];
    //1(上)
    CATransform3D ct = CATransform3DMakeTranslation(0, 0, 50);
    [cubeLayer addSublayer:[self faceWithTransform:ct]];
    //2(右)
    ct = CATransform3DMakeTranslation(50, 0, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 0, 1, 0);
    [cubeLayer addSublayer:[self faceWithTransform:ct]];
    //3.(后)
    ct = CATransform3DMakeTranslation(0, -50, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 1, 0, 0);
    [cubeLayer addSublayer:[self faceWithTransform:ct]];
    //4.(前)
    ct = CATransform3DMakeTranslation(0, 50, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 1, 0, 0);
    [cubeLayer addSublayer:[self faceWithTransform:ct]];
    //5.(左)
    ct = CATransform3DMakeTranslation(-50, 0, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 0, 1, 0);
    [cubeLayer addSublayer:[self faceWithTransform:ct]];
    //6.(下)
    ct = CATransform3DMakeTranslation(0, 0, -50);
    [cubeLayer addSublayer:[self faceWithTransform:ct]];
    
    cubeLayer.position = self.view.center;
    cubeLayer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0);
    [self.view.layer addSublayer:cubeLayer];
}
  • 设置CALayer/方法依赖CATransform3D

- (CALayer *)faceWithTransform:(CATransform3D)transform{
    CALayer *layer = [CALayer layer];
    layer.bounds = CGRectMake(0, 0, 100, 100);
    CGFloat red = arc4random() / (CGFloat)INT_MAX;
    CGFloat green = arc4random() / (CGFloat)INT_MAX;
    CGFloat blue = arc4random() / (CGFloat)INT_MAX;
    UIColor *color = [UIColor colorWithRed:red green:green blue:blue alpha:1];
    layer.backgroundColor = color.CGColor;
    layer.transform = transform;
    return layer;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容