SwiftUI中的手势（MagnificationGesture、 RotationGesture）

本文主要是介绍SwiftUI中的手势（MagnificationGesture、 RotationGesture），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

MagnificationGesture 放缩手势

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

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

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

.gesture(MagnificationGesture().updating($scalingRatio, body: { value, state, _ instate = value}).onEnded({ value inlastRatio *= 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.0var 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, _ instate = value}).onEnded({ value inlastRatio *= value}))}}
}

RotationGesture 旋转手势

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

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

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

.gesture(RotationGesture().updating($rotateAngle, body: { value, state, _ instate = value}).onEnded({ value inlet newDegress = lastAngle.degrees + value.degreeslastAngle = 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, _ instate = value}).onEnded({ value inlet newDegress = lastAngle.degrees + value.degreeslastAngle = Angle(degrees: newDegress)}))}}
}