神刀安全网

iOS实现3D卡片折叠效果


介绍

最近在开发的过程中需要用到3D卡片的特效。因此,研究了一下如何在iOS中使用透视图影。这边文章主要是学习iOS中的3D变幻,然后做一个卡片折叠效果,有点类似于笔记本电脑的折叠效果。在研究3D变换的时候,遇到了一些问题,在这里记录一下。

实现效果

iOS实现3D卡片折叠效果

效果图.gif

基础知识

  • UIView与CALayer

每个 UIView 内部都有一个 CALayer 在背后提供内容的绘制和显示,并且 UIView 的尺寸样式都由内部的 Layer 所提供。一个 CALayer 的 frame 是由它的 anchorPoint, position, bounds, transform 共同决定的,而一个 View 的 frame 只是简单的返回 CALayer的 frame,同样 UIView 的 center和 bounds 也是返回 Layer 的一些属性。

  • CALayer属性介绍

UIView有frame、bounds、center三个属性,CALayer也有类似的属性,分别为frame、bounds、position、anchorPoint。frame 和 bounds比较好理解,bounds可以视为x坐标和y坐标都为0的frame,这里主要是学习position、anchorPoint 两个属性。

@property CGPoint position; @property CGPoint anchorPoint;

position是layer中的anchorPoint在superLayer中的位置坐标,关系如下图所示:

positon为(100,100),anchorPoint为(0.0,0.0)

iOS实现3D卡片折叠效果

图片

positon为(100,100),anchorPoint为(0.5,0.5)

iOS实现3D卡片折叠效果

图片

positon为(100,100),anchorPoint为(1.0,1.0)

iOS实现3D卡片折叠效果

图片

frame、position与anchorPoint有以下关系:

frame.origin.x = position.x - anchorPoint.x * bounds.size.width; frame.origin.y = position.y - anchorPoint.y * bounds.size.height;
  • CALayer透视投影变换

CALayer默认使用正交投影,因此没有远小近大效果,而且没有明确的API可以使用透视投影矩阵,但是我们可以通过矩阵连乘自己构造透视投影矩阵。
CATransform3D 的透视效果通过一个矩阵中一个很简单的元素来控制m34
m34 用于按比例缩放X和Y的值来计算到底要离视角多远。m34 的默认值是0,我们可以通过设置 m34-1.0 / disZ 来应用透视效果,disZ 代表视角相机和屏幕之间的距离,以像素为单位。

CATransform3D CATransform3DMakePerspective(CGPoint center, float disZ) {     CATransform3D transToCenter = CATransform3DMakeTranslation(-center.x, -center.y, 0);     CATransform3D transBack = CATransform3DMakeTranslation(center.x, center.y, 0);     CATransform3D scale = CATransform3DIdentity;     scale.m34 = -1.0f/disZ;     return CATransform3DConcat(CATransform3DConcat(transToCenter, scale), transBack); }  CATransform3D CATransform3DPerspect(CATransform3D t, CGPoint center, float disZ) {     return CATransform3DConcat(t, CATransform3DMakePerspective(center, disZ)); }

实现过程

1、新建一个QMView的试图,初始化的时候为它添加上下两个试图。这里我们设置topview视图的锚点为 CGPointMake(0.5, 0.0),是因为我们希望topview视图绕着顶边旋转。我们设置bottomView视图的锚点为 CGPointMake(0.5, 1.0),是因为我们希望bottomView视图绕着底边旋转。锚点的x坐标设置相同,我们是希望上下两个视图水平方向的变换规律相同。CALayer仿射变换的时候,是根据锚点进行相关变换的

