SwiftUI 中的 scaleEffect 修饰器

SwiftUI 中的 scaleEffect 修饰器

scaleEffect 是 SwiftUI 中用于调整视图缩放比例的修饰器，它可以让视图在二维平面上进行放大或缩小变换。

基本用法

1. 统一缩放

// 整体放大1.5倍
Image("example")
    .scaleEffect(1.5)

// 整体缩小到0.8倍
Text("Hello")
    .scaleEffect(0.8)

2. 分别指定x/y轴缩放

// 水平放大1.2倍，垂直缩小到0.9倍
Circle()
    .scaleEffect(x: 1.2, y: 0.9)

3. 带锚点的缩放

// 以视图顶部中心点为锚点放大
Rectangle()
    .scaleEffect(1.5, anchor: .top)

高级用法

结合动画

@State private var scaled = false

Button("点击缩放") {
    withAnimation(.spring()) {
        scaled.toggle()
    }
}
.scaleEffect(scaled ? 1.5 : 1.0)

组合其他变换

// 缩放+旋转组合
RoundedRectangle(cornerRadius: 10)
    .scaleEffect(0.8)
    .rotationEffect(.degrees(45))

响应手势

@State private var currentScale: CGFloat = 1.0

Image("photo")
    .scaleEffect(currentScale)
    .gesture(MagnificationGesture()
        .onChanged { value in
            currentScale = value
        }
    )

注意事项

1. scaleEffect 不会改变视图的原始布局空间，缩放后的视图仍会占据原始位置和大小的空间
2. 对于需要改变布局空间的情况，可以考虑使用 frame 或 transformEffect
3. 过度缩放可能导致内容模糊，特别是对于位图图像

scaleEffect 是创建动态界面和交互效果的强大工具，常用于按钮反馈、焦点突出和过渡动画等场景。