近期公司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
然后会发现翻转的视图变小了。
打开视图查看器，你会发现视图确实是翻转了，视图变小的原因原来是因为投影的问题。于是乎，网上的说法是直接加上以下的代码:
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'里面的视图映射到了遮罩层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
- 您的喜欢将是作者创作的最大动力。
