SwiftUI旋转角度修饰符rotationEffect

在 SwiftUI 中，rotationEffect 是一个修饰符，用于让视图围绕其锚点旋转一定角度。

基本语法

.rotationEffect(_ angle: Angle, anchor: UnitPoint = .center)

参数说明：

1、angle

旋转的角度，类型为 Angle。

可以使用 Angle(degrees:) 或 Angle(radians:) 来指定角度。

例如，旋转 45°：Angle(degrees: 45)。

2、anchor（可选）

旋转的锚点（即视图的哪个点作为旋转中心），类型为 UnitPoint。

默认值是 .center，表示视图的中心点。

常见值包括：

.center（默认）：视图中心。

.top、.bottom、.leading、.trailing：视图的边缘。

.topLeading 等：视图的角点。

自定义锚点：UnitPoint(x: xValue, y: yValue)，取值范围 0 到 1。

使用示例

1、基本旋转 将文本顺时针旋转 90°：

Text("Hello, World!")
	.rotationEffect(Angle(degrees: 90))

效果：

文本会围绕其中心点顺时针旋转 90°。

2、更改旋转锚点

让文本围绕左边缘旋转 90°：

Text("Hello, World!")
	.rotationEffect(Angle(degrees: 90), anchor: .leading)

效果：

文本的左边缘固定，整个视图绕这个点旋转。

3、动态旋转

通过滑块动态调整旋转角度：

struct ContentView: View {
    @State private var rotation: Double = 0

    var body: some View {
        VStack {
            Text("Rotating Text")
                .font(.title)
                .rotationEffect(Angle(degrees: rotation))

            Slider(value: $rotation, in: 0...360)
        }
        .padding()
    }
}

效果：

滑动滑块，文本会动态旋转 0° 到 360°。

应用场景

1、动画效果

结合动画，视图可以旋转：

Text("Spinning")
    .rotationEffect(Angle(degrees: isSpinning ? 360 : 0))
    .animation(.linear(duration: 2).repeatForever(autoreverses: false), value: isSpinning)

2、装饰性布局

用于旋转元素，比如将视图排列成扇形：

ForEach(0..<6) { index in
    Text("\(index)")
        .rotationEffect(Angle(degrees: Double(index) * 60))
}

3、交互效果

实现旋转交互，用户通过手势改变旋转角度。

注意事项

1、旋转的参考点

如果锚点不是 .center，视图会围绕指定的锚点旋转，这可能会导致视图偏移。

2、与其他变换的叠加顺序

如果视图同时使用了 offset、scaleEffect 等变换修饰符，顺序会影响最终效果。rotationEffect 的作用是基于变换修饰符的应用顺序。