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

本篇内容为演示心形律动动画效果和提供代码下载。


效果演示

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)
        }
    }
    
}

代码下载

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

SwiftUI 心率跳动动画效果示例下载

赞助会员赞助会员¥-3.00
资源价格 ¥3.00 销售数量 2 更新时间 2024-02-01
已付费?登录刷新

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

(0)
上一篇 2024-01-06 下午10:49
下一篇 2023-03-24

相关推荐

  • SwiftUI Text 字体触摸滑动动画效果

    通过添加 DragGesture 时间记录滑动时 onChanged 的坐标来给选中的字符 Character 做缩放动画即可完成该效果,一下是效果演示。 演示效果 完整代码下载 …

    2023-04-23
    470

发表回复

登录后才能评论