如何在iPhone/iPad上模仿Photo.app倾斜交互？

Question

我正在尝试模仿 iPhone 上 Photo.app 的倾斜交互。我正在使用 CATransform3DMakeRotation 但还没有真正能够实现它。

看起来照片一开始是从一侧旋转，同时放大的，在某些时候，旋转轴也移动到了照片的另一部分。

任何提示将不胜感激！

Answer 1

您会想看看 CATransform3D

这里有一个简单的示例，可以帮助您上路...

使用此 300x300 图像：

class PerspectiveVC: UIViewController {
    
    let imgView = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard let img = UIImage(named: "test") else { fatalError("could not load test image") }
        
        imgView.image = img
        imgView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(imgView)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            imgView.widthAnchor.constraint(equalToConstant: 300.0),
            imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width),
            imgView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            imgView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
        ])
        
    }
    
    var transformToggle: Bool = false
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        
        let layer = imgView.layer
        
        transformToggle.toggle()
        
        if transformToggle {

            // create "rotate on x-axis" transform
            var perspectiveTransform = CATransform3DIdentity
            perspectiveTransform.m34 = 1.0 / -500
            perspectiveTransform = CATransform3DRotate(perspectiveTransform, 45.0 * .pi / 180.0, 1.0, 0.0, 0.0)
            
            // create "scale on y-axis" transform (3x)
            let scaleTransform = CATransform3DMakeScale(1.0, 3.0, 0.0)

            // concatentate the two transforms
            let finalTransform = CATransform3DConcat(scaleTransform, perspectiveTransform)
            
            // apply the transform
            layer.transform = finalTransform
            
        } else {
            
            // reset the transform
            layer.transform = CATransform3DIdentity
            
        }
    }
    
}

这样开始：

点击任意位置可打开/关闭变换：