SwiftUI 向右滑动解锁功能效果示例

效果演示

SwiftUI 滑动解锁效果演示

关键部分代码

struct PowerButtonView: View {
    @Binding var dragAmount: CGFloat
    @Binding var powerOn: Bool
    @Binding var showSlideText: Bool
    @Binding var showCheckmarkProgress: Double
    var body: some View {
        HStack {
            Image(systemName: powerOn ? "circle.fill" : "power.circle.fill")
               .font(.system(size: 52))
                // 根据滑动量调整图片位置
               .offset(x: self.dragAmount)
                // 添加手势识别
               .gesture(powerGesture())
            if showSlideText && dragAmount <= 10 {
                Text("向右滑动解锁")
                    .foregroundColor(.black)
                    .frame(width: 150)
                    .shimmering()
               }
            Spacer()
            CheckMarkView(showCheckmarkProgress : $showCheckmarkProgress,
                          dragAmount : $dragAmount)
        }
    }
    private func powerGesture() -> some Gesture {
        DragGesture()
            .onChanged { value in
                if value.translation.width > 0 && value.translation.width < 190 {
                    self.dragAmount = value.translation.width
                }
            }
            .onEnded { value in
                // 当滑动结束时,根据滑块位置决定是否激活
                if dragAmount >= 180 {
                    self.dragAmount = 188
                    powerOn = true
                    withAnimation(Animation.easeInOut(duration: 1)) {
                        // 开启动画
                        showCheckmarkProgress = 1
                    }
                    
                } else {
                    // 如果未滑动到指定位置,则复位
                    withAnimation(.interpolatingSpring(stiffness: 200, damping: 10)) {
                        self.dragAmount = 0
                        self.showSlideText = false
                    }
                }
                // 延迟0.2秒后再次显示滑动提示文本
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.2){
                    withAnimation {
                        self.showSlideText = true
                    }
                }
            }
    }
}

代码下载

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/1288.html ·

(0)
上一篇 2023-12-12 上午11:44
下一篇 2024-01-06 下午10:49

发表回复

登录后才能评论