本教程会用 DragGesture 再打造一个咱们经常在 app 中见到的交互动画作用，这个作用很有利于提高用户交互体验，相信你在很多 app 中见过这个交互，咱们来一同看看具体完成吧

本章节的比如是一个能够上下拖动的登录页面，页面搭建很简单咱们就不细讲了，我把代码贴在下面

初始状态

struct DragGestureSample2: View {
    var body: some View {
        ZStack {
            Color.green
                .ignoresSafeArea()
            SignupView()
        }
        .ignoresSafeArea(edges: .bottom)
    }
}

struct SignupView: View {
    var body: some View {
        VStack(spacing: 30) {
            Image(systemName: "chevron.up")
                .padding(.top)
            Text("Sign up")
                .font(.headline)
                .fontWeight(.semibold)
            Image(systemName: "flame.fill")
                .resizable()
                .scaledToFit()
                .frame(width: 120, height: 120)
            Text("这是我最喜欢的SwiftUI教程，我推荐给一切的的盆友们关注，点赞。也能够关注大众号，每天都会更新新知识哟，大众号：RobotPBQ")
                .multilineTextAlignment(.center)
            Text("Create an Account".uppercased())
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .padding(.horizontal)
                .background(Color.black.cornerRadius(10))
            Spacer()
        }
        .frame(maxWidth: .infinity)
        .background(Color.white)
        .cornerRadius(30)
    }
}

作用如下：

SwiftUI魔法：通过DragGesture互动提升用户体验

下面咱们来开始今天的主题内容。

把页面放置在View的底部

咱们把这个登录的页面往下移动到只留出头部的箭头和登录的字样。

能够创立一个 startingOffsetY 变量，用于保存起始值，运用 startingOffsetY 来把页面移动到底部。

@State var startingOffsetY: CGFloat = UIScreen.main.bounds.height * 0.85
SignupView()
  .offset(y: startingOffsetY)

SwiftUI魔法：通过DragGesture互动提升用户体验

移动目标视图

当咱们运用 DragGesture 手势拖动页面底部的白色区域时，页面会随着咱们的手势来进行页面的上下位移

咱们用一个变量来保存当时位移的间隔

@State var currentDragOffsetY: CGFloat = 0

在 SignupView 的下面再弥补一个Offset

SignupView()
                .offset(y: startingOffsetY)
 .offset(y: currentDragOffsetY) 
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            withAnimation(.spring()) {
 currentDragOffsetY = value.translation.height
                            }
                        }

此时咱们已经能够移动 SignupView 视图了。可是你会发现你在拖动的过程中，视图一不小心就不见了。

SwiftUI魔法：通过DragGesture互动提升用户体验

原因是因为没有处理 onEnded 事情。咱们来处理一下

处理完毕事情

咱们需求再创立一个完毕为值的 endingOffsetY 变量。

 @State var endingOffsetY: CGFloat = 0
SignupView()
                .offset(y: startingOffsetY)
                .offset(y: currentDragOffsetY)
 .offset(y: endingOffsetY)
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            withAnimation(.spring()) {
                                currentDragOffsetY = value.translation.height
                            }
                        }
                        .onEnded { value in
                        }
                )

处理向上的手势

首先咱们需求一个值，代表手指移动页面向上的间隔。能够运用一个 Text 来 显现 currentDragOffsetY 的值，观察 currentDragOffsetY 的值来判别向上移动多少间隔，就把整个页面悉数显现出来。

通过观察判别，我把向上的间隔限定为-150

.onEnded { value in
                            withAnimation(.spring()) {
                                if currentDragOffsetY < -150 {
 endingOffsetY = -startingOffsetY
                                } 
                                currentDragOffsetY = 0
                            }
                        }

页面拖动过程中，越往上 currentDragOffsetY 的值就越小，所以当视图向上的间隔小于 -150 时，咱们就把 endingOffsetY 的值变成 startingOffsetY 值的负值， 然后吧 currentDragOffsetY 设置为零， 如果不设置为零就会有多个值影响offset。

SwiftUI魔法：通过DragGesture互动提升用户体验

向上的手势处理好了，可是向下的没有处理，所以还是有问题。

处理向下的手势

企图的方位停留在了顶部，当咱们再往下拖动时，当时位移的值 currentDragOffsetY 会越来越大，咱们还是让当时拖动值大于150时，就让企图放在起始方位 startingOffsetY，然后要把 endingOffsetY 的值变成零。

同理 currentDragOffsetY 也要变成零。然后来看看整体作用

SwiftUI魔法：通过DragGesture互动提升用户体验

这种作用，在现在的app中非常常见。快快在你的app中运用起来吧。

大家有什么观点呢？欢迎留言讨论。

大众号：RobotPBQ