mcpField
E
emilkowal-animations-swift

emilkowal-animations-swift

github.com/pluk-incデザイン・UI38 回インストール
リポジトリ

emilkowal-animations-swift について

AppleプラットフォームのUI向けに、SwiftUIとAppKitのアニメーションを扱うリファレンススキルです。10カテゴリにわたる86のルールに加え、コードレビュー指針や実装値、Web概念との対応を示します。

主な機能

  1. 0110カテゴリ、86のルール
  2. 02アニメーションコードのレビュー項目
  3. 03時間とイージングの指針
  4. 04ジェスチャー、トランジション、スクロールのパターン
  5. 05アクセシビリティとパフォーマンスの指針
  6. 06WebとSwiftUIの概念対応

活用シーン

  1. 01SwiftUIアニメーション実装のレビュー
  2. 02UIトランジションの時間設定
  3. 03ジェスチャーに連動する動きやナビゲーションの構築
  4. 04アニメーションのアクセシビリティと性能の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pluk-inc/skills --skill emilkowal-animations-swift

インストール後、Claude Code で/emilkowal-animations-swiftを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

metadata.json
assets/templates/
_template.md
references/
_sections.md
appkit-animator-proxy.md
appkit-core-animation.md
appkit-implicit-animations.md
appkit-layer-backed-views.md
appkit-nsanimation-context.md
appkit-spring-animation.md
ease-avoid-linear.md
ease-custom-timing-curve.md
ease-ease-in-for-exits.md
ease-ease-inout-for-emphasis.md
ease-match-context.md
ease-prefer-easeout.md
ease-spring-damping.md
ease-spring-default.md
ease-spring-ios17.md
ease-spring-response.md
gesture-asymmetric-press-release.md
gesture-cancellation.md
gesture-drag-basic.md
gesture-drag-constraints.md
gesture-drag-velocity.md
gesture-gesture-state.md
gesture-hover-macos.md
gesture-long-press.md
gesture-magnify-gesture.md
gesture-rotation-gesture.md
gesture-sensory-feedback.md

詳細

SwiftUI と AppKit のアニメーションに関するベストプラクティス

Apple プラットフォームのインターフェース向けの包括的なアニメーションガイドです。Emil Kowalski のウェブアニメーションの原則と Framer Motion のベストプラクティスを応用しています。iOS 17 以降を対象に、影響度順に並べた 10 カテゴリー、86 のルールを収録しています。

レビュー形式（必須）

UI アニメーションのコードをレビューする際は、必ず Before／After／Why の列を含む Markdown テーブルを使用してください。「Before:」と「After:」を別々の行にしたリストは使用しないでください。次のような実際の Markdown テーブルを必ず出力してください。

BeforeAfterWhy
.animation(.default).animation(.easeOut(duration: 0.2))イージングを明示し、デフォルトを避けます
scaleEffect(0).opacity(0) を指定した scaleEffect(0.95)現実の世界では、何もないところから突然現れるものはありません
ドロップダウンでの .easeIn.easeOut(duration: 0.2)easeIn は動きが鈍く感じられますが、easeOut は即座に反応します
ボタンを押したときのフィードバックがないscaleEffect(isPressed ? 0.97 : 1.0)ボタンは押したときに反応を感じられる必要があります
ポップオーバーでの .scaleEffect(anchor: .center)トリガーに合わせた .scaleEffect(anchor: .top)ポップオーバーは中央ではなく、トリガーを基準に拡大する必要があります

見つかった問題ごとに 1 行を設けてください。「Why」列では、理由を簡潔に説明します。

レビューチェックリスト

SwiftUI のアニメーションコードをレビューする際は、次の問題がないか確認してください。

