SwiftUI修饰视图缩放比例的scaleEffect

scaleEffect 是 SwiftUI 提供的一个修饰符，用于修改视图的缩放比例。这可以让视图在屏幕上按比例放大或缩小。

基本用法

scaleEffect 的参数有以下两种形式：

1、指定单一缩放比例：

缩放视图的宽度和高度，比例相同。

Text("Hello, World!")
    .scaleEffect(1.5) // 放大 1.5 倍

2、指定宽度和高度的缩放比例：

分别缩放宽度和高度，可以实现非等比缩放。

Text("Hello, World!")
    .scaleEffect(x: 2.0, y: 0.5) // 宽度放大 2 倍，高度缩小为原来的 0.5 倍

配合动画

scaleEffect 通常用于实现动画效果，比如点击按钮后放大或缩小：

struct ScaleEffectExample: View {
    @State private var isScaled = false

    var body: some View {
        Text("Tap Me")
            .font(.largeTitle)
            .scaleEffect(isScaled ? 1.5 : 1.0) // 动态调整缩放比例
            .animation(.easeInOut, value: isScaled) // 动画过渡
            .onTapGesture {
                isScaled.toggle()
            }
    }
}

在这个例子中：

初始状态下，文字的比例为 1.0。

点击后，通过状态变量 isScaled 切换比例，触发动画。

配合 anchor 参数

scaleEffect 提供了一个可选的 anchor 参数，用来指定缩放的参考点（默认是 .center）。可以选择视图的任意角点或自定义位置作为缩放中心。

Image(systemName: "star.fill")
    .resizable()
    .frame(width: 100, height: 100)
    .scaleEffect(1.5, anchor: .bottomTrailing) // 从右下角进行缩放
    .border(Color.red, width: 2)

常见的 anchor 值有：

.center（默认值）：从视图中心缩放。

.top、.bottom、.leading、.trailing：从指定边缘缩放。

.topLeading、.topTrailing、.bottomLeading、.bottomTrailing：从指定角点缩放。

也可以使用 UnitPoint 来指定自定义锚点，例如 UnitPoint(x: 0.3, y: 0.7)。

结合手势的示例

scaleEffect 可以与手势结合，动态调整视图的缩放比例，例如使用 MagnificationGesture：

struct PinchToZoomExample: View {
    @State private var scale: CGFloat = 1.0

    var body: some View {
        Image(systemName: "photo")
            .resizable()
            .scaledToFit()
            .frame(width: 200, height: 200)
            .scaleEffect(scale)
            .gesture(
                MagnificationGesture()
                    .onChanged { value in
                        scale = value // 根据手势调整缩放比例
                    }
                    .onEnded { _ in
                        scale = 1.0 // 手势结束后恢复初始状态
                    }
            )
    }
}

应用场景

1、放大或缩小视图：

直接用于显示视图的缩放效果。

2、动画效果：

在用户交互中，结合 scaleEffect 和 animation 实现动态缩放。

3、缩放手势：

与 MagnificationGesture 搭配实现平滑的手势缩放体验。

4、UI 细节调整：

用于突出某些特定元素，比如放大一个选中的项目。

注意事项

负值缩放：scaleEffect 支持负值，但会导致视图翻转。例如，scaleEffect(-1) 会水平翻转视图。

视图布局：缩放比例仅影响视图的显示大小，不会改变其在父视图中的布局尺寸（可以结合 .frame 控制）。性能影响：频繁或大幅度调整缩放可能对性能有影响，尤其是在复杂视图中。