【SwiftUI】Create Animated Speech Bubble 👉 https://android.benigumo.com/20240827/speech-bubble/

SpeechBubble.swift

import SwiftUI

struct SpeechBubble: View {
  var count: Int

  var body: some View {
    HStack(spacing: 0) {
      Rectangle()
        .fill(.red)
        .rotationEffect(.degrees(45))
        .frame(width: 20, height: 20)
        .offset(x: 14)
        .clipShape(.rect) // *
      HStack {
        Image(systemName: "heart.fill")
        Text("\(count)")
      }
      .foregroundStyle(.background)
      .padding()
      .background(.red, in: .rect(cornerRadius: 8))
    }
  }
}

struct AnimatedSpeechBubble: View {
  @State private var show = false

  var body: some View {
    VStack {

      HStack {
        Text("お知らせ")
          .popover(isPresented: $show, arrowEdge: .trailing) {
            Text("横に出せないの?")
              .padding(.horizontal)
              .foregroundStyle(.background)
              .presentationBackground(.red)
              .presentationCompactAdaptation(.popover)
          }
        Spacer()
      }
      .frame(width: 250, height: 50)

      HStack {
        Text("お知らせ")
        if show {
          SpeechBubble(count: 999)
            .transition(.scale(scale: 0.25).combined(with: .opacity))
        }
        Spacer()
      }
      .frame(width: 250, height: 50)


      Button(show ? "hide" : "show") {
        withAnimation {
          show.toggle()
        }
      }
      .buttonStyle(.borderedProminent)

    }
  }
}


#Preview("bubble") {
  SpeechBubble(count: 999)
}

#Preview("animated") {
  AnimatedSpeechBubble()
    .padding()
    .frame(maxWidth: .infinity)
}

Thank you!