> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coze.cn/llms.txt
> Use this file to discover all available pages before exploring further.

Lottie 动画是一款轻量级、高性能的动画解决方案。扣子低代码应用支持添加 Lottie 动画组件用于播放 Lottie 动画，增强低代码应用的视觉效果和交互体验。
## 属性设置 {#258b1cc8}
Lottie 动画组件提供了丰富的属性配置选项，以下是一些关键属性配置说明。关于组件尺寸、位置、样式、指针、变换等通用属性的设置方法，请参考[设置组件属性和事件](/guides/set_properties_events)。
### 内置丰富的动画库 {#90a76b5e}
Lottie 动画组件内置了丰富的动画资源库，你可以直接挑选并应用合适的动画效果。
![Image=257x356](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1c5f6a0c09a745e58c02f4ea9d01fd0d~tplv-goo7wpa0wc-image.image)
### 自定义 Lottie 动画 {#a09fba44}
支持从本地上传 Lottie  JSON 文件并自动解析为 Lottie 动画。
![Image=548x137](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a14cac9b3eb745e0a47056ec23b897a7~tplv-goo7wpa0wc-image.image)
### 循环播放 {#6dc5e054}
打开**循环播放**后，Lottie 动画会在界面加载时循环播放。
![Image=289x166](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3df0ac8913c24e30a1ee6594da80d1ba~tplv-goo7wpa0wc-image.image)
### 自动播放 {#f4c53fed}
打开**自动播放**后，Lottie 动画会在界面加载时自动播放。
![Image=292x201](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8cde5c76da344bfebaae09d07a95f18f~tplv-goo7wpa0wc-image.image)
### 隐藏组件 {#7f5b7bff}
控制 Lottie 动画组件隐藏或显示的参数，支持在特定条件下隐藏 Lottie 动画组件。

* 设置为 false：显示组件。
* 设置为 true：隐藏组件。
* 设置为变量：通过变量值（true 或 false）动态控制图片组件的可见性。

例如在文本生成页面，添加了 Lottie 动画组件（Lottie1）和 Markdown 组件（Markdown1），Lottie 动画组件用于展示应用正处于文本生成状态中，Markdown 组件用于展示生成的文本内容。为了实现当 Markdown 组件开始输出内容时，自动隐藏 Lottie 动画组件的效果，你可以在 Lottie 动画组件的**可见性**属性中，添加变量`{{ Markdown1.content }}`。当文本组件中开始输出文本内容时，`{{ Markdown1.content }}` 值变为 true，Lottie 动画组件将自动隐藏。 
![Image=1514x850](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4b118b300c134dccaf869ca0079f10b8~tplv-goo7wpa0wc-image.image)
生成文本后，Lottie 动画组件被隐藏。
![Image=280x289](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/435f5ae187a045f8b154807d4eb57948~tplv-goo7wpa0wc-image.image)
## 事件设置 {#dea5ba1e}
通过配置 Lottie 动画组件的事件，可以为 Lottie 动画组件添加丰富的交互功能，以增强用户体验和界面的互动性。
<!-- @cols-width: 148,709 -->
| | | \
|**事件项** |**说明** |
|---|---|
| | | \
|事件类型 |支持以下事件类型： |\
| | |\
| |* 点击时：当用户点击 Lottie 动画组件时触发。 |\
| |* 加载时：当 Lottie 动画组件完成加载时触发。 |\
| |* 播放完成时：当 Lottie 动画播放完成时触发。 |
| | | \
|组件方法 |支持以下方法： |\
| | |\
| |* 播放：播放 Lottie 动画。 |\
| |* 停止：停止 Lottie 动画。 |\
| |* 暂停：暂停 Lottie 动画。 |\
| |* 设置隐藏：隐藏 Lottie 动画。 |

## 配置示例 {#20757a9b}
[城市天气画报模板](https://www.coze.cn/template/project/7442325596329295872?)为扣子官方模板，本案例基于城市天气画报模板，添加了 Lottie 动画，提升应用的交互体验。当使用者输入城市名，单击**确认**后，应用立即开始生成城市画报并自动播放 Lottie 动画，清晰地表达应用正在生成天气画报的状态中，使得界面交互更加生动友好。当应用生成天气画报后，Lottie 动画消失同时界面上展示城市天气画报。
![Image=2437x1054](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/25f52174af90437aa1f3f70bd11cecfb~tplv-goo7wpa0wc-image.image)
具体效果图如下：

::::cols
@col 33
**输入城市名称**
![Image=486x338](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6b26a0e02a1742b8a0f084241cb3d197~tplv-goo7wpa0wc-image.image)



@col 33
**开始生成图片时循环播放动画**
![Image=630x485](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6e9801c1cd0f45b181b8666c80a8881c~tplv-goo7wpa0wc-image.image)



@col 33
**生成图片后隐藏动画**
![Image=625x618](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6000d556555446de9aecc4b05a3ad82a~tplv-goo7wpa0wc-image.image)

::::