给静态博客文章添加Lottie表情包

前言#

看到标题旁边可爱生动的表情包了吗？这是在《让Halo博客支持Lottie动画文件渲染》一文中发现的好东西，查阅了一下Lottie动画的原理，原来QQ上的超级表情就是Lottie动画，该文作者为Halo做了Lottie动画插件，使用Halo的朋友可以看看他的文章。想给我的静态博客也添加这个有趣的功能，感觉能给文章增添一些趣味性，于是新的折腾之旅开始了。

为什么选择用Lottie动画#

和GIF相比，Lottie极小的体积带来近乎瞬时的加载体验，显著提升网页的启动与响应速度。

Lottie不仅支持复杂的视觉效果，而且由于是基于矢量的动画，在任何屏幕尺寸下都能保持清晰锐利。

动画本质是JSON数据，可直接通过修改代码来调整颜色、速度等参数，无需重新P图。

我的博客添加Lottie表情包的大致方法#

我的博客已有remark-directive文本指令语法，所以我要实现的效果是：在Markdown中直接输入“：Lottie[test]{}”后变成一个内联动画元素，在文字间自然排列，尺寸随设备自适应，写了大致的计划，开始丢给ai执行。

表情包获取#

从《导出QQ所有超级表情包 (共144张)》一文中得知，电脑上的QQ文件夹里就存放了Lottie表情，找到QQ的运行目录后搜索“qlottie”文件夹里面的就是Lottie表情包，甚至有些是QQ上没启用的，不过里面存放的表情包太多了，有些我用不上，自己存了一小部分，有需要的朋友可以直接下载。

下载地址#

蓝奏云：https://weasel6.lanzouu.com/iSfZT46zg3vg

蓝奏云优享版：https://www.ilanzou.com/s/sHBK5G21

实现步骤#

1、博客项目里创建一个新的文件夹用来存放表情包。

2、通过AI增加和修改了若干插件和脚本，用于在客户端脚本中定位目标元素、渲染Lottie动画标签并识别内联的文本指令。添加了按需加载的小功能，表情包动画在页面窗口外时暂停。

3、添加 CSS 样式，控制表情包的尺寸并实现跨设备自适应。

可能会出现的小问题（已修复）#

表情包和文字大小一致，会让表情包看起来非常非常小，调大表情包尺寸时，别忘了同时做好跨设备的自适应适配。

AI实施完计划后检查发现：在标题中添加表情包后，文章目录会把表情指令中的名称文字（例如 ‘bixin’）也一并显示出来，比如在“##标题”后面加了“：lottie[bixin]{}”，目录里会显示成“标题bixin”。

微信内置的浏览器使用 X5 内核（Android）/ WKWebView（iOS），对 SVG 动画的硬件加速渲染存在 bug，导致表情包闪烁和马赛克。

音乐

前言#