Swift Academy · 课时

变换与三维效果

Q: 「变换与三维效果」这节课中我会学到什么？

应用仿射变换和三维变换。 你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

应用仿射变换和三维变换。

第 3 / 4 课13 个步骤

变换与三维效果 是 CoddyKit 上的免费 Swift Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Swift Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Swift Academy 课程共包含 4 节课。

变换可以移动和扭曲图层

变换可以重新塑造图层——平移、缩放、旋转或倾斜——而不会改变其边界。Core Animation 同时支持二维（CGAffineTransform）和三维（CATransform3D）变换。

二维仿射变换

CGAffineTransform 用于处理平面变换。通过串联组合多个变换；组合顺序很重要。

import UIKit
var t = CGAffineTransform.identity
t = t.scaledBy(x: 1.5, y: 1.5)
t = t.rotated(by: .pi / 6)
layer.setAffineTransform(t)

CATransform3D

CATransform3D 是一个支持真正三维效果的 4×4 矩阵。从 CATransform3DIdentity 开始，然后在空间中应用平移、缩放和旋转。

var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = t

三维旋转

使用 CATransform3DRotate(t, angle, x, y, z) 绕任意轴旋转。绕 y 轴旋转可以翻转卡片，绕 x 轴旋转则会让卡片向前倾斜。

let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
    CATransform3DIdentity, angle, 0, 1, 0) // around y

透视效果

没有透视效果，普通的三维旋转看起来会很平。将单位矩阵的 m34 元素设置为较小的负值（约为 -1/500），即可增加深度感。

var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)

m34 如何产生深度感

m34 项会根据深度缩小 x 和 y，因此距离更远的点会变小。较小的绝对值（更大的分母）会产生细微的透视效果；较大的绝对值则会夸大透视效果。

// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0

锚点与变换

变换会围绕 anchorPoint 进行。若要让卡片绕左边缘旋转，请先将 anchorPoint 设置为 (0, 0.5)。

layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
    CATransform3DIdentity, .pi / 3, 0, 1, 0)

为变换设置动画

整个变换都可以进行动画处理。可以为 transform 键路径设置动画，也可以使用 transform.rotation.y 这样的子键路径，仅围绕某个轴进行动画。

let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")

子层变换

在父层上设置 sublayerTransform，即可一次性将透视效果应用到所有子层，这对三维容器和轮播组件非常实用。

var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = t

zPosition 与深度排序

zPosition 控制三维空间中的绘制顺序。值越大，渲染时越靠前。将它与旋转结合，可以创建分层且相互重叠的三维场景。

frontCard.zPosition = 10
backCard.zPosition = 0

组合变换

串联多个变换来组合效果。请记住，矩阵乘法不满足交换律：先旋转再缩放，与先缩放再旋转的结果不同。

var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)

快速检查：变换

请检验您对三维变换的理解。

在交互式课程中回答

回顾：变换与三维效果

变换可以重塑图层，但不会改变其边界：二维使用 CGAffineTransform，真正的三维效果使用 CATransform3D。设置 m34（约为 -1/500）来增加深度，使用 anchorPoint 设置旋转轴心，并通过 sublayerTransform 为容器应用透视效果。

您可以整体或按坐标轴对变换进行动画处理，使用 zPosition 排序深度，并记住变换的组合顺序很重要。

免费开始

用 AI 导师学习 Swift — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 122
课程: 409

免费开始学习查看完整课程

常见问题解答

「变换与三维效果」课时是免费的吗？

是的 — 「变换与三维效果」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Swift Academy 课程的其余内容，请升级到 CoddyKit PRO。 Swift Academy 课程共包含 4 节课。

「变换与三维效果」这节课中我会学到什么？

应用仿射变换和三维变换。你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Swift Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Swift Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「变换与三维效果」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Swift Academy 课中编写并运行代码吗？

能。每节 Swift Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Swift Academy