如何将透视转换应用于 UIView?

How do I apply a perspective transform to a UIView?

提问人:Nick Cartwright 提问时间:12/8/2008 最后编辑:TheNeilNick Cartwright 更新时间:1/31/2021 访问量:110963

问:

我希望在 UIView 上执行透视转换(例如在 coverflow 中看到)

有谁知道这是否可行?

我已经调查了使用并浏览了所有务实的程序员 Core Animation 播客,但我仍然不清楚如何在 iPhone 上创建这种转换。CALayer

任何帮助、指针或示例代码片段将不胜感激!

iOS Cocoa-Touch UIView 核心动画 Calayer

评论

0赞 b123400 11/21/2010
我不确定这是否适合你,但当我制作动画时,我发现 m14 更适合我 仅供参考:)
0赞 Nick Cartwright 11/22/2010
谢谢!- 你给这个什么值?
1赞 fluffy 7/30/2011
通过设置 m14,您实际上奇怪地在 X 轴上倾斜视锥体。数学是完全有效的,但在一般情况下,它会让事情变得有点混乱。
0赞 Markus 7/22/2012
一篇关于 CALayer 3D 变换和透视的非常好的文章,包括对 m34 字段的详尽解释,可以在这篇优秀的文章中找到: 核心动画 3d-模型

答:

7赞 Ben Gottlieb 12/8/2008 #1

只能使用直接应用于 UIView 的 transform 属性的 Core Graphics(仅限 Quartz、2D)转换。要在 coverflow 中获得效果,您必须使用 CATransform3D,它应用于 3D 空间,因此可以为您提供所需的透视图。您只能将 CATransform3D 应用于图层,而不能应用于视图,因此您必须为此切换到图层。

查看 Xcode 附带的“CovertFlow”示例。它仅适用于 mac(即不适用于 iPhone),但很多概念都很好地转移了。

评论

0赞 Alex 12/8/2008
我正在 /Developer/Examples 中寻找这个 coverflow 示例,但没有成功,在哪里可以找到它?
0赞 Ben Gottlieb 12/8/2008
它实际上是“CovertFlow”,它在 /Developer/Examples/Quartz/Core Animation/”
332赞 Brad Larson 12/10/2008 #2

正如 Ben 所说,您需要使用该层,使用 a 来执行 .如此处所述,让透视工作的诀窍是直接访问 (m34) 的矩阵之一。矩阵数学从来都不是我的专长,所以我无法确切解释为什么它有效,但它确实如此。您需要将初始变换的此值设置为负分数,然后将图层旋转变换应用于该值。您还应该能够执行以下操作:UIView'sCATransform3Dlayer'srotationcellsCATransform3D

Objective-C语言

UIView *myView = [[self subviews] objectAtIndex:0];
CALayer *layer = myView.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;

斯威夫特 5.0

if let myView = self.subviews.first {
    let layer = myView.layer
    var rotationAndPerspectiveTransform = CATransform3DIdentity
    rotationAndPerspectiveTransform.m34 = 1.0 / -500
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0 * .pi / 180.0, 0.0, 1.0, 0.0)
    layer.transform = rotationAndPerspectiveTransform
}

它从头开始为每次旋转重建图层变换。

可以在此处找到一个完整的示例(带有代码),其中我根据 Bill Dudney 的示例在几个 上实现了基于触摸的旋转和缩放。该程序的最新版本,在页面的最底部,实现了这种透视操作。代码应该相当简单易读。CALayers

您在响应中引用的是应用于 .如果您没有任何子图层,请不要担心。我在示例中使用 sublayerTransform,仅仅是因为我正在旋转的一层中包含两个。sublayerTransformUIView'sCALayerCALayers

评论

1赞 Nick Cartwright 12/30/2008
谢谢布拉德 - 你是明星。PS:很抱歉,您的出色答案迟到了!缺口。
0赞 iPadDeveloper2011 2/19/2011
这对我来说效果很好,除了我似乎失去了一半的图像(沿着垂直分割)——有时是 LHS,有时是 RHS。
18赞 Brad Larson 2/21/2011
@iPadDeveloper2011 - 很有可能,当同一平面上有另一个不透明的视图或图层时,您正在尝试旋转视图或图层。然后,投影到远离屏幕的视图或图层的一半将位于另一个视图的下方,因此被隐藏。您可以对视图层次结构进行重新排序以防止出现这种情况,也可以使用 zPosition 属性将前景视图移动到截断前景视图的上方。
26赞 fluffy 7/30/2011
仅供参考,m34 单元格影响透视变换的原因是矩阵中的单元会影响世界空间 Z 值如何映射到裁剪空间 W 值(用于透视投影)。阅读同质变换矩阵以获取更多信息。
2赞 Brad Larson 1/17/2013
@uerceg - 你会想把它作为一个单独的问题来问,最好是用图片来说明正在发生的事情和你想发生的事情。
-1赞 Sunil M. 12/21/2017 #3

