HA-Animated-cards 是一个现成卡片的集合（在撰写本文时有67种模型）用于“动画” Home Assistant 的仪表板，特别是如果您已经在使用 Mushroom。这个想法不是到处粘贴闪光灯：动画相对隐蔽、整洁，并且在有意义的时候激活。当洗衣机“运转”时，它正在消耗电量，当风扇真正启动时，它会开始转动，插座“发光”仅在它消耗电力时等。
令人开心的点是：这不是一个“巨型”自定义卡片，不会增加大量的 JavaScript。该项目主要依赖 Mushroom 作为基础，并通过 card-mod 注入样式（CSS）和动画。结果：它很轻便，并且能够很好地集成到现有的仪表板中。
为什么在 Home Assistant 中很有趣
仪表板是我们快速查看的，多次浏览。在现实生活中，“看到”状态在一瞬间有时比“读取”一个值更好。HA-Animated-cards 正是提供了这种即时阅读体验。
让我们看三个非常具体的情况。
洗衣机是“开”的，是的……但是它真的在转动吗？通过在功率（W）上触发的动画，您可以立刻看到循环是否在进行中，或者它仅仅是处于待机状态。
电池电量23%：您可以看见。但是如果它正在充电，您也希望在不进入细节的情况下理解它。模型“battery/progress”可以在“充电”传感器处于活动时显示不同的行为（通常适用于智能手机）。
温度/湿度：卡片“environment”可以根据阈值做出视觉反应，甚至可以显示交互图表以理解趋势（淋浴后湿度上升，夜间温度下降等）。
总之，我们提升了可读性，并惊讶于愉快地使用仪表板（是的，这是一个真实的论点……一个我们喜欢查看的仪表板，我们会保持其更新！）。
前提条件
作者建议的基础很简单：HACS、Mushroom（卡片和主题）和 card-mod（可以通过 HACS 一键安装）。
根据模型，您还可以交叉使用 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 部分粘贴样式。
您替换代码中请求的实体。在某些模型中，“有两个位置”（典型示例：环境卡片 + 图表）。
然后您调整阈值（温度、瓦特、百分比）以适应您的家。因为洗衣机、通风机或加热器的消耗特征并不相同，而正是在这里，这些卡片变得“智能”。
示例1：由功率驱动的“智能插座”卡片
非常直观的用例：连接到洗衣机、干衣机、3D 打印机，甚至是服务器的插座。
您在插座（开关）的实体上创建一个 Mushroom Entity Card。接着，您粘贴相应的动画，并使其“智能化”：动画不再仅仅依赖 On/Off 状态，而是依赖功率传感器（W）。当功率超过某个阈值（通常 0 W 足够）时，动画开始。您也可以根据需求更改比较操作符。
一个值得注意的小细节：为了让 card-mod 正确获取颜色，作者建议选择真实的图标颜色，避免使用“primary”或“accent”选项。
示例2：环境卡片（温度/湿度）与交互图表
这种卡片在2秒内能让人感叹“好高级”。
显示的方法非常直接：您在仪表板中添加一个手动卡片，粘贴模型的 YAML，然后在指定位置替换传感器实体（通常是一次用于主要显示，另一次用于图表）。接下来，您调整使用的最小/最大值或阈值，以使比例适合您的房间（潮湿的地下室并不能像卧室一样调整……）。
为了节省空间，技巧是通过一个 Grid Card（2 列）并排组合两个卡片，接着调整卡片的高度和图表的宽度，以保持整体紧凑。
示例3：电池/百分比卡片（智能手机、传感器、下载……）
这些模型适用于所有揭示百分比的内容：手机电池、Zigbee 传感器电池、3D 打印进度、下载进度……
演示建议从电池传感器的 Mushroom Entity Card 开始，不强制使用自定义图标，并且颜色相对白色/浅灰色。接下来，您粘贴所选模型的 card_mod 部分。
对于手机，还有一个不错的附加功能：您可以添加一个“充电器”传感器（插上/正在充电）以便在充电时显示特定动画。
在个性化方面，我们保持在实际层面：文本大小（主要/次要）、图标大小，甚至可以通过注释/删除一行来更改您不喜欢的“角落位置”。
技巧与常见陷阱
如果某个动画“无效”，首先检查两个非常愚蠢的点：仪表板的视图类型（有些人发现，切换视图会解锁情况）以及在视图中使用 Mushroom 主题。
如果某个卡片依赖于颜色（灯光、必须“恢复”色调的图标），请注意配置说明：对于某些类型，不要设置图标颜色，而对于其他类型，反而需要一个真实的颜色（不是 primary/accent）。
如果您正在根据数字值（瓦特、温度、湿度）触发动画，请花 2 分钟选择一个合适的阈值以符合您的设备。这个设置会将“花哨”的动画转变为真正有用的指示器。
在哪里找到模型以及如何进一步深入
该项目集中在 GitHub 上，理念很简单：您选择一个卡片，复制 YAML / 样式，替换实体，然后进行调整。
如果您喜欢视频格式，作者发布了非常“逐步”的演示，并定期添加新的模型（社区要求的卡片、更加紧凑的变体、带图的版本等）。