- (instancetype)initWithFrame:(CGRect)frame {     if (self = [super initWithFrame:frame]) {         // [self setBackgroundColor:[UIColor greenColor]];         _originFrame = frame;          // 上部试图         _topView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height/2)];         _topView.layer.anchorPoint = CGPointMake(0.5, 0.0);         _topView.layer.position = CGPointMake(frame.size.width/2, 0);         _topView.backgroundColor = [UIColor orangeColor];          UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 200)];         label.text = @"CALayer默认使用正交投影,因此没有远小近大效果,而且没有明确的API可以使用透视投影矩阵,但是我们可以通过矩阵连乘自己构造透视投影矩阵。CATransform3D的透视效果通过一个矩阵中一个很简单的元素来控制";         label.numberOfLines = 0;         [_topView addSubview:label];          // 底部视图         _bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height/2)];         _bottomView.layer.anchorPoint = CGPointMake(0.5, 1.0);         _bottomView.layer.position = CGPointMake(frame.size.width/2, frame.size.height);         _bottomView.backgroundColor = [UIColor blueColor];          UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 200)];         label1.text = @"CALayer默认使用正交投影,因此没有远小近大效果,而且没有明确的API可以使用透视投影矩阵,但是我们可以通过矩阵连乘自己构造透视投影矩阵。CATransform3D的透视效果通过一个矩阵中一个很简单的元素来控制";         label1.numberOfLines = 0;         [_bottomView addSubview:label1];          [self addSubview:_bottomView];         [self addSubview:_topView];     }      return self; }

2、将位置偏移量转化为角度,每个layer最大旋转角度为90度。

CGFloat thelta = M_PI/2*(_offset/(_originFrame.size.height/2));

3、根据角度构建绕x轴(1.0,0.0,0.0)旋转的矩阵。这里注意两个视图旋转的方向不同。

CATransform3D transform = CATransform3DMakeRotation(-thelta, 1, 0, 0); CATransform3D transform1 = CATransform3DMakeRotation(thelta, 1, 0, 0);

4、构建透视投影矩阵,并应用在两个UIView的CALayer上。

_topView.layer.transform = CATransform3DPerspect(transform, CGPointZero, kDistanceZ); _bottomView.layer.transform = CATransform3DPerspect(transform1, CGPointZero, kDistanceZ);

5、变换后位置的修正。CALayer进行仿射变换之后,它的宽高会发生变化。我们底部视图需要调整位置,才能连接到顶部视图底部。因此,我们需要重设底部视图的position。我们可以先得到变换后的顶部试图的高度,这个高度也就是底部视图的顶部。然后根据 position.y = frame.origin.y + anchorPoint.y * bounds.size.height 计算出顶部视图的position。最后修正整个QMView的高度。

CGFloat position = _topView.layer.frame.size.height + 1.0 * _bottomView.layer.frame.size.height; _bottomView.layer.position = CGPointMake(_originFrame.size.width/2, position);  CGRect rect = self.frame; rect.size.height = _topView.layer.frame.size.height + _bottomView.layer.frame.size.height; self.frame = rect;

整个变换部分的代码:

- (void)setOffset:(CGFloat)offset {     if (offset < 0 || offset > _originFrame.size.height/2) {         return;     }      _offset = offset;     CGFloat thelta = M_PI/2*(_offset/(_originFrame.size.height/2));     CATransform3D transform = CATransform3DMakeRotation(-thelta, 1, 0, 0);     CATransform3D transform1 = CATransform3DMakeRotation(thelta, 1, 0, 0);      _topView.layer.transform = CATransform3DPerspect(transform, CGPointZero, kDistanceZ);     _bottomView.layer.transform = CATransform3DPerspect(transform1, CGPointZero, kDistanceZ);      //position.x = frame.origin.x + anchorPoint.x * bounds.size.width;     //position.y = frame.origin.y + anchorPoint.y * bounds.size.height;     CGFloat position = _topView.layer.frame.size.height + 1.0 * _bottomView.layer.frame.size.height;     _bottomView.layer.position = CGPointMake(_originFrame.size.width/2, position);      CGRect rect = self.frame;     rect.size.height = _topView.layer.frame.size.height + _bottomView.layer.frame.size.height;     self.frame = rect; }

探索过程

1、旋转的过程中不修正底部视图的位置,则会出现如下效果。:

iOS实现3D卡片折叠效果

未命名.gif

2、修正坐标的时候,我们修正bottomView的frame,而不是其layer的position。

- (void)setOffset:(CGFloat)offset {     if (offset < 0 || offset > _originFrame.size.height/2) {         return;     }      _offset = offset;     CGFloat thelta = M_PI/2*(_offset/(_originFrame.size.height/2));     CATransform3D transform = CATransform3DMakeRotation(-thelta, 1, 0, 0);     CATransform3D transform1 = CATransform3DMakeRotation(thelta, 1, 0, 0);      _topView.layer.transform = CATransform3DPerspect(transform, CGPointZero, kDistanceZ);     _bottomView.layer.transform = CATransform3DPerspect(transform1, CGPointZero, kDistanceZ);       CGRect rect = _bottomView.frame;     rect.origin.y = _topView.frame.size.height;     _bottomView.frame = rect; }

会发生一下神奇的效果:

iOS实现3D卡片折叠效果

未命名.gif

如果在透视变换的过程中,修改了UIView的frame,会对之后的变换产生影响,也就是说之后的变换是在此基础上变换的,这也是bottomView为什么会越来越小。之前想过每次变换前还原bottomView的frame,但是在实际做的过程中比较麻烦。

3、利用GLKit进行变换。根据3D透视投影的相关概念,在探索的时候就想到了用矩阵直接变换。

iOS实现3D卡片折叠效果

变换公式.png

由于GLKit有相关的变换函数,在此我将CATransform3D转换为GLKMatrix4,然后利用函数 GLKMatrix4MultiplyVector4 进行变换。

GLKVector4 transform3DMultiplyVector4(CATransform3D transform, GLKVector4 vec4) {     GLKMatrix4 matrix = GLKMatrix4Make(transform.m11, transform.m12, transform.m13, transform.m14,                                        transform.m21, transform.m22, transform.m23, transform.m24,                                        transform.m31, transform.m32, transform.m33, transform.m34,                                        transform.m41, transform.m42, transform.m43, transform.m44);      GLKVector4 transVec4 = GLKMatrix4MultiplyVector4(matrix, vec4);     return transVec4; }

详细变换如下所示:

- (void)setOffset:(CGFloat)offset {     if (offset < 0 || offset > _originFrame.size.height/2) {         return;     }      _offset = offset;     CGFloat thelta = M_PI/2*(_offset/(_originFrame.size.height/2));     CATransform3D transform = CATransform3DMakeRotation(-thelta, 1, 0, 0);     CATransform3D transform1 = CATransform3DMakeRotation(thelta, 1, 0, 0);      // 初始化高度 - 矩阵变换后的高度     GLKVector4 top1 = transform3DMultiplyVector4(transform, GLKVector4Make(_originFrame.size.width/2, 0, 0, 1));     GLKVector4 top2 =transform3DMultiplyVector4(transform, GLKVector4Make(_originFrame.size.width/2, _originFrame.size.height/2, 0, 1));      GLKVector4 bottom1 = transform3DMultiplyVector4(transform1, GLKVector4Make(_originFrame.size.width/2, _originFrame.size.height/2, 0, 1));     GLKVector4 bottom2 =transform3DMultiplyVector4(transform1, GLKVector4Make(_originFrame.size.width/2, _originFrame.size.height, 0, 1));      _topView.layer.transform = CATransform3DPerspect(transform, CGPointZero, kDistanceZ);     _bottomView.layer.transform = CATransform3DPerspect(transform1, CGPointZero, kDistanceZ);      NSLog(@"1> %f %f", top2.y - top1.y, top1.y);     NSLog(@"2> %f", _topView.layer.frame.size.height);     NSLog(@"3> %f", bottom2.y - bottom1.y);      //position.y = frame.origin.y + anchorPoint.y * bounds.size.height;     CGFloat position = (top2.y - top1.y) + 1.0 * (bottom2.y - bottom1.y);     _bottomView.layer.position = CGPointMake(_originFrame.size.width/2, position); }

结果还是有很大的误差,如下图所示:

iOS实现3D卡片折叠效果

效果图.png

参考链接

http://www.cocoachina.com/industry/20121126/5178.htmls

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » iOS实现3D卡片折叠效果

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址