CATransform3D

近期公司UI美女给我看了一个她做的界面，然后当做到一个类似淘宝购物车购买的界面的动画时候，说有些不懂其原理。叫我给她讲解一下。我看了一看，有以下两个思路：

• 转场动画实现。
• 直接使用CATransform3D + UIVIew动画来实现。
  于是乎，复习了一下CATransform3D。

---

首先网上查了查关于CATransform3D的资料，理清了一些思绪后，开始了实现。
当作者翻阅几篇博客的时候，发现有段代码:

//首先初始化一个trans
        var trans = CATransform3DIdentity
//对其进行角度运算
        let angel = CGFloat(M_PI/4)
//利用3D转换
        trans = CATransform3DMakeRotation(angel, 1, 0, 0)
//赋值
        transformView.layer.transform = trans

然后会发现翻转的视图变小了。

图片.png

打开视图查看器，你会发现视图确实是翻转了，视图变小的原因原来是因为投影的问题。于是乎，网上的说法是直接加上以下的代码:

trans.m34 = -1/2000

表示可以让视图成透视投影（远小近大）而不是正交投影，具体可以参见此博客GoTo---------->
然而，作者写了这段代码，发现效果并没有变。Zzzzz..

---

于是又翻阅了十几篇博客，更去了解了高中投影和矩阵的一些知识。
终于，翻到了以下关键性的代码，作者是这样理解的:
Objective-C:

- (CATransform3D)CATransform3DMakePerspective:(CGPoint)center with:(CGFloat)idz{
//中心点
    CATransform3D transformToCenter = CATransform3DMakeTranslation(-center.x, -center.y, 0);
//从后边看
    CATransform3D tansformback = CATransform3DMakeTranslation(center.x, center.y, 0);
//初始化一个transform
    CATransform3D trans = CATransform3DIdentity;
//根据m34(透视效果，要操作的这个对象要有旋转的角度，否则没有效果。正直/负值都有意义）的效果来观察。
    trans.m34 = -1/idz;
//首先从中心点=>初始状态=>改变后面 //Concat就是将视图连接起来观察
    return CATransform3DConcat(CATransform3DConcat(transformToCenter, trans), tansformback);
}

//根据当前即将改变视图的角度来观察。
- (CATransform3D)CATransform3DPerspect:(CATransform3D)t withCenter:(CGPoint)center withIDz:(CGFloat)idz{
    return CATransform3DConcat(t, [self CATransform3DMakePerspective:center with:idz]);
}

Swift:

 func CATransform3DMakePerspective(center:CGPoint, idz:CGFloat) -> CATransform3D {
        let transToCenter = CATransform3DMakeTranslation(-center.x, -center.y, 0)
        let transback = CATransform3DMakeTranslation(center.x, center.y, 0)
        var scale = CATransform3DIdentity
        scale.m34 = -1.0/idz
        return CATransform3DConcat(CATransform3DConcat(transToCenter, scale), transback)
    }

    func CATransform3DPerspect(t:CATransform3D, center:CGPoint, idz:CGFloat) -> CATransform3D {
        return CATransform3DConcat(t, CATransform3DMakePerspective(center: center, idz: idz))
    }

那么说到底就是构建透视矩阵。
利用这些就可以实现我们需要的购物车效果了。

---

注意坑:
若直接写以下代码

CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DMakeRotation(M_PI/8, 1, 0, 0);
//上述代码的调用
self.view.layer.transform = [self CATransform3DPerspect:transform withCenter:CGPointMake(0, 0) withIDz:4000];

1.jpg

2.jpg

你会发现里面'1.jpg'里面的视图映射到了遮罩层maskview上面而且高亮了，但是在DebugView观察的时候确实是翻转了。作者现在还没有明白是什么原因，如有知道的道友可以给作者留言。

解决方式:
作者运用m24这一属性，沿着x轴翻转，来对视图进行改变，并且在视图中使用缩放的方式来对此进行操作，结果是一样的。

    CATransform3D transform = CATransform3DIdentity;
   transform = CATransform3DScale(transform, 0.9, 0.9, 1);
   self.view.layer.transform = [self CATransform3DPerspect:transform withCenter:CGPointMake(0, 0) withIDz:5000];

作者发现：
此方式在视图中是发生变化，但是在DebugView中却没有发生变化

另外注意，在vc中加window的时候，放在viewDidAppear而不要放在viewDidLoad，因为如果放在viewDidLoad中会先将当前的视图加载window层，然后通过视图加载完后将当前vc的view加载其上面。

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    UIWindow *rootWindow = [[UIApplication sharedApplication].windows lastObject];
    self.maskView = [[UIView alloc]initWithFrame:self.view.bounds];
    self.maskView.backgroundColor = [UIColor blackColor];
    self.maskView.alpha = 0;
    [rootWindow addSubview:self.maskView];
    
    self.taobaoView = [[TaoBaoView alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height, self.view.frame.size.width, self.view.frame.size.height/2)];
    [rootWindow addSubview:self.taobaoView];
    
}

---

最后附上Goto=====================>github

• 您的喜欢将是作者创作的最大动力。