iOS中的3D變換（二）

級別： ★★☆☆☆
標籤：「iOS」「Swift」「CATransform3D」「3D變換」
做者： 大成小棧
審校： QiShare團隊

---

1. 經常使用的3D變換方法

CATransform3DScale返回經過縮放現有變換構造的變換矩陣，sx/sy/sz即爲x方向、y方向和z方向的縮放比例

CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx,
    CGFloat sy, CGFloat sz)
複製代碼

CATransform3DRotate返回經過旋轉現有變換構造的變換矩陣，angle表明弧度，x,y,z表明各個軸上旋轉的弧度倍數

CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle,
    CGFloat x, CGFloat y, CGFloat z)
複製代碼

CATransform3DInvert返回反轉後的變換矩陣

CATransform3D CATransform3DInvert (CATransform3D t)
複製代碼

CATransform3DTranslate返回實現x/y/z軸上平移相應距離的變換矩陣

CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx,
    CGFloat ty, CGFloat tz)
複製代碼

CATransform3DConcat返回同時做用兩種變換矩陣的矩陣

CATransform3D CATransform3DConcat (CATransform3D a, CATransform3D b)
複製代碼

幾個特殊的變換矩陣 CATransform3DMakeScale/CATransform3DMakeRotation/CATransform3DMakeTranslation一樣是做用於原始視圖的變換矩陣

/* Returns a transform that translates by '(tx, ty, tz)':
 * t' = [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1]. */ CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz) /* Returns a transform that scales by `(sx, sy, sz)':
 * t' = [sx 0 0 0; 0 sy 0 0; 0 0 sz 0; 0 0 0 1]. */ CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz) /* Returns a transform that rotates by 'angle' radians about the vector * '(x, y, z)'. If the vector has length zero the identity transform is * returned. */ CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z) CATransform3DIdentity[1 0 0 0; 0 1 0 0; 0 0 1 0; 0 0 0 1]，人畜無害矩陣，一般用於恢復初始狀態 複製代碼

2. 實現一個旋轉的三維立方體

import UIKit

class CATransform3DController: UIViewController {

    var animateCube = UIView.init()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "Transform3D"
        self.view.backgroundColor = .white
        self.edgesForExtendedLayout = [UIRectEdge.left, UIRectEdge.right]

        self.testTransform3D()
    }
    
    func testTransform3D() {
        
        let targetRect = CGRect.init(x: 0, y: 0, width: 200, height: 200)
        animateCube.frame = targetRect
        animateCube.center = self.view.center
        self.view.addSubview(animateCube)
        
        let frontView = UIView.init(frame: targetRect)
        frontView.backgroundColor = UIColor.blue.withAlphaComponent(0.25)
        frontView.layer.transform = CATransform3DTranslate(frontView.layer.transform, 0, 0, 100)
        self.animateCube.addSubview(frontView)
        
        let backView = UIView.init(frame: targetRect)
        backView.backgroundColor = UIColor.black.withAlphaComponent(0.5)
        backView.layer.transform = CATransform3DTranslate(backView.layer.transform, 0, 0, -100)
        self.animateCube.addSubview(backView)
        
        let leftView = UIView.init(frame: targetRect)
        leftView.backgroundColor = UIColor.yellow.withAlphaComponent(0.5)
        leftView.layer.transform = CATransform3DTranslate(leftView.layer.transform, -100, 0, 0)
        leftView.layer.transform = CATransform3DRotate(leftView.layer.transform, CGFloat(Double.pi / 2.0), 0, 1, 0)
        self.animateCube.addSubview(leftView)
        
        let rightView = UIView.init(frame: targetRect)
        rightView.backgroundColor = UIColor.purple.withAlphaComponent(0.5)
        rightView.layer.transform = CATransform3DTranslate(rightView.layer.transform, 100, 0, 0)
        rightView.layer.transform = CATransform3DRotate(rightView.layer.transform, CGFloat(Double.pi / 2.0), 0, 1, 0)
        self.animateCube.addSubview(rightView)
        
        let headView = UIView.init(frame: targetRect)
        headView.backgroundColor = UIColor.orange.withAlphaComponent(0.5)
        headView.layer.transform = CATransform3DTranslate(headView.layer.transform, 0, 100, 0)
        headView.layer.transform = CATransform3DRotate(headView.layer.transform, CGFloat(Double.pi / 2.0), 1, 0, 0)
        self.animateCube.addSubview(headView)
        
        let footView = UIView.init(frame: targetRect)
        footView.backgroundColor = UIColor.green.withAlphaComponent(0.5)
        footView.layer.transform = CATransform3DTranslate(footView.layer.transform, 0, -100, 0)
        footView.layer.transform = CATransform3DRotate(footView.layer.transform, CGFloat(Double.pi / 2.0), -1, 0, 0)
        self.animateCube.addSubview(footView)
        
        self.animateCube.layer.borderColor = UIColor.red.cgColor
        self.animateCube.layer.borderWidth = 2.0
        
        //self.animateCube.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
        
        //var transform3D: CATransform3D = CATransform3DIdentity
        //transform3D.m34 = -1.0 / 500.0
        //self.animateCube.layer.sublayerTransform = transform3D

        weak var weakSelf = self
        let angle = CGFloat(Double.pi) / -360.0
        var transform3D: CATransform3D = CATransform3DIdentity
        let timer = Timer.init(timeInterval: 1.0 / 60.0, repeats: true) { (_) in
            transform3D = CATransform3DRotate(transform3D, angle, 1, 1, 0.5)
            weakSelf!.animateCube.layer.sublayerTransform = transform3D
        }
        RunLoop.current.add(timer, forMode: RunLoop.Mode.common)
    }
}
複製代碼

示例：

參考文章：https://www.jianshu.com/p/3dd14cfbdc53 感謝！

---

瞭解更多iOS及相關新技術，請關注咱們的公衆號：

小編微信：可加並拉入《QiShare技術交流羣》。

關注咱們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公衆號)

推薦文章：
iOS中的3D變換（一）
WebSocket 雙端實踐（iOS/ Golang）
今天咱們來聊一聊WebSocket（iOS/Golang）
用 Swift 進行貝塞爾曲線繪製
Swift 5.1 (11) - 方法
Swift 5.1 (10) - 屬性
iOS App後臺保活
奇舞週刊