【SwiftUI】吹き出しを作りたい

Instagram のこれ。

作ってみようと。

 

🧑🏻‍💻 popover で作る

使えそうなのでやってみました。

👉 popover(isPresented:attachmentAnchor:arrowEdge:content:) | Apple Developer Documentation



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

  var body: some View {

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

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

  }
}

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

なぜか横 ( .trailing ) 方向に出すことができません。

GIFにしてみたら背景色もなんかあやしい。

あと、ボタンの色も勝手に変わる。

 

🧑🏻‍💻 手作りで

基本の組み合わせで作ります。

まず、吹き出しを作ります。

Path() は使いません。


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

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

アニメーションな部分は scale と opacity のトランジションを使います。


if show {
  SpeechBubble(count: 999)
    .transition(.scale(scale: 0.25).combined(with: .opacity))
}

いい感じです。

 

🧑🏻‍💻 まとめ

手作りでまあいけそうです。

以上のソースコード一式です。

【SwiftUI】State 付きボタンのアニメーション記述

公式チュートリアルを見ながら。


Animating views and transitions — SwiftUI Tutorials | Apple Developer Documentation

思いついたものを書きなぐり試す。



 

🤔 まとめ

- animation(), withAnimation() 記述がなくても effect にはデフォルトでアニメーションがつく。
- animation() で 個別に effect のアニメーションを変更や削除ができる。
- withAnimation() でアニメーションの変更や削除ができる。


【SwiftUI】Apple 公式サンプルでは Animation と Transition をどのように組み合わせているのか

画面上にメッセージを表示する View。


import SwiftUI

struct Message: View {
  var text: String

  var body: some View {
    HStack(spacing: 0) {
      Image(systemName: "heart.fill")
        .foregroundStyle(.red)
        .font(.title)
        .padding()
      Text(text)
        .padding(.trailing, 24)
    }
    .clipShape(.capsule)
    .background(
      .regularMaterial.shadow(.drop(radius: 16)),
      in: .capsule
    )
  }
}

#Preview {
  Message(text: "Hello, world!")
}

どのように、アニメーションやトランジションをつけて、生き生きとした画面にしているか。

Apple 公式サンプルを参考に書いてみます。

 

🧑🏻‍💻 Preview 用 View の準備

挙動を何度も確かめるために、

Preview 専用の View を作っておきます。


private struct RefreshPreview: View {
  var text: String

  @State private var id = false

  var body: some View {
    Message(text: text)
      .id(id)

    Button("Refresh") {
      id.toggle()
    }
    .buttonStyle(.borderedProminent)
  }
}

👉 【SwiftUI】View の 強制再描画 hatena-bookmark

ボタンを押すと強制的に画面再描画がされて、

表示開始からの動きを確認できるようになります。

 

🧑🏻‍💻 まずは アニメーション・トランジションなしでつくる


import SwiftUI

struct Message: View {
  var text: String

  @State private var showIcon = false
  @State private var showText = false

  var body: some View {
    HStack(spacing: 0) {
      if showIcon {
        Image(systemName: "heart.fill")
          .foregroundStyle(.red)
          .font(.title)
          .padding()
      }
      if showText {
        Text(text)
          .padding(.trailing, 24)
      }
    }
    .clipShape(.capsule)
    .background(
      .regularMaterial.shadow(.drop(radius: 16)),
      in: .capsule
    )
    .frame(height: 50)
    .onAppear {
      Task {
        showIcon = true
        try await Task.sleep(for: .seconds(1))
        showText = true
        try await Task.sleep(for: .seconds(1))
        showText = false
        try await Task.sleep(for: .seconds(1))
        showIcon = false
      }
    }
  }
}

private struct RefreshPreview: View {
  var text: String

  @State private var id = false

  var body: some View {
    Message(text: text)
      .id(id)

    Button("Refresh") {
      id.toggle()
    }
    .buttonStyle(.borderedProminent)
  }
}

#Preview {
  RefreshPreview(text: "Hello, world !!!")
    .padding()
    .frame(maxWidth: .infinity)
}

アイコン画像とテキスト部分をそれぞれの @State で


アイコン表示 

  ↓

テキスト表示

  ↓

テキスト非表示

  ↓

アイコン非表示

と Task の中で1秒ごとに変化させています。

しかし、アニメーションやトランジションがないので、

スムーズに View が変化しません。

 

🧑🏻‍💻 アニメーション・トランジションをつける



 

🧑🏻‍💻 まとめ

やっぱ、全然違いますね。

👉 sample-backyard-birds/Multiplatform/Birds/BirdFoodHappinessIndicator.swift at main · apple/sample-backyard-birds hatena-bookmark

 

🧑🏻‍💻 追記: 上記のトランジションっている ?

withAnimation() 記述は必要だとして、

transition() 記述は不要なのではないか。

できるだけシンプルにテンプレート化しておきたいので、

0.25 倍の速度で確認してみます。

上がトランジションなし、

下がトランジションあり。

トランジションはあったほうがいいですね。

やっぱり、Apple 公式サンプルコードは偉大。