SwiftUI 自定义单选多选按钮 Checkmark 选中动画

通常做一个单选多选按钮会使用 Toggle 来制作,我这里提供一种自定义实现 CheckMark 的方式如下。

效果演示

SwiftUI 多选单选按钮选中动画效果

示例代码

 
import SwiftUI

struct CheckMarkAnimation: View {
    @State var isTapped = false
    @State var Animated = false
    @State var scale:CGFloat = 1
    var body: some View {
        
        ZStack {
            ForEach(0..<6) { i in
                Circle().frame(width: 30, height:30)
                    .scaleEffect(Animated ? 0 : 1)
                    .offset(y:Animated ? -50 : 0)
                    .rotationEffect(.degrees(Double(i) * 60))
                    .opacity(Animated ? 1 : 0)
            }
            
            Image(systemName:isTapped ? "checkmark.circle" : "circle")
                .contentTransition(.symbolEffect).font(.largeTitle)
        }
        .foregroundStyle(isTapped ? .indigo : .white)
        .onTapGesture {
            withAnimation(.spring(duration: 1)) {
                isTapped.toggle()
            }
            withAnimation(isTapped ?.spring(duration: 1) : .none) {
                Animated.toggle()
            }
        }  
    }
}

#Preview {
    CheckMarkAnimation()
}

示例代码下载

SwiftUI 自定义单选多选按钮 Checkmark 选中动画

SwiftUI 单选多选Checkmark选择效果示例

资源价格 ¥0.00 销售数量 0 更新时间 2024-11-19
已经登录?刷新

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

(0)
上一篇 2024-11-15 下午3:36
下一篇 2024-11-22 下午11:44

相关推荐

发表回复

登录后才能评论