美文网首页
CATransform3D下立方形

CATransform3D下立方形

作者: 迷路的小小 | 来源:发表于2021-04-15 14:32 被阅读0次

1. Storybord准备工作

storybord控制器视图
立方体各边布局

2. CubeViewController控制器

class CubeViewController: UIViewController {
    @IBOutlet weak var tranView: UIView!
    @IBOutlet weak var orangeView: UIView!
    @IBOutlet weak var tealView: UIView!
    @IBOutlet weak var redView: UIView!
    @IBOutlet weak var purpleView: UIView!
    @IBOutlet weak var greenView: UIView!
    @IBOutlet weak var yellowView: UIView!
    
    var angle = CGPoint.zero
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var transform = CATransform3DRotate(CATransform3DIdentity, .pi / 2, 1, 0, 0)
        orangeView.layer.transform = transform
        purpleView.layer.transform = transform
        
        transform = CATransform3DRotate(CATransform3DIdentity, .pi / 2, 0, 1, 0)
        tealView.layer.transform = transform
        redView.layer.transform = transform
        
        greenView.layer.transform = CATransform3DTranslate(CATransform3DIdentity, 0, 0, -75)
        yellowView.layer.transform = CATransform3DTranslate(CATransform3DIdentity, 0, 0, 75)
        
        let pan = UIPanGestureRecognizer(target: self, action: #selector(viewTransform(sender:)))
        tranView.addGestureRecognizer(pan)
        // Do any additional setup after loading the view.
    }
    
    @objc func viewTransform(sender: UIPanGestureRecognizer) {
        let point = sender.translation(in: tranView)
        let angleX = angle.x + point.x / 30
        let angleY = angle.y - point.y / 30
                
        var transform = CATransform3DIdentity
        transform.m34 = -1 / 500
        transform = CATransform3DRotate(transform, angleX, 0, 1, 0)
        transform = CATransform3DRotate(transform, angleY, 1, 0, 0)
        tranView.layer.sublayerTransform = transform
        
        if sender.state == .ended {
            angle.x = angleX
            angle.y = angleY
        }
    }

}

其中m34为深景效果

内窄外宽深景效果 立方体

相关文章

网友评论

      本文标题:CATransform3D下立方形

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