您可以使用 iCarousel SDK 获得准确的轮播效果。

您可以使用奇妙且免费的 iCarousel 库在 iOS 上获得即时的 Cover Flow 效果。你可以从 https://github.com/nicklockwood/iCarousel 下载它,并通过添加桥接头(它是用 Objective-C 编写的)相当容易地将其放入你的 Xcode 项目中。

如果您之前没有将 Objective-C 代码添加到 Swift 项目,请按照以下步骤操作:

  • 下载 iCarousel 并解压缩
  • 进入解压缩的文件夹,打开其 iCarousel 子文件夹,然后选择 iCarousel.h 和 iCarousel.m 并将它们拖到项目导航中——这是 Xcode 中的左窗格。就在 Info.plist 下面就可以了。
  • 选中“如果需要,复制项目”,然后单击“完成”。
  • Xcode 将提示您消息“是否要配置 Objective-C 桥接标头?点击“创建桥接头” 您应该会在项目中看到一个名为 YourProjectName-Bridging-Header.h 的新文件。
  • 将以下行添加到文件:#import“iCarousel.h”
  • 将 iCarousel 添加到项目中后,您就可以开始使用它了。
  • 请确保符合 iCarouselDelegate 和 iCarouselDataSource 协议。

Swift 3 示例代码:

    override func viewDidLoad() {
      super.viewDidLoad()
      let carousel = iCarousel(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
      carousel.dataSource = self
      carousel.type = .coverFlow
      view.addSubview(carousel) 
    }

   func numberOfItems(in carousel: iCarousel) -> Int {
        return 10
    }

    func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
        let imageView: UIImageView

        if view != nil {
            imageView = view as! UIImageView
        } else {
            imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 128, height: 128))
        }

        imageView.image = UIImage(named: "example")

        return imageView
    }
0赞 Amir Ardalan 1/31/2021 #4

斯威夫特 5.0

func makeTransform(horizontalDegree: CGFloat, verticalDegree: CGFloat, maxVertical: CGFloat,rotateDegree: CGFloat, maxHorizontal: CGFloat) -> CATransform3D {
    var transform = CATransform3DIdentity
           
    transform.m34 = 1 / -500
    
    let xAnchor = (horizontalDegree / (2 * maxHorizontal)) + 0.5
    let yAnchor = (verticalDegree / (-2 * maxVertical)) + 0.5
    let anchor = CGPoint(x: xAnchor, y: yAnchor)
    
    setAnchorPoint(anchorPoint: anchor, forView: self.imgView)
    let hDegree  = (CGFloat(horizontalDegree) * .pi)  / 180
    let vDegree  = (CGFloat(verticalDegree) * .pi)  / 180
    let rDegree  = (CGFloat(rotateDegree) * .pi)  / 180
    transform = CATransform3DRotate(transform, vDegree , 1, 0, 0)
    transform = CATransform3DRotate(transform, hDegree , 0, 1, 0)
    transform = CATransform3DRotate(transform, rDegree , 0, 0, 1)
    
    return transform
}

func setAnchorPoint(anchorPoint: CGPoint, forView view: UIView) {
    var newPoint = CGPoint(x: view.bounds.size.width * anchorPoint.x, y: view.bounds.size.height * anchorPoint.y)
    var oldPoint = CGPoint(x: view.bounds.size.width * view.layer.anchorPoint.x, y: view.bounds.size.height * view.layer.anchorPoint.y)
    
    newPoint = newPoint.applying(view.transform)
    oldPoint = oldPoint.applying(view.transform)
    
    var position = view.layer.position
    position.x -= oldPoint.x
    position.x += newPoint.x
    
    position.y -= oldPoint.y
    position.y += newPoint.y
    
    print("Anchor: \(anchorPoint)")
    
    view.layer.position = position
    view.layer.anchorPoint = anchorPoint
}

您只需要使用您的学位调用该函数。例如:

var transform = makeTransform(horizontalDegree: 20.0 , verticalDegree: 25.0, maxVertical: 25, rotateDegree: 20, maxHorizontal: 25)
imgView.layer.transform = transform