<p><strong>介绍</strong></p>    <p>最近在开发的过程中需要用到3D卡片的特效。因此，研究了一下如何在iOS中使用透视图影。这边文章主要是学习iOS中的3D变幻，然后做一个卡片折叠效果，有点类似于笔记本电脑的折叠效果。在研究3D变换的时候，遇到了一些问题，在这里记录一下。</p>    <p><strong>实现效果</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cf9bccdfe85eea5ca3d190eaa252305e.gif"></p>    <p style="text-align:center">效果图.gif</p>    <p><strong>基础知识</strong></p>    <ul>     <li>UIView与CALayer</li>    </ul>    <p>每个 UIView 内部都有一个 CALayer 在背后提供内容的绘制和显示，并且 UIView 的尺寸样式都由内部的 Layer 所提供。一个 CALayer 的 frame 是由它的 anchorPoint, position, bounds, transform 共同决定的，而一个 View 的 frame 只是简单的返回 CALayer的 frame，同样 UIView 的 center和 bounds 也是返回 Layer 的一些属性。</p>    <ul>     <li>CALayer属性介绍</li>    </ul>    <p>UIView有frame、bounds、center三个属性，CALayer也有类似的属性，分别为frame、bounds、position、anchorPoint。frame 和 bounds比较好理解，bounds可以视为x坐标和y坐标都为0的frame，这里主要是学习position、anchorPoint 两个属性。</p>    <pre>  <code class="language-objectivec">@property CGPoint position;  @property CGPoint anchorPoint;</code></pre>    <p>position是layer中的anchorPoint在superLayer中的位置坐标，关系如下图所示：</p>    <p>positon为（100，100），anchorPoint为（0.0，0.0）</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ca111fd4a5f6485e8d1aeb6249861e6c.png"></p>    <p>positon为（100，100），anchorPoint为（0.5，0.5）</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8b72c5f12578e64997d96560393f27bf.png"></p>    <p>positon为（100，100），anchorPoint为（1.0，1.0）</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d4a7ba18cd96363cb3444faa2684a216.png"></p>    <p>frame、position与anchorPoint有以下关系：</p>    <pre>  <code class="language-objectivec">frame.origin.x = position.x - anchorPoint.x * bounds.size.width;  frame.origin.y = position.y - anchorPoint.y * bounds.size.height;</code></pre>    <ul>     <li>CALayer透视投影变换</li>    </ul>    <p>CALayer默认使用正交投影，因此没有远小近大效果，而且没有明确的API可以使用透视投影矩阵，但是我们可以通过矩阵连乘自己构造透视投影矩阵。</p>    <p>CATransform3D 的透视效果通过一个矩阵中一个很简单的元素来控制 <strong> <em>m34</em> </strong></p>    <p>。 <strong> <em>m34</em> </strong> 用于按比例缩放X和Y的值来计算到底要离视角多远。 <strong> <em>m34</em> </strong> 的默认值是0，我们可以通过设置 <strong> <em>m34</em> </strong> 为 <strong> <em>-1.0 / disZ</em> </strong> 来应用透视效果， <strong> <em>disZ</em> </strong> 代表视角相机和屏幕之间的距离，以像素为单位。</p>    <pre>  <code class="language-objectivec">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));  }</code></pre>    <p><strong>实现过程</strong></p>    <p>1、新建一个QMView的试图，初始化的时候为它添加上下两个试图。这里我们设置topview视图的锚点为 CGPointMake(0.5, 0.0），是因为我们希望topview视图绕着顶边旋转。我们设置bottomView视图的锚点为 CGPointMake(0.5, 1.0)，是因为我们希望bottomView视图绕着底边旋转。锚点的x坐标设置相同，我们是希望上下两个视图水平方向的变换规律相同。 <strong> <em>CALayer仿射变换的时候，是根据锚点进行相关变换的</em> </strong> 。</p>    <pre>  <code class="language-objectivec">- (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;  }</code></pre>    <p>2、将位置偏移量转化为角度，每个layer最大旋转角度为90度。</p>    <pre>  <code class="language-objectivec">CGFloat thelta = M_PI/2*(_offset/(_originFrame.size.height/2));</code></pre>    <p>3、根据角度构建绕x轴（1.0，0.0，0.0）旋转的矩阵。这里注意两个视图旋转的方向不同。</p>    <pre>  <code class="language-objectivec">CATransform3D transform = CATransform3DMakeRotation(-thelta, 1, 0, 0);  CATransform3D transform1 = CATransform3DMakeRotation(thelta, 1, 0, 0);</code></pre>    <p>4、构建透视投影矩阵，并应用在两个UIView的CALayer上。</p>    <pre>  <code class="language-objectivec">_topView.layer.transform = CATransform3DPerspect(transform, CGPointZero, kDistanceZ);  _bottomView.layer.transform = CATransform3DPerspect(transform1, CGPointZero, kDistanceZ);</code></pre>    <p>5、变换后位置的修正。CALayer进行仿射变换之后，它的宽高会发生变化。我们底部视图需要调整位置，才能连接到顶部视图底部。因此，我们需要重设底部视图的position。我们可以先得到变换后的顶部试图的高度，这个高度也就是底部视图的顶部。然后根据 <em>position.y = frame.origin.y + anchorPoint.y * bounds.size.height</em> 计算出顶部视图的position。最后修正整个QMView的高度。</p>    <pre>  <code class="language-objectivec">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;</code></pre>    <p>整个变换部分的代码：</p>    <pre>  <code class="language-objectivec">- (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;  }</code></pre>    <p><strong>探索过程</strong></p>    <p>1、旋转的过程中不修正底部视图的位置，则会出现如下效果。：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/86c113f38cf578e149e60b22926eeca8.gif"></p>    <p>2、修正坐标的时候，我们修正bottomView的frame，而不是其layer的position。</p>    <pre>  <code class="language-objectivec">- (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;  }</code></pre>    <p>会发生一下神奇的效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d0c44cea203658db54f7240c72a5797c.gif"></p>    <p>如果在透视变换的过程中，修改了UIView的frame，会对之后的变换产生影响，也就是说之后的变换是在此基础上变换的，这也是bottomView为什么会越来越小。之前想过每次变换前还原bottomView的frame，但是在实际做的过程中比较麻烦。</p>    <p>3、利用GLKit进行变换。根据3D透视投影的相关概念，在探索的时候就想到了用矩阵直接变换。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/24d9f94e11d8cda1ea263ae256e76f0a.png"></p>    <p style="text-align:center">变换公式.png</p>    <p>由于GLKit有相关的变换函数，在此我将CATransform3D转换为GLKMatrix4，然后利用函数 GLKMatrix4MultiplyVector4 进行变换。</p>    <pre>  <code class="language-objectivec">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;  }</code></pre>    <p>详细变换如下所示：</p>    <pre>  <code class="language-objectivec">- (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);  }</code></pre>    <p>结果还是有很大的误差，如下图所示：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f07609506d1f10f12ee1d2d939b6cb4a.png"></p>    <p><strong>参考链接</strong></p>    <p><a href="/misc/goto?guid=4959747389647250484" rel="nofollow,noindex">http://www.cocoachina.com/industry/20121126/5178.htmls</a></p>    <p> </p>    <p>来自：http://www.jianshu.com/p/9a731a8c9e50</p>    <p> </p>