HA前端UI，动态图标方案探索，与自改版Lottie-Card

gasment

现在正着手改造升级我的HA UI 3.0，之前的2.0虽然很实用，但是没什么美感，打算这次升级用上一些动态图标来丰富一下观感

使用bubble-card代替子视图和browser_mod弹窗，改造我的UI 2.0 - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!

一搞才发现，在ha上实现动态图标竟然如此大坑
目前试过的几种方案：

注：文中关于性能消耗高低的判断，依据是设备发热的状态

一、非矢量图标（放大模糊）


1、经典之gif

• 制作方式：AE导出序列png，再转gif
  

缺点：高分辨率高帧率的gif体积巨大，带透明层的锯齿白边严重，动画丝滑程度一般

• 优点：使用简单，只要支持img url的地方都能用，性能消耗低
  

2、apng或者webp，

• 制作方式：AE导出序列png，再转apng或者webp
• 缺点：动画丝滑程度一般，
• 优点：（对比gif）文件体积减少（一个240x240 60fps的webp大概1MB），透明层处理效果好，锯齿白边问题小，使用简单，只要支持img url的地方都能用，性能消耗低
  

二、矢量图标（无损放大）
1、svg+svg原生动画

• 制作方式：网络资源下载现成svg，使用Bosy SVG编辑动画效果
• 缺点：循环播放性能消耗【非常高】，一个页面存在2~3个这种循环播放的图标，手机10秒就开始发热，停留久了甚至烫手；
  

（svg原生动画因为使用其独立渲染引擎，无法由浏览器干预优化，浏览器需要在每一帧重新计算路径点、插值以及矩阵变换，拉高CPU用量）

• 优点：文件体积小，动画丝滑程度非常高，基于路径变换与插值，几乎没有跳帧的问题，使用简单，只要支持img url的地方都能用（循环动画），非循环动画我发现是button-card中会失效
  

2、svg+css动画

• 制作方式：网络资源下载现成svg，一般搭配card-mod来注入css动画
• 缺点：循环播放性能消耗【中等】，需要能注入css才能使用，css动画设定也比较麻烦和不直观
• 优点：文件体积小，动画丝滑程度同原生动画，但是较原生动画性能消耗降低，能进入合成层由浏览器优化渲染方式、
  

3、HA自带mdi图标+css动画

• 制作方式：使用自带mdi icon，一般搭配card-mod来注入css动画
• 缺点：只能整体变换（如旋转），变换样式和图标形状限制大，图标资源少
• 优点：不存在外部文件占用，循环播放性能消耗【忽略不计】，绝大部分卡片都支持icon使用mdi
  

4、纯lottie json动画

• 制作方式：AE制作动画，lottie插件导出json
• 缺点：制作比较麻烦，纯json模式需要所有素材都为矢量，这个前期处理需要花时间，依赖特定卡片，使用范围比较低
• 优点：循环播放性能消耗【小】，文件体积极小，纯json只有几KB，动画丝滑程度略逊于svg原生动画和css动画（根据AE导出的帧率而定）
• PS：lottie 动画渲染有3种模式：
  

        1、svg模式，使用svg引擎，但是没有svg原生动画丝滑，性能消耗比较低，Lottie 5.7+ 版本引入了 WebGL 渲染能力，可以在使用 SVG 渲染器的同时启用 GPU 加速，开启WebGL 后消耗更低，适合简单动画
        2、html模式，本质还是svg，每个图层都由单独节点渲染，但是可以进入合成层由浏览器优化，随着多图层复杂度增加，性能消耗与svg模式趋同，html模式优点是每个图层可以单独控制交互
        3、canvas模式，将矢量图转为像素位图，因此会丢失矢量图无损放大和svg图层交互的特性，所有图层一次渲染，可由硬件加速，
            下图是网页放大300%下，图标原尺寸为512x512，3种模式的清晰度(上到下分别为svg、html、canvas），
           我认为canvas模式还是可以接受的，在svg模式不支持WebGL加速时可降级使用这个
            



我使用的卡片只有button-card/bubblec-card/card-mod这三，而主力的button-card可以进行强大的嵌套，于是在多次踩坑后我转向了lottie json动画
github有现成可用的Lottie-Card，可以很方便的使用lottie json动画（html-card card_mod注入等应该也可以，反正我没成功过）
项目地址：fastender/Lottie-Card: Display Lottie animations in Home Assistant
但是原版功能比较单一，配置项都是写死的，不怎么灵活，特别对于我这种if else仙人，
于是借AI之力，修改了一版，为大部分参数添加了完整js模版表达式的功能，看齐button-card
食用方法：
1、下载改版的Lottie-Card js文件（无需安装原版）：

游客，如果您要查看本帖隐藏内容请回复

2、把js文件放到ha可以读取的路径，比如/config/www/community/lottie-card-mod/lottie-card-mod-with-webgl.js
3、进入ha的设置，仪表盘，右上角3个点，资源，右下角添加资源
4、如果你的js放在例子路径内，那网址填写/local/community/lottie-card-mod/lottie-card-mod-with-webgl.js，其他路径就自行修改，资源类型是js模块
5、确定之后，清除浏览器缓存，ctrl+F5刷新ha(保险点加上开发者快速重载）
6、F12打开控制台，切到网络工具，刷新一下看看有没有lottie-card-mod-with-webgl.js加载到，有加载到才算成功


使用范例：
使用实例.yaml (1.66 KB, 下载次数: 3)

昨天 01:54 上传

点击文件名下载附件

以上，继续肝我的新UI去了。。。

隔壁的王叔叔

来，加分

bugensui

等我有时间了，研究下，纯html+css搞个ui，这个方案应该是最优解了。还可以自适应pc和手机，

wenbieba

看着好高深

wdmywm4

感觉现在阻拦在我面前的最大问题就是我设计不出好看的图标……哈哈哈哈，绝症了属于是（

lovesf

让 江小白 来看看帖子里藏了啥好东西~~~