iOS CALayer和3D (1): 定义一个简单的旋转3D立方体_移动开发_编程开发_程序员俱乐部

先看结果：

完成使用CALayer创建的一个旋转的3D立方体。

 

很简单，注意保持一个清晰的空间想象力，然后把每一个CALayer执行相应的3D变换，最后使用Core Animation是主Layer动起来，OK。

让我们开始动手！首先，在ViewController中定义主Layer，这个CALayer用来存放其他子Layer，我们一共需要6个子Layer，每一个子Layer代表正方体的一个面。

//主Layer

CALayer *_rootLayer;

 

接着，也是最重要的，定义一个创建3D变换后的CALayer辅助函数。

这里为了使Layer有渐变色，所以使用CAGradientLayer类型，因此第一步就是设置好CAGradientLayer的那些杂七杂八的属性（颜色，位置等），第二步，从参数中获取偏移和旋转3D变换的值，然后执行相应的变换。具体参数我们会在之后调用这个方法时传入，这里总共需要用来偏移的X，Y，Z参数和用来旋转的角度，X，Y，Z参数，一共7个参数。设置好3D Transform后，这个方法的第三步就是把这个新的Layer加入到主Layer中。

整个方法代码如下：

//用来添加经过3D变换的CALayer

- (void)addLayer:(NSArray*)params

{

    //创建支持渐变背景的CAGradientLayer

    CAGradientLayer *gradient = [CAGradientLayer layer];

    //设置位置，和颜色等参数

    gradient.contentsScale = [UIScreen mainScreen].scale;

    gradient.bounds = CGRectMake(0, 0, 100, 100);

    gradient.position = CGPointMake(CGRectGetMidX(self.view.bounds), CGRectGetMidY(self.view.bounds));

    gradient.colors = @[(id)[UIColor grayColor].CGColor, (id)[UIColor blackColor].CGColor];

    gradient.locations = @[@0, @1];

    gradient.startPoint = CGPointMake(0, 0);

    gradient.endPoint = CGPointMake(0, 1);

   

    //根据参数对CALayer进行偏移和旋转Transform

    CATransform3D transform = CATransform3DMakeTranslation([[params objectAtIndex:0] floatValue], [[params objectAtIndex:1] floatValue], [[params objectAtIndex:2] floatValue]);

    transform = CATransform3DRotate(transform, [[params objectAtIndex:3] floatValue], [[params objectAtIndex:4] floatValue], [[params objectAtIndex:5] floatValue], [[params objectAtIndex:6] floatValue]);

    //设置transform属性并把Layer加入到主Layer中

    gradient.transform = transform;

    [_rootLayer addSublayer:gradient];

}

 

接着，在ViewController的viewDidLoad方法内，开始利用这个辅助函数来创建每一个面，注意最后要将主Layer进行一次3D变换，这样才能看出3D效果。

如下代码：

//创建主Layer

_rootLayer = [CALayer layer];

_rootLayer.contentsScale = [UIScreen mainScreen].scale;

_rootLayer.frame = self.view.bounds;

 

//前

[self addLayer:@[@0, @0, @50, @0, @0, @0, @0]];

//后

[self addLayer:@[@0, @0, @(-50), @(M_PI), @0, @0, @0]];

//左

[self addLayer:@[@(-50), @0, @0, @(-M_PI_2), @0, @1, @0]];

//右

[self addLayer:@[@50, @0, @0, @(M_PI_2), @0, @1, @0]];

//上

[self addLayer:@[@0, @(-50), @0, @(-M_PI_2), @1, @0, @0]];

//下

[self addLayer:@[@0, @50, @0, @(M_PI_2), @1, @0, @0]];

 

//主Layer的3D变换

CATransform3D transform = CATransform3DIdentity;

transform.m34 = -1.0 / 700;

//在X轴上做一个20度的小旋转

transform = CATransform3DRotate(transform, M_PI / 9, 1, 0, 0);

//设置CALayer的sublayerTransform

_rootLayer.sublayerTransform = transform;

//添加Layer

[self.view.layer addSublayer:_rootLayer];

 

OK，这个时候，静态的模型已经定义好了，最后我们要把整个正方体动起来，为了达到更好的视觉效果，之前我们已经对主Layer在X轴上做了20度角的小旋转，而对于动画，我们则需要对主Layer在Z轴上做一个360度的旋转，然后设置动画的重复次数为无限次，这样的话，方块就会无限次得转起来，代码：

//动画

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"];

//从0到360度

animation.toValue = [NSNumber numberWithFloat:2 * M_PI];

//间隔3秒

animation.duration = 3.0;

//无限循环

animation.repeatCount = HUGE_VALF;

//开始动画

[_rootLayer addAnimation:animation forKey:@"rotation"];