SwiftUI Animation Expert

SwiftUIの高度なアニメーションとMetalシェーダー統合の実装に関する専門的なガイダンスを提供します。アニメーション曲線、スプリング、トランジション、matchedGeometryEffect、PhaseAnimator、KeyframeAnimator、およびGPU加速シェーダーエフェクトをカバーしています。

このスキルを使用する場合

• モーションデザインの原則の理解とアニメーション使用時の判断
• アニメーションのアクセシビリティおよびプラットフォーム適合性の確保
• SwiftUIでのアニメーション実装（スプリング、イージング、キーフレーム）
• ビュートランジションの作成（フェード、スライド、スケール、カスタム）
• matchedGeometryEffectを使ったヒーローアニメーションの構築
• Metalシェーダーを使ったGPU加速エフェクトの追加
• アニメーション性能の最適化
• 複数フェーズの編成されたアニメーションの作成

クイックリファレンス

アニメーション基礎

// 明示的アニメーション（推奨）
withAnimation(.spring(response: 0.4, dampingFraction: 0.75)) {
    isExpanded.toggle()
}

// iOS 17+ スプリングプリセット
withAnimation(.snappy) { ... }  // 速い、小さいバウンス
withAnimation(.smooth) { ... }  // 緩い、バウンスなし
withAnimation(.bouncy) { ... }  // より多くのバウンス

よく使うトランジション

// 基本
.transition(.opacity)
.transition(.scale)
.transition(.slide)
.transition(.move(edge: .bottom))

// 組み合わせ
.transition(.move(edge: .trailing).combined(with: .opacity))

// 非対称
.transition(.asymmetric(
    insertion: .move(edge: .bottom),
    removal: .opacity
))

Matched Geometry Effect

@Namespace var namespace

// ソースビュー
ThumbnailView()
    .matchedGeometryEffect(id: "hero", in: namespace)

// デスティネーションビュー
DetailView()
    .matchedGeometryEffect(id: "hero", in: namespace)

Metal シェーダーエフェクト（iOS 17+）

// カラー操作
.colorEffect(ShaderLibrary.invert())

// ピクセル変位
.distortionEffect(
    ShaderLibrary.wave(.float(time)),
    maxSampleOffset: CGSize(width: 20, height: 20)
)

// フルレイヤーアクセス
.layerEffect(ShaderLibrary.blur(.float(radius)), maxSampleOffset: .zero)

参考資料

詳細なドキュメントは references/ で利用可能です：

• motion-guidelines.md - HIG モーションデザインの原則

  • 目的駆動型モーション哲学
  • アクセシビリティ要件
  • プラットフォーム固有の考慮事項（iOS、visionOS、watchOS）
  • 避けるべきアニメーションアンチパターン

• animations.md - 完全なアニメーションAPI ガイド

  • 暗黙的 vs 明示的アニメーション
  • スプリングパラメータとプリセット
  • アニメーション修飾子（速度、遅延、繰り返し）
  • 複数ステップシーケンスのPhaseAnimator
  • プロパティ固有のタイムラインのKeyframeAnimator
  • カスタムアニメーション可能なプロパティ

• transitions.md - ビュートランジションガイド

  • 組み込みトランジション（オパシティ、スケール、スライド、移動）
  • 組み合わせおよび非対称トランジション
  • matchedGeometryEffect の実装
  • ヒーローアニメーションパターン
  • コンテンツトランジション（iOS 17+）
  • カスタムトランジション作成

• metal-shaders.md - GPUシェーダー統合

  • SwiftUIシェーダー修飾子（colorEffect、distortionEffect、layerEffect）
  • Metalシェーダー関数の作成
  • UIViewRepresentable を使った MTKView の埋め込み
  • クロスプラットフォームMetal統合（iOS/macOS）
  • パフォーマンスに関する考慮事項

よく使うパターン

展開可能なカード

struct ExpandableCard: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: isExpanded ? 20 : 12)
                .fill(.blue)
                .frame(
                    width: isExpanded ? 300 : 150,
                    height: isExpanded ? 400 : 100
                )
        }
        .onTapGesture {
            withAnimation(.spring(response: 0.35, dampingFraction: 0.75)) {
                isExpanded.toggle()
            }
        }
    }
}

リストアイテムの表示

ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
    ItemRow(item: item)
        .transition(.asymmetric(
            insertion: .move(edge: .trailing).combined(with: .opacity),
            removal: .move(edge: .leading).combined(with: .opacity)
        ))
        .animation(.spring().delay(Double(index) * 0.05), value: items)
}

パルスインジケータ

Circle()
    .fill(.blue)
    .frame(width: 20, height: 20)
    .scaleEffect(isPulsing ? 1.2 : 1.0)
    .opacity(isPulsing ? 0.6 : 1.0)
    .onAppear {
        withAnimation(.easeInOut(duration: 1.0).repeatForever(autoreverses: true)) {
            isPulsing = true
        }
    }

ベストプラクティス

1. モーションに目的を持たせる - 目的のないアニメーションを追加しない。体験をサポートし、それを邪魔しないようにする
2. モーション機能を任意にする - ハプティクスやオーディオで補完。モーションだけで情報伝達しない
3. 簡潔さを目指す - 短く正確なアニメーションは軽く感じられ、情報を効果的に伝える
4. 明示的アニメーションを優先する - .animation() 修飾子ではなく withAnimation を使用して明確性を確保
5. スプリングアニメーションを使用する - より自然でiOS らしい感覚
6. .spring(response: 0.35, dampingFraction: 0.8) で開始する - ほとんどのインタラクションに適した良いデフォルト
7. アニメーションを400ms 以下に保つ - それ以上は遅く感じる
8. ユーザーがモーションをキャンセルできるようにする - アニメーション完了まで待つことを強制しない
9. デバイスでテストする - シミュレータのアニメーション時間は異なる
10. シェーダーパフォーマンスをプロファイルする - 複雑なエフェクトではGPU時間が重要

トラブルシューティング

アニメーションが機能しない

• 状態変更が withAnimation でラップされていることを確認
• プロパティがアニメーション可能であることを確認
• ビューが実際に変更されていることを確認

Matched Geometry ジャンプする

• 両ビューが同じIDと namespace を使用していることを確認
• トグル時に明示的な withAnimation を使用
• 適切なレイヤリングのための zIndex を確認

シェーダーが表示されない

• .metal ファイルがターゲットに追加されていることを確認
• シェーダー関数の署名が期待される形式と一致していることを確認
• 変位エフェクトの場合 maxSampleOffset が正しく設定されていることを確認