【iOS】用Layer创建一个三维模型以及拖动

关于CALayer的介绍以及基本属性，在这篇博客中有交代：CoreAnimation —— CALayer

这篇博客讲述简单的通过对layer的transform属性的设置一个CATransform3D来进行自定义三维图形，甚至后续的处理。

通常简单的仿射变换我们也是通过对其的transform属性进行设置。不过这里设置的是一个3D变换类。如果线性代数很好的话，那应该能够理解内部具体做了如何的矩阵运算。

首先我子类化一个UIView对象，把图形的绘制在这个自定义View上进行。

接口方面

@property (nonatomic, assign, readonly) CGFloat side;@property (nonatomic, assign, readonly) BOOL autoAnimate;/** *  创建一个正方体对象 * *  @param frame   位置 *  @param side    边长 *  @param animate 创建后是否自动旋转展示 * *  @return 正方体对象视图 */+ (HRCube *)cube3DWithFrame:(CGRect)frame side:(CGFloat)side autoAnimate:(BOOL)animate;

工厂方法的实现就是快速实例化并设置属性

+ (HRCube *)cube3DWithFrame:(CGRect)frame side:(CGFloat)side autoAnimate:(BOOL)animate{    HRCube *cube3D = [[HRCube alloc] initWithFrame:frame];    cube3D.side = side;    cube3D.autoAnimate = animate;        return cube3D;}

类别中有两个内部成员

CALayer *_cubeLayer;//main layer
GLKMatrix4 _rotMatrix;

第一个是我们需要绘制正方体的layer。

第二个是在导入GLKit框架后，从中引入的一个矩阵变换类，我们在触摸屏幕拖动时，需要使用到这个类对正方体进行旋转处理。

初始化主layer

- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        _cubeLayer = [CALayer layer];        _cubeLayer.frame = self.bounds;        _cubeLayer.contentsScale = [UIScreen mainScreen].scale;    }    return self;}

正式绘制正方体

- (void)setSide:(CGFloat)side{    _side = side;    //    NSLog(@"%@", NSStringFromCGRect(_cubeLayer.bounds));        //正    [self addCubeLayer:@[@0, @0, @(_side/2), @0, @0, @0, @0]];    //背    [self addCubeLayer:@[@0, @0, @(-_side/2), @(M_PI), @0, @0, @0]];    //左    [self addCubeLayer:@[@(-_side/2), @0, @0, @(-M_PI_2), @0, @1, @0]];    //右    [self addCubeLayer:@[@(_side/2), @0, @0, @(M_PI_2), @0, @1, @0]];    //上    [self addCubeLayer:@[@0, @(-_side/2), @0, @(-M_PI_2), @1, @0, @0]];    //下    [self addCubeLayer:@[@0, @(_side/2), @0, @(M_PI_2), @1, @0, @0]];        CATransform3D transform3D = CATransform3DIdentity;    transform3D.m34 = -1.0/2000;    _cubeLayer.sublayerTransform = transform3D;        [self.layer addSublayer:_cubeLayer];}

这里的m34不是星体- -，3D变形矩阵的m34通常应该设置为-1/EYE_DISTANCE,这里设置为2000已经足够好。

addCubeLayer的实现

//添加sublayers- (void)addCubeLayer:(NSArray *)params{    CAGradientLayer *gradient = [CAGradientLayer layer];    gradient.contentsScale = [UIScreen mainScreen].scale;    gradient.bounds = CGRectMake(0, 0, _side, _side);    gradient.position = self.center;    gradient.colors = @[(id)kGrayColor, (id)kBlackColor];    gradient.locations = @[@0, @1];    gradient.startPoint = CGPointMake(0, 0);    gradient.endPoint = CGPointMake(0, 1);    //抗锯齿    gradient.shouldRasterize = YES;        CATransform3D trans3D = CATransform3DMakeTranslation([params[0] floatValue], [params[1] floatValue], [params[2] floatValue]);    CATransform3D rotate3D = CATransform3DRotate(trans3D , [params[3] floatValue], [params[4] floatValue], [params[5] floatValue], [params[6] floatValue]);    CATransform3D transform3D = rotate3D;//    CATransform3D transform3D = CATransform3DRotate(trans3D, [params[3] floatValue], [params[4] floatValue], [params[5] floatValue], [params[6] floatValue]);        gradient.transform = transform3D;        [_cubeLayer addSublayer:gradient];}

这里为了更方便观察，使用的是渐变Layer，颜色为宏，可以自由修改。

注意给其抗锯齿设为了YES。通常我们还可以在整个项目的info.plist文件中设置该内容，不过设置会对整个项目的性能产生不好的影响，所以一般来说，需要的时候再设置也是一个不错的选择。

这样我们就简单的创建好了一个正方体，不过当前摆放很正，所以只能看到一个正方形平面，下面我们给他设置自动旋转后给他一个沿着坐标轴的角度偏转，再无限围着y轴转就OK了。

//添加自定义旋转展示动画- (void)addAnimation{    _cubeLayer.sublayerTransform = CATransform3DRotate(_cubeLayer.sublayerTransform, M_PI/9.0, 0.5, 0.5, 0.5);        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"];    animation.toValue = @(MAXFLOAT);    animation.duration = MAXFLOAT;    [_cubeLayer addAnimation:animation forKey:@"rotation"];}

这时运行程序我们就能看到一个旋转的三维正方体了

下面给其扩展一个拖动收拾旋转功能

首先给view增加一个拖动收拾，然后在Action中实现

#pragma mark - PanGesture- (void)panRotate:(UIPanGestureRecognizer *)ges{    static CGPoint start;    if (ges.state == UIGestureRecognizerStateBegan) {        start = [ges locationInView:self];    } else if (ges.state == UIGestureRecognizerStateChanged) {        CATransform3D transform = _cubeLayer.sublayerTransform;        _rotMatrix = GLKMatrix4MakeWithArray((void *)&transform);                CGPoint loc = [ges locationInView:self];        CGPoint diff = CGPointMake(start.x-loc.x, start.y-loc.y);                float rotX = 1 * GLKMathDegreesToRadians(diff.y/2.0);        float rotY = -1 * GLKMathDegreesToRadians(diff.x/2.0);                bool isInvertible;        GLKVector3 xAxis = GLKMatrix4MultiplyVector3(GLKMatrix4Invert(_rotMatrix, &isInvertible),                                                     GLKVector3Make(1, 0, 0));        _rotMatrix = GLKMatrix4Rotate(_rotMatrix, rotX, xAxis.x, xAxis.y, xAxis.z);        GLKVector3 yAxis = GLKMatrix4MultiplyVector3(GLKMatrix4Invert(_rotMatrix, &isInvertible),                                                     GLKVector3Make(0, 1, 0));        _rotMatrix = GLKMatrix4Rotate(_rotMatrix, rotY, yAxis.x, yAxis.y, yAxis.z);                _cubeLayer.sublayerTransform = *((CATransform3D *)&_rotMatrix);                start = loc;    }}

经过对矩阵的实时处理后，我们可以使用拖动收拾来在视图中实时的调整3D正方体的旋转了。

Demo源码：

CSDN：点击打开链接

GitHub:Rannie / HRCube3D

喜欢的话可以去点个星:)

以上就是本篇博客全部内容，欢迎指正和交流。转载注明出处~