前言

几年前就想过给网站接入 Lottie 动画作为表情包了，但是当时浏览器渲染 Lottie 文件一旦数量多一点就会很卡。

而且我非常喜欢上的动画表情包，为此也开发了一个工具 https://b.ncii.cn/archives/avAzRUQh 进行批量下载以及批量转换 .gif .avif 等格式。

博客之前评论的表情包也大部分摘自该平台，转换为了 .avif 格式，但是多少差点意思。因为就算是转换为 .avif 格式，稍复杂一些的 Lottie 动画也会有 300-600Kb 的大小，并且发大也会失真，而且每次转换也挺麻烦的。

然后这几天狂蹬 Codex，通过开源库 https://github.com/LottieFiles/dotlottie-web 作为渲染层实现了 Halo 的 Lottie 动画插件，并且也给 Halo 的第三方评论插件进行了 PR 适配 https://github.com/acanyo/plugin-comment-next，使其评论支持了 Lottie 动画文件，这下舒服了。

蹬出来的插件已经放到 Github 上开源了，也已经上架了 Halo 应用市场 https://www.halo.run/store/apps/app-pkmk2nzf，可以直接下载安装。

插件如何使用

使用方式很简单，安装插件后会在后台左侧内容导航栏新增一个动画管理 的标签页，可以在这里导入、添加、编辑、删除你的 Lottie 动画文件。

在 Halo 默认的富文本编辑器中可以通过 /lottie 、或者工具栏的笑脸图标插入。

插件的使用很简单，有问题可以提 Issue，这里不过多赘述。

什么是 Lottie？

Lottie 是由 Airbnb 开源的一款跨平台动画解析库。它允许设计师使用 Adobe After Effects (AE) 制作动画，并通过插件导出为轻量的 JSON 文件，让应用和网页直接在本地流畅渲染出复杂的矢量动画。

优势

• 体积超小：相比传统 GIF 动图，Lottie 的文件大小通常小得多，加载速度更快。

• 清晰不失真：基于矢量图形，无论放大缩小多少倍都保持高清，并且支持高帧率。

• 跨平台支持：同一份 JSON 文件可以无缝运行在 iOS、Android、Web 以及 Windows 等多个平台。

• 支持交互：可以通过代码动态控制动画的播放速度、进度、甚至响应用户的点击和滑动操作。

比如下方这个表情包，就是 Lottie 的，不失真且高帧率(60FPS)。

一些 Lottie 动画文件

我在仓库的 Issue 中已经提供了收集的大量 Lottie 动画文件，有需要的可以自取，后续也会在该 Issue 持续更新。