
循环动图 · 6 帧

柱状图长高的 UI 动效
做汇报页或加载态时,这种简单动效很好用。
写法要点
✍️ 错开升高比一起升高好看,这是动效设计的基本功。这张不放数字,避免模型编造数据。如果要精确控制时序,还是用 CSS 或 Lottie 更合适。
完整提示词
📋 提示词 自然语言
Create a 6-frame UI motion sprite sheet, 3 columns by 2 rows of equal 512x512 cells on a clean white background. Subject: a flat rounded card with a simple bar chart of four rounded bars in teal, on one fixed baseline. The bars rise in a staggered sequence: all low, first bar tall, first two tall, three tall, all tall, then falling back to low. The card, baseline and bar widths stay exactly the same in every cell. Consistent spacing grid, no axes labels. No grid lines between cells, no numbers, no text, no logos.
📋 中文译写版 自然语言
生成 6 帧 UI 动效精灵图,3 列 2 行,每格 512x512,干净白色背景。主体是扁平圆角卡片,里面是简单的柱状图,四根青色圆角柱站在同一条固定基线上。柱子错开升高:全部较低、第一根升高、前两根升高、三根升高、全部升高,再回落到较低。卡片、基线和柱宽每格完全相同。间距统一,没有坐标轴标签。格子之间不要分隔线,不要数字、文字和标志。












