iOS 3D变换 -- CALayer的transform
UIView的显示设置都是对CALayer属性的封装，但是这层封装掩盖了CALayer提供的3D显示功能。所以我们想让UIView显示3D的效果的话，需要直接操作CALayer。
demo地址：https://github.com/smalldu/IOS-Animations
中的3DTransformDemo
看一个效果图（一个静态 一个动态）
立方体
动态立方体
在CALayer中，我们使用CATransform3D 对其进行3D变换，其中变换比2d变换多一个Z轴 。 在3D变换中三个坐标轴的旋转方向如图
旋转图
发现没 绕x轴和y轴转都是垂直于屏幕的。
这里我们创建一个single view application 。拖一个view上去。如图
初始
然后对它的layer执行3d旋转x轴
@IBOutlet weak var v1:UIView!
override func viewDidLoad() {
super.viewDidLoad()
var trans = CATransform3DIdentity
let angel = CGFloat(M_PI/4)
trans = CATransform3DMakeRotation(angel, 1, 0, 0)
v1.layer.transform = trans
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
效果图
效果
然而并没有3D效果 ， 只是好像变扁了。怎么回事呢？
这是因为，在CALayer的显示系统中，默认的相机使用正交投影，正交投影没有远小近大效果，所以在本例中，只能造成相应轴上的缩放。所以不管你旋转多少度都没有效果
这时候我们需要用到透视投影，CALayer默认使用正交投影，因此没有远小近大效果，而且没有明确的API可以使用透视投影矩阵。所幸可以通过矩阵连乘自己构造透视投影矩阵。
3d变换其实是一个矩阵变换
矩阵
🌀好晕 ， 矩阵太复杂了。看不懂怎么办 。幸运的是我们不用研究所有点 。有一个很特殊的点m34 。我们只需要设置这个点就可以了
CATransform3D的透视效果通过一个矩阵中一个很简单的元素来控制：m34
。m34用于按比例缩放X和Y的值来计算到底要离视角多远。
m34的默认值是0，我们可以通过设置m34为-1.0 / d来应用透视效果，d代表了想象中视角相机和屏幕之间的距离，以像素为单位，那应该如何计算这个距离呢？实际上并不需要，大概估算一个就好了。
d的大小大家可以试试
var trans = CATransform3DIdentity
trans.m34 = -1 / 500
let angel = CGFloat(M_PI/4)
trans = CATransform3DMakeRotation(angel, 1, 0, 0)
v1.layer.transform = trans
效果
t5.png
trans.m34 = -1 / 20
效果
近距离
trans.m34 = -1/3000
效果
远距离
d代表了相机离它的距离，这个度自己感觉。一般500-1000效果挺好
下面我们就利用这个3d变换做一个立方体 。这个要一点空间想象力
首先创建一个项目拖6个view都居中，放到一个容器中
t9.png
然后再利用3d变换画六个面，Container view决定视野,然后根据手势决定视野角度
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var containerV:UIView!
@IBOutlet weak var v1:UIView!
@IBOutlet weak var v2:UIView!
@IBOutlet weak var v3:UIView!
@IBOutlet weak var v4:UIView!
@IBOutlet weak var v5:UIView!
@IBOutlet weak var v6:UIView!
var angel = CGFloat(-M_PI/4)
override func viewDidLoad() {
super.viewDidLoad()
var trans = CATransform3DIdentity
trans.m34 = -1 / 500
var trans2 = CATransform3DTranslate(trans, 0, 0, 50)
v1.layer.transform = trans2
trans2 = CATransform3DTranslate(trans, 50, 0, 0)
trans2 = CATransform3DRotate(trans2, CGFloat(M_PI_2) , 0 , 1 , 0);
v2.layer.transform = trans2
trans2 = CATransform3DTranslate(trans, 0, -50, 0)
trans2 = CATransform3DRotate(trans2, CGFloat(M_PI_2) , 1 , 0 , 0);
v3.layer.transform = trans2
trans2 = CATransform3DTranslate(trans, 0, 50, 0)
trans2 = CATransform3DRotate(trans2, CGFloat(-M_PI_2) , -1 , 0 , 0);
v4.layer.transform = trans2
trans2 = CATransform3DTranslate(trans, -50, 0, 0)
trans2 = CATransform3DRotate(trans2, CGFloat(-M_PI_2) , 0 , 1 , 0);
v5.layer.transform = trans2
trans2 = CATransform3DTranslate(trans, 0, 0, -50)
trans2 = CATransform3DRotate(trans2, CGFloat(M_PI) , 0 , 1 , 0);
v6.layer.transform = trans2
trans = CATransform3DRotate(trans, angel , 0, 1 , 0);
trans = CATransform3DRotate(trans, angel , 1, 0 , 0);
containerV.layer.sublayerTransform = trans
let pan = UIPanGestureRecognizer(target: self, action: "handlePan:")
containerV.addGestureRecognizer(pan)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func handlePan(sender:UIPanGestureRecognizer){
let p = sender.translationInView(containerV)
let angel1 = angel+(p.x/30)
let angel2 = angel-(p.y/30)
var trans = CATransform3DIdentity
trans.m34 = -1 / 500
trans = CATransform3DRotate(trans, angel1 , 0, 1 , 0);
trans = CATransform3DRotate(trans, angel2 , 1, 0 , 0);
containerV.layer.sublayerTransform = trans
print("拖动\(p)")
}
}
最终效果图就是上面的gif 。 大家可以去git上下载源码运行下。效果还不错
