带有 Lottie 的动态按钮

Posted 2023-03-10

【中文标题】带有 Lottie 的动态按钮

【英文标题】：Dynamic button with Lottie

【发布时间】：2019-01-25 05:09:36

【问题描述】：

我想创建具有三种不同状态的按钮，即初始、正在加载、已完成。

按钮状态的 UI：

初始 -> 文本标签

正在加载 -> 加载指示器/多张图片

已完成 -> 文本标签

当用户点击它时，它通常会处于Initial状态，然后它会改变它的状态为Loading，并转换自身以在其中显示加载指示器。完成后，它将动画并转换以显示标签。

如何使用 Lottie 实现它？ 我需要动态设置初始和完成状态文本，但根据文档，我找不到将文本更改为 Lottie 的方法。

有了 Lottie，我可以使用进度动画来处理按钮的不同状态，但是如何在没有新的 json 文件的情况下以编程方式更改文本。

Lottie 在 ios 中不支持文本层。除了使用形状层之外，还有什么解决方法吗？

【参考方案1】：

您可以通过直接以编程方式修改 JSON 本身来修改 JSON 中按钮的文本。由于 Lottie 动画和视图由 JSON 管理，因此这是不可能的。

【讨论】：

iOS 中的 Lottie 不支持文本图层。你有什么解决方法吗？

【参考方案2】：

Lottie 中对此没有适当的 API 支持，但此线程讨论了您可以通过 json 文件更改文本的可能方式：

https://github.com/airbnb/lottie-web/issues/238