Pulsating Button Animation in SwiftUI

Guiding Users with a Pulsating Button

オンボーディングフローを構築する際の課題の一つは、ユーザーの注意を次に取るべきアクションに誘導することです。ボタンにさりげない脈動アニメーションを加えることで、邪魔にならずに視線を引きつけることができます。SwiftUIでscaleEffectとopacityモディファイアを組み合わせ、繰り返しアニメーションに連動させることでこれを実装しました。

基本的なアプローチは以下の通りです。

struct PulsatingButtonStyle: ButtonStyle {
   @State private var isPulsating = false

   func makeBody(configuration: Configuration) -> some View {
      configuration.label
         .scaleEffect(isPulsating ? 1.06 : 1.0)
         .opacity(isPulsating ? 0.8 : 1.0)
         .animation(
            .easeInOut(duration: 0.8)
               .repeatForever(autoreverses: true),
            value: isPulsating
         )
         .onAppear {
            isPulsating = true
         }
   }
}

ポイントは、スケールとオパシティの2つのアニメーションを同期させて実行することです。repeatForever(autoreverses: true)モディファイアにより、アニメーションが連続して往復します。isPulsatingをonAppearで切り替えることで、ビューが表示された瞬間にアニメーションが開始されます。

スケール係数の1.06は意図的に控えめに設定しています。1.2のように大きくすると、アニメーションが攻撃的で気が散る印象になります。わずかなオパシティの変化が、ボタンの可読性を損なうことなく脈動に奥行きを加えます。

このパターンは、「続ける」や「はじめる」ボタンを目立たせたいオンボーディング画面に最適です。ユーザーがオンボーディングを通過した後はアニメーションが表示されなくなるため、時間が経っても煩わしくなりません。

.buttonStyle(PulsatingButtonStyle())で任意のボタンに適用でき、アニメーションロジックをボタンの内容からきれいに分離できます。