LongPressGesture/长按, MagnificationGesture/缩放, RotationGesture/旋转 的使用

1. LongPressGesture 长按操作

  1.1 实现

/// 长按事件
struct LongPressGestureBootcamp: View {
    @State var isComplete: Bool = false
    @State var isSuccess : Bool = false
    
    var body: some View {
       // content1
        content2
    }
    
    // 方式二
    var content2: some View{
        VStack {
            Rectangle()
                .fill(isSuccess ? Color.green : Color.blue)
                .frame(maxWidth: isComplete ? .infinity : 0)
                .frame(height: 55)
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(Color.gray)
            HStack {
                Text("Click Here")
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.black)
                    .cornerRadius(10)
                    .onLongPressGesture(minimumDuration: 1.0, maximumDistance: 50) { isPressing in
                        // 开始点击 -> 最短的持续时间
                        if isPressing {
                            withAnimation(.easeInOut(duration: 1.0)){
                                isComplete = true
                            }
                        }else{
                            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                                if !isSuccess{
                                    withAnimation(.easeInOut){
                                        isComplete = false
                                    }
                                }
                            }
                        }
                        print("isPressing: %@", isPressing)
                    } perform: {
                        // 设置长按时间结束，才执行
                        withAnimation(.easeInOut){
                            isSuccess = true;
                            print("isSuccess: %@", isSuccess)
                        }
                    }
                Text("Reset")
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.black)
                    .cornerRadius(10)
                    .onTapGesture {
                        isComplete = false
                        isSuccess = false
                    }
            }
        }
    }
    
    // 方式一
    var content1: some View{
        VStack {
            Text(isComplete ? "COMPLETED" : "NOT COMPLETED")
                .padding()
                .padding(.horizontal)
                .background(isComplete ? Color.green : Color.gray)
                .cornerRadius(10)
            //.onTapGesture {
            //    isComplete.toggle()
            //}
            // maximumDistance 最大的移动距离
                .onLongPressGesture(minimumDuration: 3.0, maximumDistance: 50)  {
                    isComplete.toggle()
                }
        }
    }
}

  1.2 效果图:

2. MagnificationGesture 缩放手势操作

  2.1 实现

/// 缩放手势操作
struct MagnificationGestureBootcamp: View {
    @State var currentAmount: CGFloat = 0
    @State var lastAmount: CGFloat = 0
    
    // 模拟器得到双指操作快捷键(手势应在 View 内): Ctrl + Alt + 鼠标
    var body: some View {
        //magnificationGesture1
        magnificationGesture2
    }
    
    /// 方式二
    var magnificationGesture2:some View{
        VStack(spacing: 10){
            HStack{
                Circle().frame(width: 35, height: 35)
                Text("Swiftful Thinking")
                Spacer()
                Image(systemName: "ellipsis")
            }
            .padding(.horizontal)
            
            Rectangle()
                .frame(height: 300)
                .scaleEffect(1 + currentAmount)
                .gesture(
                    MagnificationGesture()
                        .onChanged{ value in
                            currentAmount = value - 1
                        }
                        .onEnded{ value in
                            //lastAmount += currentAmount
                            withAnimation(.spring()){
                                currentAmount = 0
                            }
                        }
                )
            HStack {
                Image(systemName: "heart.fill")
                Image(systemName: "text.bubble.fill")
                Spacer()
            }
            .padding(.horizontal)
            .font(.headline)
            Text("This is the caption for my photo!")
                .frame(maxWidth: .infinity,alignment: .leading)
                .padding(.horizontal)
        }
    }
    
    /// 方式一
    var magnificationGesture1: some View{
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
            .font(.title)
            .padding(40)
            .background(Color.red.cornerRadius(10))
            .scaleEffect(1 + currentAmount + lastAmount)
        // 手势
            .gesture(
                // 放大手势
                MagnificationGesture()
                    .onChanged{ value in
                        currentAmount = value - 1
                    }
                    .onEnded{ value in
                        lastAmount += currentAmount
                        currentAmount = 0;
                    }
            )
    }
}

  2.2 效果图:

3. RotationGesture 旋转操作

  3.1 实现

/// 旋转操作
struct RotationGestureBootcamp: View {
    // 角度
    @State var angle: Angle = Angle(degrees: 0)
    
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
            .font(.largeTitle)
            .fontWeight(.semibold)
            .foregroundColor(.white)
            .padding(50)
            .background(Color.blue.cornerRadius(10))
            .rotationEffect(angle)
            .gesture(
                RotationGesture()
                    .onChanged{ value in
                        angle = value
                    }
                    .onEnded{ value in
                        withAnimation(.spring()){
                            angle = Angle(degrees: 0)
                        }
                    }
            )
    }
}

  3.2 效果图: