# 动画贴纸插件

**URL:** https://meta.discourse.org/t/plugin-for-animated-stickers/123212
**Category:** Feature
**Created:** [2019年七月17日 16:30 UTC](https://meta.discourse.org/t/plugin-for-animated-stickers/123212 "2019-07-17T16:30:56Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2019年七月17日 16:30 UTC](https://meta.discourse.org/t/plugin-for-animated-stickers/123212/1 "2019-07-17T16:30:56Z")

</div>

Discourse 可以开发一个插件，为动态贴纸添加一个新的表情选择器。

目前存在一种开放格式，通过名为 LottieFiles 的 JSON 文件来定义动态贴纸。

> Lottie 是一个适用于 Android、iOS、Web 和 Windows 的库，它能解析通过 [Bodymovin](https://github.com/airbnb/lottie-web) 导出为 JSON 格式的 [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) 动画，并在移动设备和网页上原生渲染它们！
> 
> 设计师们首次能够 **创建并发布** 精美的动画，而无需工程师手动逐一重现。人们常说“一图胜千言”，那么这里就有 13,000 个“字”：
> 
> ![animation](https://global.discourse-cdn.com/meta/original/3X/e/c/ecdc1b8942efd8fc95a6b8a87e90636e075292fc.gif)

最近，Telegram 推出了 Telegram 动态贴纸功能，基于相同的技术并使用 `.tgs` 文件格式：

> **[Animated Stickers Done Right](https://telegram.org/blog/animated-stickers)**
>
> We launched stickers back in January 2015. Since then, the Telegram sticker format has been adopted by other apps to reach a total of 2 billion people. Today we're introducing a new format for animated stickers.

所有在 After Effects 中创建这些贴纸的工具都是开源的：[GitHub - TelegramMessenger/bodymovin-extension: Bodymovin-tg — After Effects extension for exporting Telegram animated stickers. · GitHub](https://github.com/TelegramMessenger/bodymovin-extension)

* * *

这些文件的网页播放器在这里：[https://lottiefiles.com/web-player](https://lottiefiles.com/web-player)

该插件将在此处添加对 `tgs` 或 Lottie `json` 文件的支持（`tgs` 只是经过 gzip 压缩的 Lottie JSON）：

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/c/3c65bfc0e6bb9e0356c5ac6d02d56e3e1312cace.png)

并在以下位置添加一个新的表情选择器：

![image](https://global.discourse-cdn.com/meta/original/3X/0/5/055567331666aae0f94fe3b46cc43078b2953ebf.png)

点击后会弹出新的动态贴纸选择器：

[https://global.discourse-cdn.com/meta/original/3X/0/a/0a7898c871e8500675e65406a5453cef5892d0cf.mp4](https://global.discourse-cdn.com/meta/original/3X/0/a/0a7898c871e8500675e65406a5453cef5892d0cf.mp4)

管理员可以轻松地在此处查找 LottieFiles：[https://lottiefiles.com/search?q=emoji，并使用](https://lottiefiles.com/search?q=emoji%EF%BC%8C%E5%B9%B6%E4%BD%BF%E7%94%A8) [https://lottiefiles.com/preview/telegram](https://lottiefiles.com/preview/telegram) 将其转换为 tgs 格式。

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2019年七月19日 17:51 UTC](https://meta.discourse.org/t/plugin-for-animated-stickers/123212/2 "2019-07-19T17:51:07Z")

</div>

今天，Skia 发布了 [CanvasKit](https://skia.org/user/modules/canvaskit)，这是一个用于 Skia 的 WASM 渲染器，并附带了 [Skottie](https://skia.org/user/modules/skottie) 插件，用于渲染 Lottie 动画！

> 该播放器旨在基于当今广泛用于动画的 Lottie 播放器进行构建，在性能、功能集和平台一致性方面进行改进。

> **[Sign in - Google Accounts](https://accounts.google.com/v3/signin/identifier?opparams=%253F&dsh=S255052240%3A1777598433972871&access_type=online&approval_prompt=auto&client_id=31977622648-1873k0c1e5edaka4adpv1ppvhr5id3qm.apps.googleusercontent.com&o2v=1&redirect_uri=https%3A%2F%2Fskia.org%2Foauth2callback%2F&response_type=code&scope=email&service=lso&state=72808A75FF7D14A73C0D866FD0C9A51C%3Abc6762a218cf268ce2048dcc1495206304488cbde29010843dfc6b14b866adba%3Ahttps%3A%2F%2Fskia.org%2Flogin%2F&flowName=GeneralOAuthFlow&continue=https%3A%2F%2Faccounts.google.com%2Fsignin%2Foauth%2Fconsent%3Fauthuser%3Dunknown%26part%3DAJi8hAOJDJkT_bXPkDi309ZBGmqIPLvvT6wA3ornHDVpm96Km2F--s4sGw84RyoSZvXc5okJ-jm4ApC7kWFlfWBiuacXVhT2HeRCcclsBlKvMJydctMauM-y7Thluw8rixuNlBqbj0h0LeMsxDvig5Thj5Bk8O5QsH31iWbgqDSl6aWP6I3zVoXNVdEjQc8sxVnpYKvLpzxSWJlNn43msEwDAg9n3hdnRxCc78UsOBlMkefHVWIvsX8MauKHEyQRuCcUyvKXNhYUfTpbm6KP-CdoekSvWPsHTfA5xLSu7mdXwRSLFaLPyy9uWfv6i1x6sdPihwDvB0xMcq6D2xYnyxJBGLr0UEW3gzvvu7Suy1F-e504JIBekZVAzfH7jilmSJOnbXhltT4Wa5mfBbdXepXF6rSyEjdN_qnwAtZEQLCJayy8dclYC0vwN_qTbeRn_G0Ds6lRAliQ%26flowName%3DGeneralOAuthFlow%26as%3DS255052240%253A1777598433972871%26client_id%3D31977622648-1873k0c1e5edaka4adpv1ppvhr5id3qm.apps.googleusercontent.com%26requestPath%3D%252Fsignin%252Foauth%252Fconsent%23&app_domain=https%3A%2F%2Fskia.org&rart=ANgoxcea0bK6rwRly8JKMtCxLgYgnXYWFz4hpcspEwAqaQS9q0N4iCVGPEhVVKoJ8xnmFQ74h7YDQWl3stTAnNq9Lsjd1m4eEWgr2UsO5CgtVv0k1D4v6bs)**

---

<div class="post-metadata">

### Author: ![Eduardo\_Braga](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eduardo_braga/32/110348_2.png) [@Eduardo\_Braga](https://meta.discourse.org/u/Eduardo_Braga)
#### Post date: [2019年七月19日 19:34 UTC](https://meta.discourse.org/t/plugin-for-animated-stickers/123212/3 "2019-07-19T19:34:03Z")

</div>

是否可以用这些动画替换图标？

例如：Twitter  
 ![image](https://global.discourse-cdn.com/meta/original/3X/c/5/c5cfad95c30da7d4284275a2ddf3d186b7cc1c2c.png)

链接：[https://lottiefiles.com/518-twitter-favorite-heart](https://lottiefiles.com/518-twitter-favorite-heart)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2019年七月19日 19:37 UTC](https://meta.discourse.org/t/plugin-for-animated-stickers/123212/4 "2019-07-19T19:37:36Z")

</div>

> [@Eduardo\_Braga](#):
>
> 是否可以用这些动画替换图标？

目前不可能实现，因为这只是一个插件提案，可能永远不会实施。

如果我们构建了这个插件，我们将具备渲染 Lottie 动画的基础，或许可以将其扩展用于图标，但这需要大量的额外工作。

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2025年一月29日 11:24 UTC](https://meta.discourse.org/t/plugin-for-animated-stickers/123212/5 "2025-01-29T11:24:40Z")

</div>

如果有人有预算并希望我来处理，请私下联系我。

---

<div class="post-metadata">

### Author: ![gilles](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gilles/32/549022_2.png) [@gilles](https://meta.discourse.org/u/gilles)
#### Post date: [2026年七月11日 09:04 UTC](https://meta.discourse.org/t/plugin-for-animated-stickers/123212/6 "2026-07-11T09:04:16Z")

</div>

能够添加动态贴纸会很有趣，这或许能给 Discourse 带来一些新鲜感 😁

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2026年七月11日 10:25 UTC](https://meta.discourse.org/t/plugin-for-animated-stickers/123212/7 "2026-07-11T10:25:41Z")

</div>

我认为你可以使用 Don 的主题组件来实现这一点

> [@Discourse 贴纸](https://meta.discourse.org/t/discourse-stickers/280873):
>
> information_source概要 添加贴纸eyeglasses预览 [Theme Creator](https://discourse.theme-creator.io/theme/Don/discourse-stickers)hammer_and_wrench代码库 [GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers.](https://github.com/VaperinaDEV/discourse-stickers)question安装指南 [如何安装主题或主题组件](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_book不熟悉 Discourse 主题？ [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component 你好 wave 使用此主题组件，您可以为帖子和聊天消息添加贴纸… 工作原理？ 它会在编辑器中放置一个按钮，该按钮会打开贴纸模态框。 贴纸模态框 单击贴纸后，它将将其添加到编辑器中。 图像的 markdown 代码将放入 […
