.transformEffect用法

.transformEffect 是 SwiftUI 中的一个修饰符,用于对视图应用 2D 仿射变换(Affine Transform) ,比如平移、旋转、缩放或倾斜等效果。它基于 CGAffineTransform,适用于调整视图的位置、大小或形状,但不同于 3D 变换(如 rotation3DEffect)。


基本用法

swift 复制代码
视图
    .transformEffect(CGAffineTransform(translationX: 50, y: 50)) // 平移

常见变换示例

  1. 平移(Translation)

    将视图沿 X/Y 轴移动:

    swift 复制代码
    .transformEffect(CGAffineTransform(translationX: 20, y: 10))
  2. 旋转(Rotation)

    旋转视图(弧度制):

    swift 复制代码
    .transformEffect(CGAffineTransform(rotationAngle: .pi / 4)) // 45度
  3. 缩放(Scale)

    调整视图大小:

    swift 复制代码
    .transformEffect(CGAffineTransform(scaleX: 1.5, y: 0.8))
  4. 组合变换

    通过链式调用或直接组合:

    swift 复制代码
    let transform = CGAffineTransform(translationX: 50, y: 0)
        .rotated(by: .pi / 4)
        .scaledBy(x: 2, y: 1)

注意事项

  • 2D 变换 :与 .rotation3DEffect 不同,transformEffect 仅支持 2D 变换。
  • 性能 :适合轻量级动画,复杂变换建议结合 Canvas 或 Metal。
  • 坐标系 :变换基于视图的 局部坐标系(以自身中心为原点)。

完整示例

swift 复制代码
Text("Hello, SwiftUI")
    .padding()
    .background(Color.blue)
    .foregroundColor(.white)
    .transformEffect(CGAffineTransform(rotationAngle: .pi / 6)) // 旋转30度

如果需要 3D 变换 (如透视效果),应改用 .rotation3DEffect 或自定义 ProjectionTransform

相关推荐
全宝几秒前
前端也能这么丝滑!Node + Vue3 实现 SSE 流式文本输出全流程
前端·javascript·node.js
前端小巷子14 分钟前
Web缓存:原理、策略与优化
前端·面试
小磊哥er16 分钟前
【前端工程化】前端工作中如何协同管理开发任务?
前端
程序员小白条21 分钟前
我的第二份实习,学校附近,但是干前端!
java·开发语言·前端·数据结构·算法·职场和发展
编程大全21 分钟前
2025年前端面试题
前端
萌萌哒草头将军33 分钟前
🔥🔥🔥 NuxtLabs 宣布加入了 Vercel !
前端·javascript·vue.js
LuciferHuang8 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing8 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20158 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言9 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端