使い方ガイドへスキップ
Animation Patterns作者 rshankras

Animation Patterns スキル。

ネイティブUI向けにSwiftUIのアニメーションAPIを選び、実装を確認します。

  • SwiftUI
  • Appleプラットフォーム
ソースレビュー · animation-patternsSKILL.md
タスク ネイティブUI向けにSwiftUIのアニメーションAPIを選び、実装を確認します。 成果物 実際の状態変化に合わせて選ばれたSwiftUIのアニメーションパターン。 始める前に CSS、ブラウザ、動画レンダリングのワークフローは提供しません。
記事用の要約 · ソース確認日 2026-11-02 · 生成された例ではありません

01 機能概要

ネイティブUI向けにSwiftUIのアニメーションAPIを選び、実装を確認

SwiftUIのスプリング、フェーズ・キーフレームアニメーター、ナビゲーション遷移、モーション低減時の挙動を、プロジェクトのSDKに照らして確認します。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

animation-patternsは、SwiftUIのアニメーションAPIを選び、使い方を確認するためのリファレンスです。状態変化、段階的なフェーズ、プロパティのキーフレーム、ビューの挿入、ナビゲーション遷移を、それぞれに合った実装パターンへ導きます。SF Symbolsのエフェクトや、ジオメトリに基づく視覚表現も扱います。

ソースが重点を置くのは、実装のつまずきにつながるAPIの使い方の誤りです。異なる世代のスプリングパラメータを混在させる、トランジションの適用範囲を誤る、共有ジオメトリとナビゲーションのズームを混同するといった問題を扱います。APIが利用できるプラットフォームとプロジェクトのデプロイメントターゲットに加え、モーション低減時の挙動や、フレームごとの処理負荷も判断材料になります。

想定される成果物

  • 実際の状態変化に合わせて選ばれたSwiftUIのアニメーションパターン。
  • APIの使い方に的を絞ったレビューと修正案。
  • アクセシビリティ、デプロイメントターゲット、フレームごとのパフォーマンスの確認項目。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    アニメーションを分類する

    APIを選ぶ前に、状態間の補間、フェーズの連続、複数プロパティのタイムライン、挿入・削除、ナビゲーション遷移のどれに当たるかを区別します。

  2. 02
    APIの世代と適用範囲を確認する

    パラメータ名とクロージャの形式を、インストール済みのSDKとデプロイメントターゲットに合わせます。アニメーションさせるビューが、意図した状態変化に実際に関与しているかを確認します。

  3. 03
    操作時の挙動と負荷を確認する

    途中での割り込み、モーション低減、完了時の挙動、フレームごとに実行されるクロージャ内の重い処理を確認します。対象環境で実際のUIを操作して試します。

02 利用場面

使いどころ

CSS、ブラウザ、動画レンダリングのワークフローは提供しません。

向いているケース

  • SwiftUIのアニメーションが動かない、または挙動がおかしいソースは、よくあるAPIの使い方の誤りと、タスク別に参照先を選ぶ判断ツリーを中心に構成されています。
  • ネイティブの遷移に適切な範囲を設定したいビュー内のジオメトリの変化と、ナビゲーションによる遷移を区別します。

確認すべき制限

  • Appleのネイティブ実装向けのガイドですCSS、ブラウザ、動画レンダリングのワークフローは提供しません。
  • APIを利用できるかの確認が必要です提供元の一覧表は、確認時点のソースをまとめたものです。実装では、現在のSDKの宣言とプロジェクトのデプロイメントターゲットを基準にします。

用意する入力

  • SwiftUIのコード対象のビュー、状態変数、アニメーションのモディファイアを提示します。
  • プラットフォームの制約デプロイメントターゲットと、インストール済みのSDKまたはXcodeのバージョンを明記します。
  • 期待する挙動きっかけ、中間の動き、最終状態、モーション低減時に期待する挙動を説明します。

03 重要な判断

重要な判断

  1. 適切なAPIを選ぶ

    判断ツリーによって、見た目は似ていても実装上は異なるアニメーションのタスクを区別します。

  2. シグネチャの間違いを減らす

    スプリングAPIの種類と、アニメーターのクロージャの形式を明示的に確認します。

  3. フレーム更新の負荷を抑える

    レビューでは、描画用クロージャ内で繰り返すべきでない処理を指摘します。

04 依頼例

目的を絞った依頼文を試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

ソースとセットアップを確認する

対象のビュー、状態変数、アニメーションのモディファイアを提示します。

アップストリームのソースファイル
https://github.com/rshankras/claude-code-apple-skills/blob/9ffb83138209057875698dd11c1720c657c47a92/skills/design/animation-patterns/SKILL.md

以下の参照先から、提供元の手順を確認できます。利用前にリポジトリのセットアップ要件を確認してください。これはインストールコマンドではありません。

一つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
animation-patternsを使って、展開可能な要約カードと、そこから詳細ビューへ移動するSwiftUIのコードをレビューしてください。APIを選ぶ前に、プロジェクトのデプロイメントターゲットを確認してください。カード内での展開とナビゲーション遷移を分け、スプリングのパラメータが、対応している同一のAPIシグネチャに従っているか確認してください。既存の状態モデルは維持してください。結果が理解できるモーション低減用の代替表示を追加し、フレームごとのクロージャ内にある書式設定やメモリ確保の処理を指摘してください。必要な箇所に絞った修正を提示し、繰り返し操作した場合、完了時、詳細から一覧へ戻る場合のテスト方法を説明してください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認してください。

  • APIのシグネチャを、プロジェクトのSDKとデプロイメントターゲットに照らして確認する。
  • 状態に応じた挿入、ナビゲーションの適用範囲、繰り返し操作をテストする。
  • モーション低減時の表示を確認し、フレームごとのクロージャで重い処理を行わない。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
rshankras
スキルファイル
SKILL.md
ライセンス
MIT
確認したスナップショット
2026-11-02 · 9ffb83138209
編集部によるソース要約
ネイティブUI向けにSwiftUIのアニメーションAPIを選び、実装を確認します。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

ビュー内のジオメトリの遷移と、ナビゲーションのズームは同じですか?

ソースでは、APIも適用範囲も異なる別のタスクとして扱っています。ビュー内で起きる変化なのか、ナビゲーションをまたぐ遷移なのかで選んでください。

スプリングのパラメータ名を混在させてもよいですか?

ソースは、旧世代と新世代のスプリング設定ではパラメータの組み合わせが異なると指摘しています。対応している一つのシグネチャに統一してください。

Webアニメーションも実装しますか?

いいえ。対象はSwiftUIと、それに関連するAppleのネイティブアニメーションパターンです。その環境でのバージョンとアクセシビリティの確認も含みます。

OpenDesign

依頼内容とデザイン作業を一つの場所に。

ブリーフ、ソース資料、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/rshankras/claude-code-apple-skills/blob/9ffb83138209057875698dd11c1720c657c47a92/skills/design/animation-patterns/SKILL.md