SwiftUI 实现心形律动跳动动画示例

struct Home: View {
    // 状态变量，控制心跳动画的开始和停止
    @State private var beatAnimation: Bool = false
    // 状态变量，控制是否显示脉冲动画
    @State private var showPusles: Bool = false
    // 状态变量，存储脉冲心形的数组
    @State private var pulsedHearts: [HeartParticle] = []
    // 状态变量，表示当前心率值
    @State private var heartBeat: Int = 85
    var body: some View {
        VStack {
            ZStack {
                if showPusles {
                    // 使用 TimelineView 来创建基于时间的动画
                    TimelineView(.animation(minimumInterval: 0.7, paused: false)) { timeline in
                        /// 用于显示心形的 ZStack
                        ZStack {
                            ForEach(pulsedHearts) { _ in
                                PulseHeartView()
                            }
                        }
                        // 监听时间的变化，添加心形律动动画
                        .onChange(of: timeline.date) { oldValue, newValue in
                            if beatAnimation {
                                addPulseHeart()
                            }
                        }
                    }
                }
                
                Image(systemName: "suit.heart.fill")
                    .font(.system(size: 100))
                    .foregroundStyle(.heart.gradient)
                    .symbolEffect(.bounce, options: !beatAnimation ? .default : .repeating.speed(1), value: beatAnimation)
            }
            .frame(maxWidth: 350, maxHeight: 350)
            .overlay(alignment: .bottomLeading, content: {
                // 显示当前心率和变化情况
                VStack(alignment: .leading, spacing: 5, content: {
                    Text("当前心率")
                        .font(.callout)
                        .fontWeight(.semibold)
                        .foregroundStyle(.white)
                    // 显示心率值
                    HStack(alignment: .bottom, spacing: 8, content: {
                        TimelineView(.animation(minimumInterval: 1.5, paused: false)) { timeline in
                            Text("\(heartBeat)")
                                .font(.system(size: 45).bold())
                                .contentTransition(.numericText(value: Double(heartBeat)))
                                .foregroundStyle(.white)
                                .onChange(of: timeline.date) { oldValue, newValue in
                                    // 随机更新心率值
                                    if beatAnimation {
                                        withAnimation(.bouncy) {
                                            heartBeat = .random(in: 80...130)
                                        }
                                    }
                                }
                        }
                    
                        
                        Text("BPM")
                            .font(.title3.bold())
                            .foregroundStyle(.heart.gradient)
                            .offset(y: -4)
                    })
                    
                    Text("平均 88 BPM")
                        .font(.footnote)
                        .foregroundStyle(.gray)
                })
                .offset(x: 30, y: -35)
            })
            .background(.bar, in: .rect(cornerRadius: 30))
            // 控制心跳动画的开关
            Toggle("切换动画效果", isOn: $beatAnimation)
                .padding(15)
                .frame(maxWidth: 350)
                .background(.bar, in: .rect(cornerRadius: 15))
                .padding(.top, 20)
                .onChange(of: beatAnimation) { oldValue, newValue in
                    if pulsedHearts.isEmpty {
                        showPusles = true
                    }
                    // 如果动画开始并且律动心形数组为空，则添加律动心形效果
                    if newValue && pulsedHearts.isEmpty {
                        addPulseHeart()
                    }
                }
                .disabled(!beatAnimation && !pulsedHearts.isEmpty)
        }
    }
    
}