美文网首页QiShare文章汇总
iOS中的3D变换(二)

iOS中的3D变换(二)

作者: QiShare | 来源:发表于2020-03-02 16:31 被阅读0次

级别: ★★☆☆☆
标签:「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后台保活
奇舞周刊

相关文章

  • iOS中的3D变换(二)

    级别: ★★☆☆☆标签:「iOS」「Swift」「CATransform3D」「3D变换」作者: 大成小栈审校: ...

  • iOS 中的三维变换 CATransform3D

    之前分享过一篇介绍仿射变换的文章,仿射变换属于平面变换,本文来介绍一下iOS中的3D变换 ——— CATransf...

  • 二、CATransform3D 特效详解

    iOS坐标系详解CATransform3D 特效详解iOS 3D变换 -- CALayer的transform矩阵...

  • iOS中的3D变换(一)

    级别: ★★☆☆☆标签:「iOS」「Swift」「CATransform3D」「3D变换」作者: 大成小栈 审校...

  • CSS3 Transform变形(3D转换)

    CSS3 3D 转换 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功...

  • 8.CATransform3D

    iOS中的CALayer的3D本质上并不能算真正的3D(其视点即观察点或者所谓的照相机的位置是无法变换的),而只是...

  • iOS开发经验(6)-Transform

    目录(transform) 基础及矩阵概念 2D仿射 3D仿射 1. 基础及矩阵概念 在iOS的动画效果中,变换是...

  • Swift 中使用 CGAffineTransform

    iOS 中的二维平面变换一般使用CGAffineTransform,又称为仿射变换。下面我们来介绍一下仿射变换的基...

  • 一篇文章带你了解CSS3 3D 转换知识

    CSS3 3D变换功能允许在3D空间中变换元素。 一、元素的3D转换 使用CSS3 3D变换功能,可以对三维空间中...

  • 一篇文章带你了解CSS3 3D 转换知识

    CSS3 3D变换功能允许在3D空间中变换元素。 一、元素的3D转换 使用CSS3 3D变换功能,可以对三维空间中...

网友评论

    本文标题:iOS中的3D变换(二)

    本文链接:https://www.haomeiwen.com/subject/vblthhtx.html