AAFdev

Lottie 动画

基于 lottie-web 的动画组件，支持内联数据或 JSON 文件两种方式。

图标总览

/assets/icons/lottie/ 下所有可用动画，悬停预览播放。

404

ai-processing

cat

confetti

dashboard

dashboard-1

design

dislike

error

lupuorrc

premium

robot

success

voice

warning

基础能力

播放控制

鼠标悬停播放

悬停时播放，离开时归零

悬停图标试试

不同尺寸

40px

80px

120px

渲染器对比

svg

canvas

Dashboard 动画

dashboard

dashboard-1

使用场景

以下场景当前均使用占位动画（lupuorrc），替换为对应场景专属 Lottie 文件即可。

SplashScreen

应用初始化时全屏显示，替换现有 CSS pulse + spin

空状态 Empty State

知识库、工作流、通知列表等无数据时展示

暂无数据

还没有任何内容，点击下方按钮创建第一个

即将上线 Coming Soon

替换静态火箭 webp 插画，配合倒计时更有氛围

AI 语音中

聊天/工作流执行/AIGC 生成时的 loading 状态

等待响应

操作成功/失败反馈

Toast 或内联反馈，loop=false 播一次后消失

导航图标 Hover

侧边栏菜单图标悬停时播放，离开归零（playOnHover）

仪表盘

知识库

工作流

设置

弹窗反馈（成功 / 失败 / 警告确认）

结果类用 Dialog，危险操作确认用 AlertDialog，顶部插画替代静态图标

Toast 通知

用 toast.custom() 内嵌 Lottie，loop=false 播一次（成功/失败），loop 循环（警告）

Props 参考

Prop	类型	默认值	说明
animationData	object	—	内联 JSON 数据（与 name 二选一）
name	string	—	文件名，加载 /assets/icons/lottie/{name}.json
width / height	number \| string	300	容器尺寸
loop	boolean	true	是否循环播放
autoplay	boolean	true	是否自动播放
renderer	svg \| canvas \| html	svg	渲染器类型
playOnHover	boolean	false	悬停时播放，离开归零
onComplete	() => void	—	动画完成回调（配合 loop=false 使用）
onLoopComplete	() => void	—	每次循环完成回调