.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

相关推荐
小公主9 分钟前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴12 分钟前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子23 分钟前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder31 分钟前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛33 分钟前
vue3中实现echarts打印功能
前端·vue.js·echarts
尘心cx34 分钟前
前端-HTML-day2
前端·html
歘chua36 分钟前
组件封装:封装一个可复用的crud界面的思路
前端
徐小夕37 分钟前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
爱编程的喵39 分钟前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css
zmirror40 分钟前
Webpack5 多页面实践
前端