HA-Animated-cardsは、Home Assistantのダッシュボードを「アニメーション化」するための使いやすいカードのコレクション（この記事執筆時点で67種類のテンプレート）です。特に、すでにMushroomを使用している場合に便利です。目的は、あらゆるところにグリッターを貼り付けることではなく、アニメーションは控えめでクリーンであり、適切な時に動作します。洗濯機は消費しているときに「回転」し、ファンは実際に稼働しているときに動き、コンセントは電力を引き出している場合にのみ「光ります」などです。
嬉しいポイントは、これは膨大なJavaScriptを追加する「巨大な」カスタムカードではないことです。このプロジェクトは主にMushroomをベースにし、カードモッドを使用してスタイル（CSS）とアニメーションを注入します。その結果、軽量で既存のダッシュボードに非常にうまく統合されます。
Home Assistantでの魅力
ダッシュボードは、一瞬で確認するもので、1日に何度も見るものです。そして実際の生活では、「状態」を瞬時に「見る」ことが時には「値」を「読む」よりも優先されます。HA-Animated-cardsはまさにこの瞬時に読み取ることを提供します。
具体的な状況を3つ挙げてみましょう。
洗濯機が「オン」であるのは確かですが、本当に回転しているのでしょうか？消費電力（W）に基づくアニメーションで、サイクルが進行中か、単に待機中かをすぐに確認できます。
バッテリーが23%です：それを確認できます。しかし充電しているかどうかも理解したいです。モデル「battery/progress」は、センサー「充電器」がアクティブな場合に異なる動作を表示できます（通常はスマートフォン用です）。
温度/湿度：カード「environment」はしきい値に応じて視覚的に反応することができ、トレンドを理解するために時間の経過に基づいたインタラクティブなグラフを表示することもできます（シャワー後に湿度が上昇したり、夜に温度が低下したりなど）。
要するに、視認性が向上し、ダッシュボードをより楽しく使用することができるようになります（はい、それは真の理由です…見やすいダashboardは更新したくなります！）。
前提条件
著者が推奨する基本条件はシンプルです：HACS、Mushroom（カードとテーマ）、そしてcard-mod（HACSで2クリックでインストール可能）です。
モデルによっては、mushroom-legacy-template-card（しばしば実用的な依存関係として言及）の利用や、一部の「グラフ付き」バージョンでは、mini-graph-cardやvertical-stack-in-cardのような補助カードが必要です。
頭を悩ませる要素を避けるためのひとつの詳細：ダッシュボードの表示モードはセクションまたはモザイクで使用することが推奨されており、アニメーションが発動しない場合は、表示タイプを変更することで問題が解決することがあります。
インストール：HA-Animated-cardsの（シンプルな）ロジック
HA-Animated-cardsは、従来のHome Assistantの統合のようにはインストールされません。原則は「コピー＆ペースト」です：Mushroomカード（またはモデルに応じた手動カード）を作成し、通常通りに構成し（エンティティ、名前、アイコンなど）、次にプロジェクトが提供するスタイル/アニメーションのブロックをcard_modのセクションに貼り付けます。
重要なのは、HACSに「リポジトリを追加する」ことをプラグインのインストールのように考えないことです。ここでは、カードに貼り付けるYAMLとスタイルの部分を取得します。
ステップバイステップのセットアップ
実際のところ、設定は非常に簡単です：
ダッシュボードを開き、カードを配置したいビューにMushroomテーマを適用します（これは明らかに推奨されます）。
基本的なカードを追加し、通常はMushroom Entity Card（または照明用のMushroom Light Card）です。
標準のフィールド（エンティティ、名前、アイコン、情報など）を設定し、次にコードエディタに切り替え、HA-Animated-cardsが提供するcard_modセクションからスタイルを貼り付けます。
コピーしたコードの指定されたエンティティを置き換えます。一部のモデルでは、これは「2箇所」で行われます（典型的な例：環境カード+グラフ）。
そして、温度、ワット数、パーセンテージのしきい値を調整して、あなたの家に合うようにします。洗濯機、換気システム、または暖房装置ごとに消費のサインが異なるため、ここがこれらのカードが「インテリジェント」になるポイントです。
例1：電力で制御された「スマートプラグ」のカード
非常に明確な使用例：洗濯機、乾燥機、3Dプリンター、またはサーバーに接続されたプラグです。
Mushroom Entity Cardをプラグ（スイッチ）のエンティティとして作成します。次に、対応するアニメーションを貼り付け、「スマート」にします：アニメーションはオン/オフの状態だけに依存するのではなく、電力センサー（W）に依存します。電力がしきい値を越えると（通常は0 Wで十分です）、アニメーションが開始されます。また、必要に応じて比較演算子を変更することもできます。
重要な小さな詳細：card-modが正しく色を取得するためには、実際のアイコンカラーを選択し、「primary」または「accent」オプションを避けることを推奨しています。
例2：インタラクティブなグラフ付き環境カード（温度/湿度）
これは「おお、これはかっこいい」と2秒で思わせるカードの一種です。
示されている方法は非常に直接的です：ダッシュボードに手動カードを追加し、モデルのYAMLを貼り付け、次に指定された場所（通常は主要表示用に1回とグラフ用に1回）でセンサーのエンティティを置き換えます。その後、部屋に合ったスケールになるように最小/最大値やしきい値を調整します（湿った地下室は寝室とは異なります…）。
スペースを節約するためのトリックは、2つのカードをグリッドカード（2列）を介して横に組み合わせ、カードの高さとグラフの幅を調整して全体をコンパクトに保つことです。
例3：バッテリー/パーセンテージカード（スマートフォン、センサー、ダウンロード…）
これらのモデルは、バッテリーのパーセンテージを表示するすべてのものに適用可能です：電話のバッテリー、Zigbeeセンサーのバッテリー、3D印刷の進行状況、ダウンロードの進行状況…
デモでは、カスタムアイコンを強制することなく、白または薄灰色の色を使用してバッテリーセンサーに基づくMushroom Entity Cardを作成します。その後、選択したモデルのcard_mod部分を貼り付けます。
スマートフォンの場合、ワクワクするボーナスがあります：特定のアニメーションを表示するために「充電器」（接続中/充電中）センサーを追加できます。
カスタマイズに関しては、文字サイズ（主/副）、アイコンのサイズ、さらには「隅の位置」が気に入らない場合にコメント/削除できる行が含まれます。
ヒントと一般的な落とし穴
アニメーションが「機能しない」場合は、非常に基本的な2つのポイントを確認することから始めてください：ダッシュボードの表示タイプ（表示を変更することで問題が解決されることがあります）と、そのビューでMushroomテーマを使用しているかどうかです。
カードが色に依存する場合（ライト、アイコンが「色合い」を引き継ぐ必要がある場合）、設定の指示に注意してください：特定のタイプではアイコン色を設定しないでください。一方、他のタイプでは実際の色が必要です（プライマリ/アクセントではない）。
数値（ワット、温度、湿度）に基づくアニメーションを制御する場合は、機器に合ったしきい値を選択するために2分かけてください。この設定がアニメーションを「ガジェット」から本物の有用な指標へと変えるのです。
モデルの入手方法とさらに進む方法
プロジェクトはGitHubに集中しており、哲学はシンプルです：カードを選び、YAML/スタイルをコピーし、エンティティを置き換え、調整します。
ビデオ形式が好きな方には、著者が非常に「ステップバイステップ」のデモを公開しており、定期的に新しいモデルを追加しています（コミュニティから要求されたカード、よりコンパクトなバリエーション、グラフ付きバージョンなど）。