問題修正
.animation(.default) またはイージング曲線が明示されていない正確なイージングを指定します：.easeOut(duration: 0.2) または .spring(duration: 0.3)
scaleEffect(0) での登場アニメーションscaleEffect(0.95) と .opacity(0) から開始します
登場する UI 要素での .easeIn.easeOut または .spring() に切り替えます
ポップオーバーでの .scaleEffect(anchor: .center)アンカーをトリガーの位置に合わせます（モーダルは対象外です）
キーボード操作で開始されるアクションにアニメーションを適用しているアニメーションを完全に削除し、状態を即座に変更します
UI 要素の再生時間が 300ms を超えている150～250ms に短縮するか、スプリングを使用します
#if os(macOS) によるガードのないホバーアニメーションプラットフォームチェックまたは .onHover の利用可否に応じて制御します
高頻度のアクションを withAnimation で囲んでいる削除します。1 日に 100 回以上実行されるアクションは即座に行います
.frame() または .padding() をアニメーションしている代わりに .scaleEffect、.offset、.opacity を使用します（GPU で高速化されます）
表示時と終了時のトランジション速度が同じ終了を速くします：.asymmetric(insertion: 0.3s, removal: 0.15s)
すべての要素が一度に表示される項目間に 30～80ms の遅延を加えます
Timer／CADisplayLink を使った手動のアニメーションループ.animation() または withAnimation を使用します（レンダーサーバー上で実行されます）
accessibilityReduceMotion のチェックがない@Environment(\.accessibilityReduceMotion) によるガードを追加します
タップ可能な要素に押下時のフィードバックがないButtonStyle を介して、押下時に scaleEffect(0.97) を追加します

適用する場面

次の場面では、これらのガイドラインを参照してください。

  • SwiftUI ビューにアニメーションを追加するとき
  • イージング曲線、スプリング、タイミングの値を選ぶとき
  • ジェスチャーに基づく操作（ドラッグ、タップ、長押し）を実装するとき
  • トランジションやナビゲーションアニメーションを作成するとき
  • 共有要素のトランジションに matchedGeometryEffect を使用するとき
  • スクロール連動エフェクトや視差効果を作成するとき
  • iOS 17 以降の PhaseAnimator または KeyframeAnimator を使用するとき
  • アニメーションのパフォーマンスを最適化するとき
  • accessibilityReduceMotion を使用してアニメーションのアクセシビリティを確保するとき
  • AppKit／macOS 固有のアニメーションを記述するとき

優先度別ルールカテゴリー

優先度カテゴリー影響度接頭辞
1タイミング曲線とイージングCRITICALease-
2再生時間とタイミングCRITICALtiming-
3アニメーションプロパティHIGHprops-
4変形とエフェクトHIGHtransform-
5ジェスチャーと操作HIGHgesture-
6トランジションとナビゲーションMEDIUM-HIGHtransition-
7スクロールと視差効果MEDIUMscroll-
8戦略的なアニメーションMEDIUMstrategy-
9アクセシビリティと仕上げMEDIUMpolish-
10AppKit 固有LOW-MEDIUMappkit-

クイックリファレンス

1. タイミングカーブとイージング（重大）
2. 持続時間とタイミング（重大）
3. アニメーションのプロパティ（高）
4. 変形とエフェクト（高）
5. ジェスチャーとインタラクション（高）
6. トランジションとナビゲーション（中〜高）
7. スクロールと視差（中）
8. 戦略的なアニメーション（中）
9. アクセシビリティと仕上げ（中）
10. AppKit 固有（低〜中）

主な値の一覧

値用途
.spring(duration: 0.3, bounce: 0.2)iOS 17 の標準的なスプリングアニメーション
.spring(response: 0.3, dampingFraction: 0.7)従来のスプリング設定
.easeOut(duration: 0.2)標準的な UI トランジション
scaleEffect(0.97)ボタンを押したときのフィードバック
scaleEffect(0.95)最小の開始時スケール（0 にはしない）
0.2 秒マイクロインタラクションのデフォルト時間
0.3 秒UI アニメーションの最大時間
0.5 秒シート／ドロワーのアニメーション時間

コンセプトの対応関係（Web から SwiftUI へ）

Web のコンセプトSwiftUI での相当機能
ease-out.easeOut または Animation.easeOut(duration:)
cubic-bezier(a,b,c,d).timingCurve(a, b, c, d, duration:)
Framer Motion のスプリング.spring(duration:bounce:)（iOS 17 以降）
transform: scale(0.97).scaleEffect(0.97)
transform-origin.scaleEffect(anchor: .topLeading)
useMotionValue@State / @GestureState
AnimatePresence.transition() + .id()
layoutId.matchedGeometryEffect(id:in:)
useScrollGeometryReader + PreferenceKey
whileHover/whileTap.onHover {} / ジェスチャーモディファイア
dragConstraints境界値を指定した onChange を使う DragGesture
prefers-reduced-motion@Environment(\.accessibilityReduceMotion)

参照ファイル

ファイル説明
references/_sections.mdカテゴリーの定義と並び順
assets/templates/_template.md新しいルール用のテンプレート
metadata.jsonバージョンと参照情報

コメント

Markdown 対応