Lottie 动画

Lottie 动画是一款轻量级、高性能的动画解决方案。扣子低代码应用支持添加 Lottie 动画组件用于播放 Lottie 动画，增强低代码应用的视觉效果和交互体验。

属性设置

Lottie 动画组件提供了丰富的属性配置选项，以下是一些关键属性配置说明。关于组件尺寸、位置、样式、指针、变换等通用属性的设置方法，请参考设置组件属性和事件。

内置丰富的动画库

Lottie 动画组件内置了丰富的动画资源库，你可以直接挑选并应用合适的动画效果。

自定义 Lottie 动画

支持从本地上传 Lottie JSON 文件并自动解析。

循环播放

打开循环播放后，Lottie 动画会在界面加载时循环播放。

自动播放

打开自动播放后，Lottie 动画会在界面加载时自动播放。

隐藏组件

控制 Lottie 动画组件隐藏或显示的参数，支持在特定条件下隐藏 Lottie 动画组件。

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

例如在解题详情页面，添加了 Lottie 动画组件（Lottie1）和文本组件（text14），Lottie 动画组件用于展示应用正处于解题状态中，文本组件用于展示解题分析内容。为了实现当文本组件开始输出解题内容时，自动隐藏 Lottie 动画组件的效果，你可以在 Lottie 动画组件的可见性属性中，添加变量{{ Text14.content }}。当文本组件中开始输出解题内容时，{{ Text14.content }} 值变为 true，Lottie 动画组件将自动隐藏。

事件设置

通过配置 Lottie 动画组件的事件，可以为 Lottie 动画组件添加丰富的交互功能，以增强用户体验和界面的互动性。

配置示例

拍照解题模板为扣子编程的官方模板，本示例基于拍照解题模板，添加了 Lottie 动画，提升应用的交互体验。例如使用者上传题目，单击开始解题后，应用立即开始解题并自动播放 Lottie 动画，清晰地表达应用正在解题的状态中，使得界面交互更加生动友好；当应用完成解题后，Lottie 动画消失同时界面上展示具体的答案。

具体效果图如下：