返回 oh-my-ppt
animation-prompt-cookbook.md
根目录 / resources / skills / oh-my-ppt-data-anim / references / animation-prompt-cookbook.md
1 # 动画提示词速查手册
2
3 直接复制、直接用。每条提示词都能在 Oh My PPT 里稳定生成对应动画，且可导出为可编辑 PPTX。
4
5 ---
6
7 ## 入场动画（元素出现）
8
9 ### fade — 纯淡入
10
11 最安静的方式，文字、注释、辅助信息首选。
12
13 ```html
14 <p data-anim="fade">辅助说明文字</p>
15 ```
16
17 视觉：从透明渐变到可见，没有位移。像一个声音从远处慢慢变清晰。
18
19 ---
20
21 ### fade-up — 标准上浮淡入
22
23 最常用的入场动画。卡片、标题、列表项默认选它。
24
25 ```html
26 <h2 data-anim="fade-up">季度营收</h2>
27 <p data-anim="fade-up" data-anim-stagger="90">用户增长 42%</p>
28 <p data-anim="fade-up" data-anim-stagger="90">留存率 86%</p>
29 ```
30
31 视觉：从下方 20px 处一边上移一边淡入。像卡片从桌面浮起。
32
33 ---
34
35 ### fade-down — 下沉淡入
36
37 从上方落下，适合倒计时、从顶部"降落"的信息。
38
39 ```html
40 <div data-anim="fade-down">⏱ 倒计时 3 秒</div>
41 ```
42
43 视觉：从上方 20px 处下移 + 淡入。像纸片从上方飘落到位。
44
45 ---
46
47 ### fade-left / fade-right — 侧向淡入
48
49 从右侧 / 左侧滑入淡入。适合对比布局的左右两栏。
50
51 ```html
52 <div class="grid grid-cols-2 gap-6">
53 <div data-anim="fade-left">当前方案</div>
54 <div data-anim="fade-right">优化方案</div>
55 </div>
56 ```
57
58 视觉：fade-left 从右侧 20px 滑入，fade-right 从左侧 20px 滑入。像两张卡片各从一侧合拢。
59
60 ---
61
62 ### scale-in — 缩放淡入
63
64 比 zoom-in 温和，从 85% 放大到 100% + 淡入。适合图标、小卡片。
65
66 ```html
67 <div data-anim="scale-in">🧩 核心模块</div>
68 ```
69
70 视觉：从小一点点放大到正常尺寸 + 淡入。像一张照片从缩略图展开。
71
72 ---
73
74 ### slide-up / slide-down — 大幅滑动
75
76 比 fade-up 位移更大（40px vs 20px），视觉冲击更强。适合需要明确"运动感"的场景。
77
78 ```html
79 <div data-anim="slide-up">重大公告</div>
80 <div data-anim="slide-down">下拉刷新提示</div>
81 ```
82
83 视觉：slide-up 从下方 40px 大幅上移，slide-down 从上方 40px 大幅下移。比 fade-up 更有"推入"的力量感。
84
85 ---
86
87 ### slide-left / slide-right — 大幅侧滑
88
89 比 fade-left/fade-right 位移更大（40px vs 20px），适合全宽卡片、大面板的入场。
90
91 ```html
92 <div data-anim="slide-left">右侧面板内容</div>
93 <div data-anim="slide-right">左侧面板内容</div>
94 ```
95
96 视觉：slide-left 从右侧 40px 推入，slide-right 从左侧 40px 推入。像抽屉被拉出来。
97
98 ---
99
100 ### fly-in — 方向飞入
101
102 配合 `data-anim-from` 指定飞行方向。适合指标从屏幕边缘飞入。
103
104 ```html
105 <div data-anim="fly-in" data-anim-from="left">挑战</div>
106 <div data-anim="fly-in" data-anim-from="right">方案</div>
107 <div data-anim="fly-in" data-anim-from="top">顶部指标</div>
108 <div data-anim="fly-in" data-anim-from="bottom">底部数据</div>
109 ```
110
111 视觉：从指定方向 40px 外飞入 + 淡入。像弹幕/飞行文字效果。
112
113 > `data-anim-from="center"` 会变成缩放入场（scale 0.9→1），不做位移。
114
115 ---
116
117 ### wipe — 擦除显现
118
119 配合 `data-anim-from` 指定擦除方向。适合进度条、时间线段、横幅。
120
121 ```html
122 <div data-anim="wipe" data-anim-from="left">进度 75%</div>
123 <div data-anim="wipe" data-anim-from="right">反向揭示</div>
124 <div data-anim="wipe" data-anim-from="top">从顶部展开</div>
125 <div data-anim="wipe" data-anim-from="bottom">从底部展开</div>
126 ```
127
128 视觉：clip-path 从一侧裁切区域逐渐展开到全部可见。像幕布被拉开。
129
130 ---
131
132 ### zoom-in — 强力缩放
133
134 从 75% 放大到 100% + 淡入，视觉冲击最大。适合英雄数字、关键指标。
135
136 ```html
137 <div data-anim="zoom-in" data-anim-duration="800">
138 <p class="text-5xl font-bold">42%</p>
139 <p class="text-lg text-gray-500">市场增长率</p>
140 </div>
141 ```
142
143 视觉：从远到近快速放大 + 淡入。像电影里的"推镜头"。
144
145 ---
146
147 ### spin-in — 旋转缩放
148
149 旋转 -12° + 缩放 92%→100% + 淡入。有趣但不宜多用。
150
151 ```html
152 <div data-anim="spin-in" data-anim-duration="600">🎯 目标达成</div>
153 ```
154
155 视觉：微微旋转着放大到位。像陀螺停下来的感觉。
156
157 ---
158
159 ### path — 路径运动
160
161 沿线性路径移动，适合图示流动、箭头动画。
162
163 ```html
164 <div data-anim="path" data-anim-path="M 0 0 L 120 30">→ 流向目标</div>
165 <div data-anim="path" data-anim-path="M 0 0 L -80 -60">↖ 回溯</div>
166 <div data-anim="path" data-anim-path="M 0 0 L 0 -150">↑ 上升</div>
167 ```
168
169 视觉：沿指定直线方向平移。`M 0 0 L 120 30` 表示向右 120px、向下 30px。
170
171 > 路径格式只支持 `M x y L dx dy`，不支持曲线。小数也可以：`M 0 0 L 12.5 3.25`。
172
173 ---
174
175 ## 强调动画（元素已在屏幕上）
176
177 强调动画不会改变元素的可见性，只是让它"动一下"吸引注意。播放后元素回到原位。
178
179 ### pulse-soft — 极轻柔脉冲
180
181 几乎察觉不到的缩放（1→1.03→1），适合 KPI 数字打磨、低调提示。
182
183 ```html
184 <div data-anim="pulse-soft" data-anim-duration="600">
185 <p class="text-2xl font-semibold">99.9%</p>
186 <p class="text-lg text-gray-500">可用性</p>
187 </div>
188 ```
189
190 视觉：微微鼓起一点点然后复原，不仔细看几乎感觉不到。
191
192 ---
193
194 ### pulse — 标准脉冲
195
196 缩放 1→1.06→1，适合关键指标、需要温和但明确关注的内容。
197
198 ```html
199 <div data-anim="pulse" data-anim-duration="600">
200 <p class="text-xl font-bold text-red-600">关键风险</p>
201 <p class="text-lg">Q3 前需行动</p>
202 </div>
203 ```
204
205 视觉：轻轻鼓起再缩回，像心跳一下。
206
207 ---
208
209 ### pulse-strong — 强脉冲
210
211 缩放 1→1.10→1，视觉上明显放大。适合紧急告警、需立即关注的内容。
212
213 ```html
214 <div data-anim="pulse-strong" data-anim-trigger="click">
215 <p class="text-xl font-bold text-red-700">⚠ 紧急</p>
216 </div>
217 ```
218
219 视觉：明显放大再弹回，像被戳了一下。配合 click 触发效果更好。
220
221 ---
222
223 ### grow-shrink-soft — 温和缩放
224
225 先缩小到 0.95，再放大到 1.04，回到 1。像"深呼吸一下"的感觉。
226
227 ```html
228 <div data-anim="grow-shrink-soft" data-anim-duration="800">确认提交</div>
229 ```
230
231 视觉：先微缩再微扩再复原，有呼吸感。
232
233 ---
234
235 ### grow-shrink — 标准缩放
236
237 先缩小到 0.9，再放大到 1.08，回到 1。比 grow-shrink-soft 明显。
238
239 ```html
240 <div data-anim="grow-shrink" data-anim-duration="800">重要提醒</div>
241 ```
242
243 视觉：先缩小再放大再复原，像弹簧压下去再弹回来。
244
245 ---
246
247 ### grow-shrink-strong — 强力缩放
248
249 先缩小到 0.85，再放大到 1.12，回到 1。视觉冲击最强的强调动画。
250
251 ```html
252 <div data-anim="grow-shrink-strong" data-anim-duration="900">
253 <p class="text-3xl font-bold">里程碑达成！</p>
254 </div>
255 ```
256
257 视觉：大幅缩小再大幅放大再复原，很有戏剧感。慎用，一页最多一处。
258
259 ---
260
261 ## 退场动画（元素离开）
262
263 ### exit-fade — 淡出
264
265 最安静的离场方式。
266
267 ```html
268 <div data-anim="exit-fade" data-anim-duration="400">旧内容消失</div>
269 ```
270
271 视觉：从可见渐变到透明。像画面慢慢隐去。
272
273 ---
274
275 ### exit-scale — 缩小淡出
276
277 温和的缩放离场（scale 1→0.85 + fade out），适合低调移除次要元素。
278
279 ```html
280 <div data-anim="exit-scale">已完成项</div>
281 ```
282
283 视觉：微微缩小 + 淡出。像一张卡片悄悄收起。
284
285 ---
286
287 ### exit-zoom — 强缩放离场
288
289 强力缩放离场（scale 1→0.75 + fade out），戏剧感强。
290
291 ```html
292 <div data-anim="exit-zoom" data-anim-duration="600">主角退场</div>
293 ```
294
295 视觉：大幅缩小 + 淡出。像镜头急速拉远。
296
297 ---
298
299 ### exit-wipe — 擦除退场
300
301 配合 `data-anim-from` 指定擦除方向。适合横幅消失、进度条归零。
302
303 ```html
304 <div data-anim="exit-wipe" data-anim-from="left">横幅消失</div>
305 <div data-anim="exit-wipe" data-anim-from="right">向右擦除</div>
306 ```
307
308 视觉：clip-path 从可见逐渐裁切到隐藏。像幕布合上。
309
310 ---
311
312 ### exit-fly — 飞出
313
314 配合 `data-anim-from` 指定飞出方向。
315
316 ```html
317 <div data-anim="exit-fly" data-anim-from="left">向左飞出</div>
318 <div data-anim="exit-fly" data-anim-from="right">向右飞出</div>
319 <div data-anim="exit-fly" data-anim-from="top">向上飞出</div>
320 <div data-anim="exit-fly" data-anim-from="bottom">向下飞出</div>
321 ```
322
323 视觉：沿指定方向飞出屏幕 + 淡出。像弹幕飞走。
324
325 ---
326
327 ## 组合模式
328
329 ### 交错卡片阵列
330
331 多张卡片依次入场，每张间隔 90ms。
332
333 ```html
334 <div class="grid grid-cols-3 gap-4">
335 <div data-anim="fade-up" data-anim-stagger="90">
336 <p class="text-3xl font-bold">$12M</p>
337 <p class="text-lg text-gray-500">营收</p>
338 </div>
339 <div data-anim="fade-up" data-anim-stagger="90">
340 <p class="text-3xl font-bold">86%</p>
341 <p class="text-lg text-gray-500">留存</p>
342 </div>
343 <div data-anim="fade-up" data-anim-stagger="90">
344 <p class="text-3xl font-bold">2.4x</p>
345 <p class="text-lg text-gray-500">ROI</p>
346 </div>
347 </div>
348 ```
349
350 交错节奏参考：
351 - 60–80ms：紧凑、有活力（适合指标卡、小卡片）
352 - 90–120ms：舒适、从容（适合列表项、步骤）
353 - 150–200ms：戏剧、缓慢（适合关键论点、章节段落）
354
355 ---
356
357 ### 标题 + 内容 序列
358
359 标题先入场，辅助内容同时出现（with），证据卡片在标题完成后出现（after）。
360
361 ```html
362 <h2 data-anim="fade-up" data-anim-duration="600">核心洞察</h2>
363 <p data-anim="fade" data-anim-sequence="with" data-anim-delay="80" data-anim-duration="500">
364 辅助说明随标题一同出现
365 </p>
366 <div data-anim="fade-up" data-anim-sequence="after" data-anim-duration="500">
367 证据卡片在标题完成后出现
368 </div>
369 ```
370
371 ---
372
373 ### 对比飞入
374
375 左右两栏分别从两侧飞入。
376
377 ```html
378 <div class="grid grid-cols-2 gap-6">
379 <div data-anim="fly-in" data-anim-from="left">
380 <h3>挑战</h3>
381 <p>传统方法力不从心</p>
382 </div>
383 <div data-anim="fly-in" data-anim-from="right">
384 <h3>方案</h3>
385 <p>我们直接解决了这个问题</p>
386 </div>
387 </div>
388 ```
389
390 ---
391
392 ### 英雄数字 + 支撑卡片
393
394 大数字用 zoom-in 强调，小卡片用 fade-up 交错入场。
395
396 ```html
397 <div class="flex flex-col gap-6">
398 <div data-anim="zoom-in" data-anim-duration="800">
399 <p class="text-5xl font-bold">42%</p>
400 <p class="text-lg text-gray-500">市场增长</p>
401 </div>
402 <div class="grid grid-cols-3 gap-4">
403 <div data-anim="fade-up" data-anim-stagger="80">卡片 1</div>
404 <div data-anim="fade-up" data-anim-stagger="80">卡片 2</div>
405 <div data-anim="fade-up" data-anim-stagger="80">卡片 3</div>
406 </div>
407 </div>
408 ```
409
410 ---
411
412 ### 点击分步揭示
413
414 用 click 触发一步一步展示内容，适合演讲演示。
415
416 ```html
417 <div data-anim="fade-up" data-anim-trigger="click" data-anim-click-group="step-1">
418 第一步：发现问题
419 </div>
420 <div data-anim="pulse-soft" data-anim-trigger="click" data-anim-click-group="step-1">
421 关键指标
422 </div>
423 <div data-anim="fade-up" data-anim-trigger="click">
424 第二步：分析原因
425 </div>
426 <div data-anim="fade-up" data-anim-trigger="click">
427 第三步：执行方案
428 </div>
429 ```
430
431 - `click-group="step-1"`：两个元素在同一次点击时一起出现
432 - 后续无 click-group 的元素各占一次点击
433
434 ---
435
436 ### 强调 + 确认
437
438 先标记风险（pulse），再确认应对（grow-shrink-soft）。
439
440 ```html
441 <div data-anim="pulse" data-anim-duration="600">
442 <p class="text-xl font-bold text-red-600">风险提示</p>
443 </div>
444 <div data-anim="grow-shrink-soft" data-anim-duration="800">
445 <p class="text-lg text-green-600">已有应对方案</p>
446 </div>
447 ```
448
449 ---
450
451 ### 入场 → 强调 → 退场 完整生命周期
452
453 一个元素先入场、后强调、最后退场。
454
455 ```html
456 <div data-anim="fade-up" data-anim-duration="500">
457 <p>临时通知</p>
458 </div>
459 <div data-anim="pulse-strong" data-anim-trigger="click" data-anim-click-group="notice">
460 <p>临时通知</p>
461 </div>
462 <div data-anim="exit-fade" data-anim-trigger="click" data-anim-duration="300">
463 <p>临时通知</p>
464 </div>
465 ```
466
467 ---
468
469 ## 提示词复制模板
470
471 以下是直接可用的提示词，在生成幻灯片时粘贴到指令中：
472
473 ### 模板 1：标准商务汇报
474
475 ```
476 给所有卡片加 fade-up 入场动画，交错 100ms。标题用 zoom-in 800ms。关键指标用 pulse 强调。
477 ```
478
479 ### 模板 2：数据仪表盘
480
481 ```
482 指标卡片用 fly-in from bottom，交错 80ms。大数字用 zoom-in 800ms 强调。
483 低于预期的指标用 pulse-strong 标红提醒。进度条用 wipe from left。
484 ```
485
486 ### 模板 3：对比分析
487
488 ```
489 左侧用 fly-in from left，右侧用 fly-in from right，同时入场形成对比。
490 核心差异用 grow-shrink 强调。总结用 scale-in 入场。
491 ```
492
493 ### 模板 4：逐步演示
494
495 ```
496 所有要点用 click 触发，每点 fade-up 入场。
497 同一组的相关元素用 click-group 合并到同一次点击。
498 最后结论用 zoom-in + pulse-strong 组合强调。
499 ```
500
501 ### 模板 5：温和叙述
502
503 ```
504 标题用 fade-up 600ms，正文用 fade 入场。
505 段落之间用 data-anim-sequence="after" 形成自然阅读节奏。
506 关键词用 pulse-soft 轻柔提示。
507 ```
508
509 ### 模板 6：戏剧性发布
510
511 ```
512 主数字用 zoom-in 800ms 入场后接 pulse-strong 强调。
513 支撑论据用 slide-up 交错 120ms。
514 旧数据用 exit-scale 退场，新数据用 fly-in from bottom 入场。
515 ```
516
517 ### 模板 7：流程图示
518
519 ```
520 流程节点沿路径入场：用 path 动画，每个节点从上一个节点方向滑入。
521 关键节点用 grow-shrink 强调。完成节点用 exit-fade 淡出。
522 箭头用 wipe from left 表示方向。
523 ```
524
525 ---
526
527 ## 动画选择速查表
528
529 | 我想让元素… | 选这个 | 理由 |
530 |---|---|---|
531 | 安静地出现 | `fade` | 不动，只淡入 |
532 | 从下方浮起 | `fade-up` | 最通用，卡片/标题默认 |
533 | 大幅推入 | `slide-up` | 比 fade-up 力度大一倍 |
534 | 从特定方向飞入 | `fly-in` + `from` | 方向感强，适合指标 |
535 | 幕布般揭开 | `wipe` + `from` | 适合进度条、横幅 |
536 | 从远到近放大 | `zoom-in` | 英雄数字、关键数据 |
537 | 微妙缩放 | `scale-in` | 比 zoom-in 温和 |
538 | 转着圈进来 | `spin-in` | 有趣但别多用 |
539 | 沿指定路线移动 | `path` | 流程图、箭头 |
540 | 轻轻鼓一下 | `pulse-soft` | 几乎感觉不到 |
541 | 心跳一下 | `pulse` | 温和但明确的强调 |
542 | 被戳一下 | `pulse-strong` | 紧急告警 |
543 | 深呼吸 | `grow-shrink-soft` | 先缩再扩再复原 |
544 | 弹簧压放 | `grow-shrink` | 比 soft 明显 |
545 | 大幅弹跳 | `grow-shrink-strong` | 最戏剧化的强调 |
546 | 安静地消失 | `exit-fade` | 淡出 |
547 | 缩小消失 | `exit-scale` | 温和离场 |
548 | 急速缩小消失 | `exit-zoom` | 强烈离场 |
549 | 被擦除 | `exit-wipe` + `from` | 幕布合上 |
550 | 飞走 | `exit-fly` + `from` | 弹幕式离场 |
551
551 lines MARKDOWN