【SwiftUI】ハイライトする方法

はじめに

SwiftUIで手軽にハイライトさせることが出来たのでそれをまとめました。
アプリのユーザーに何か知らせる時、ハイライトで視覚的に訴えかけられれば良いなと思ったのがきっかけです。

こんな感じでハイライトされます。

ソースコード

コードの必要箇所だけ抜粋しました。
レイアウトを自由に設定して使用することができます。

ContentView.swift

struct ContentView: View {

  @State private var isHighlight = false

  var body: some View {
    VStack {
      Text("Hello World!")
        .overlay(Color.yellow
                  .opacity(isHighlight ? 1 : 0))

      Button("HIGHLIGHT") {
        isHighlight = true
        withAnimation(.easeOut(duration: 1)) {
          isHighlight = false
        }
      }
    }
  }
}

同じボタンにtrueとfalseを両方入れて動くのか不安でしたが、想定通りの動きをしてくれました。
最初にisHighlightをtrueにして、opacityを1にして、その後1秒かけてopacityを0にしていく動きとなります。
これでハイライトらしい動きとなりました。

上記動画のコード全体はこちら。
https://gist.github.com/takuma-2531/fcc0946555e7ff45d24eb0e72e545453

おわりに

SwiftUIは少し工夫するだけで様々な動きを実装できて面白いです。
ハイライトの色とか形とか時間とか変えて使っていただけると嬉しいです！
同時に文字サイズとか変えても面白そうですね。
最後まで読んでくださりありがとうございました。