RippleTabBar

RippleTabBar は、リップルアニメーション付きのカスタムタブバー操作を試すための小さな SwiftUI サンプルアプリです。

Home、Search、Favorites、Settings の 4 つのタブを表示します。別のタブを選択すると、タップ位置から円形のリップルが広がり、選択中のタブはラベルを表示しながら横に広がります。

特徴

• 外部依存なしで実装された SwiftUI のカスタムタブバー
• 実際のタップ位置から開始するリップルエフェクト
• SF Symbols とラベルを使った選択状態のアニメーション
• 実験や調整がしやすい、単一画面のコンパクトな構成

プロジェクト構成

RippleTabBar/
├── RippleTabBarApp.swift   # アプリのエントリーポイント
├── ContentView.swift       # カスタムタブバー、タブ項目、リップルアニメーション
└── Assets.xcassets/        # App Icon と Accent Color

実装メモ

主要なインタラクションは ContentView.swift に実装されています。

• RippleTabView は選択中のタブと、表示中のリップル状態を管理します。
• TabItemView は各タブ項目を描画し、名前付き座標空間でのタップ位置を親へ渡します。
• RippleView は拡大する円を描画し、進行度に応じてフェードアウトさせます。
• TabItem は表示するタブ、SF Symbol 名、ラベルを定義します。

リップルの状態は Ripple.lifetime の経過後に削除されます。見た目上のアニメーション時間は RippleView.Constants.duration で調整できます。