PPTX
动画效果
为形状添加进入、退出、强调和运动路径动画
为形状添加动画效果，控制它们在演示文稿中的出现和行为方式。
基本用法
动画通过 animation 属性直接设置在形状上：
import { Shape } from "@office-open/pptx";
new Shape({
x: 1,
y: 1,
width: 6,
height: 3,
text: "动画形状",
animation: {
type: "fade",
duration: 800,
},
});
动画类型
进入动画（class: "entr"，默认）
| 类型 | 描述 | 支持的方向 |
|---|---|---|
appear | 立即出现 | — |
fade | 淡入 | — |
fly | 从边缘飞入 | left、right、up、down |
wipe | 从边缘擦入 | left、right、up、down |
dissolve | 溶解出现 | — |
split | 分裂出现 | horizontal、vertical |
blinds | 百叶窗效果 | horizontal、vertical |
checker | 棋盘效果 | horizontal、vertical |
randomBars | 随机条纹 | horizontal、vertical |
wheel | 轮辐效果 | — |
zoom | 缩放出现 | — |
cover | 从边缘覆盖 | left、right、up、down |
push | 从边缘推入 | left、right、up、down |
strips | 从角落条状出现 | left、right、up、down |
退出动画（class: "exit"）
与进入动画相同的类型，添加 class: "exit"：
animation: { type: "fade", class: "exit", duration: 800 }
animation: { type: "fly", class: "exit", direction: "right" }
强调动画（class: "emph"）
emphasisType | 描述 |
|---|---|
growShrink | 放大后缩小 |
spin | 完整旋转 |
colorChange | 变色（需指定 color） |
transparency | 半透明闪烁 |
boldFlash | 加粗闪烁 |
wave | 波浪效果 |
pulse | 脉冲效果 |
growWithTurn | 旋转放大 |
animation: { class: "emph", emphasisType: "growShrink", duration: 800 }
animation: { class: "emph", emphasisType: "spin", duration: 1000 }
animation: { class: "emph", emphasisType: "colorChange", color: "FF0000" }
运动路径动画
pathType | 描述 |
|---|---|
line | 直线 |
arc | 弧线 |
circle | 圆形路径 |
curve | S 形曲线 |
figureEight | 8 字形 |
bounce | 弹跳路径 |
loop | 环形路径 |
customPath | 自定义 SVG 路径（需指定 path） |
animation: { pathType: "circle", duration: 1500 }
animation: { pathType: "customPath", path: "M 0 0 L 100 0 L 100 100 L 0 100 Z", duration: 1200 }
动画选项
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
type | AnimationType | "appear" | 动画预设类型 |
class | "entr" | "exit" | "emph" | "entr" | 动画类别 |
duration | number | 500 | 持续时间（毫秒） |
delay | number | 0 | 开始前延迟（毫秒） |
trigger | AnimationTrigger | "onClick" | 触发方式 |
direction | AnimationDirection | — | 动画方向 |
emphasisType | EmphasisType | — | 强调动画类型（class="emph"） |
pathType | PathAnimationType | — | 运动路径类型 |
path | string | — | 自定义 SVG 路径字符串 |
speed | number | — | 速度倍率 |
repeatCount | number | — | 重复次数 |
autoReverse | boolean | false | 完成后自动反转 |
color | string | — | colorChange 的目标颜色 |
触发模式
// 点击触发（默认）
animation: { type: "fade", trigger: "onClick" }
// 与上一个动画同时触发
animation: { type: "fade", trigger: "withPrevious" }
// 在上一个动画完成后触发
animation: { type: "fade", trigger: "afterPrevious" }