【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
喜欢的话可以去点个星:)
以上就是本篇博客全部内容，欢迎指正和交流。转载注明出处~