SwiftUI中的手势（MagnificationGesture、 RotationGesture）

news2025/1/13 13:20:58

通过前两篇文章的探索，手势的基本使用规则已经较深的了解，本篇文章主要看看放缩手势MagnificationGesture和旋转手势RotationGesture。

MagnificationGesture 放缩手势

放缩手势在App中用的也比较广泛，下面先看一个示例效果：
在这里插入图片描述
上面示例中将图片进行了放大，主要使用了MagnificationGesture手势，并对该手势添加了.updating和.onEnded修饰符。

在添加.updating修饰符的时候绑定了一个@GestureState修饰的scalingRatio变量，用来记录每次放大的比例值，每次放缩结束该值重置。

同时为了每次的放缩都基于上次的大小继续放缩，需要用一个@State修饰的变量记录每次放缩结束的比例值，并在.onEnded修饰符中进行赋值。

.gesture(
  MagnificationGesture()
    .updating($scalingRatio, body: { value, state, _ in
      state = value
    })
    .onEnded({ value in
      lastRatio *= value
    })
)

有了这两个值后，在Image图片上添加.scaleEffect修饰符，改变Image的尺寸。

.scaleEffect(scalingRatio)
.scaleEffect(lastRatio)

如果用一个.scaleEffect修饰符，记得将两个变量相乘。

.scaleEffect(scalingRatio * lastRatio)

另外在视图的顶部对scalingRatio和lastRatio两个变量进行了显示，可以直观的观察整个放缩过程中，这两个变量的变化。

在松手的时候，想要将图片变回原来的尺寸，只需要将lastRatio以及相关代码移除即可。

完成代码如下：

struct MagnificationGestureDemo: View {

  @GestureState private var scalingRatio: CGFloat = 1.0
  @State private var lastRatio: CGFloat = 1.0

  var body: some View {
    ZStack {
      VStack {
        Text("scalingRatio: \(scalingRatio)")
        Text("lastRatio: \(lastRatio)")
        Spacer()
      }
      Image("liuyifei")
        .resizable()
        .frame(width: 200, height: 260)
        .scaleEffect(scalingRatio)
        .scaleEffect(lastRatio)
        .gesture(
          MagnificationGesture()
            .updating($scalingRatio, body: { value, state, _ in
              state = value
            })
            .onEnded({ value in
              lastRatio *= value
            })
      )
    }
  }
}

RotationGesture 旋转手势

旋转手势和放缩手势用法基本上是一致的，先看一下示例效果：
在这里插入图片描述
上面示例中将图片进行了旋转，主要使用了RotationGesture手势，并对该手势添加了.updating和.onEnded修饰符。

在添加.updating修饰符的时候绑定了一个@GestureState修饰的rotateAngle变量，用来记录每次旋转的角度，每次旋转结束该值重置。

同时为了每次的旋转都基于上次的角度继续旋转，需要用一个@State修饰的变量记录每次旋转的角度，并在.onEnded修饰符中进行赋值。

.gesture(
  RotationGesture()
    .updating($rotateAngle, body: { value, state, _ in
      state = value
    })
    .onEnded({ value in
      let newDegress = lastAngle.degrees + value.degrees
      lastAngle = Angle(degrees: newDegress)
    })
)

有了这两个值后，在Image图片上添加.rotationEffect修饰符，改变Image的尺寸。

.rotationEffect(rotateAngle)
.rotationEffect(lastAngle)

如果用一个.rotationEffect修饰符，需要将两个变量的degrees相加构建一个新的Angle传入进去。

.rotationEffect(Angle(degrees: rotateAngle.degrees + lastAngle.degrees))

另外在视图的顶部对rotateAngle和lastAngle两个变量进行了显示，可以直观的观察整个旋转过程中，这两个变量的变化。

在松手的时候，想要将图片变回原来的角度，只需要将lastAngle以及相关代码移除即可。

完成代码如下：

struct RotationGestureDemo: View {
  @GestureState private var rotateAngle: Angle = Angle(degrees: 0.0)
  @State private var lastAngle: Angle = Angle(degrees: 0.0)

  var body: some View {
    ZStack {
      VStack {
        Text("rotateAngle: \(rotateAngle.degrees)")
        Text("lastAngle: \(lastAngle.degrees)")
        Spacer()
      }
      Image("liuyifei")
        .resizable()
        .frame(width: 200, height: 260)
        .rotationEffect(rotateAngle)
        .rotationEffect(lastAngle)
        .gesture(
          RotationGesture()
            .updating($rotateAngle, body: { value, state, _ in
              state = value
            })
            .onEnded({ value in
              let newDegress = lastAngle.degrees + value.degrees
              lastAngle = Angle(degrees: newDegress)
            })
      )
    }
  }
}