切换效果 - Office Open

使用幻灯片选项中的 transition 属性在切换幻灯片时添加动画效果。

#基本切换

JSON

{
  "slides": [
    {
      "children": [],
      "transition": {
        "type": "fade",
        "speed": "medium"
      }
    }
  ]
}

TypeScript

import { generatePresentation } from "@office-open/pptx";

generatePresentation({
  slides: [
    {
      children: [],
      transition: { type: "fade", speed: "medium" },
    },
  ],
});

#幻灯片放映设置

使用 show 选项控制演示文稿播放行为：

JSON

{
  "show": {
    "loop": true,
    "useTimings": true
  },
  "slides": [
    {
      "children": [
        {
          "shape": {
            "x": "0.0cm",
            "y": "0.0cm",
            "width": "5.3cm",
            "height": "2.6cm",
            "textBody": {
              "text": "幻灯片 1"
            }
          }
        }
      ]
    }
  ]
}

TypeScript

import { generatePresentation } from "@office-open/pptx";

generatePresentation({
  show: {
    loop: true,
    useTimings: true,
  },
  slides: [
    {
      children: [
        {
          shape: {
            x: "0.0cm",
            y: "0.0cm",
            width: "5.3cm",
            height: "2.6cm",
            textBody: { text: "幻灯片 1" },
          },
        },
      ],
    },
  ],
});

#放映选项

属性	类型	说明
`loop`	`boolean`	循环放映
`type`	`"present" \| "browse" \| "kiosk"`	放映类型（演讲/浏览/展台）
`showScrollbar`	`boolean`	显示滚动条（浏览模式）
`restart`	`number`	重启策略
`showNarration`	`boolean`	放映时播放旁白
`showAnimation`	`boolean`	放映时显示动画
`useTimings`	`boolean`	使用录制的排练时间
`slideRange`	`{ start: number; end: number }`	限定放映的幻灯片范围
`penColor`	`string`	演示笔颜色（srgbClr hex）

#切换类型

#淡入

json

{
  "transition": { "type": "fade" }
}

#推入

json

{
  "transition": {
    "type": "push",
    "direction": "right"
  }
}

#擦除

json

{
  "transition": {
    "type": "wipe",
    "direction": "down"
  }
}

#覆盖

json

{
  "transition": {
    "type": "cover",
    "direction": "right"
  }
}

#拆分

json

{
  "transition": {
    "type": "split",
    "orient": "horz",
    "direction": "out"
  }
}

#轮辐

json

{
  "transition": {
    "type": "wheel",
    "spokes": 4
  }
}

#溶解

json

{
  "transition": {
    "type": "dissolve",
    "speed": "slow"
  }
}

#随机

json

{
  "transition": { "type": "random" }
}

#切换选项

属性	类型	说明
`type`	`TransitionType`	切换类型
`speed`	`"slow" \| "medium" \| "fast"`	切换速度
`direction`	`string`	方向（取决于类型）
`orient`	`"horz" \| "vert"`	方向（拆分/百叶窗/棋盘等）
`spokes`	`number`	轮辐数量（轮辐切换）
`advanceOnClick`	`boolean`	单击鼠标时切换
`advanceAfterTime`	`number`	自动切换间隔（毫秒）
`thruBlk`	`boolean`	黑场过渡（淡入/剪切）
`startSound`	`{ rId; name?; loop? }`	切换开始时播放的声音
`stopPreviousSound`	`boolean`	停止之前播放的声音

#可用类型

#完整示例

JSON

{
  "slides": [
    {
      "children": [
        {
          "shape": {
            "x": "2.6cm",
            "y": "4.0cm",
            "width": "13.2cm",
            "height": "2.6cm",
            "textBody": {
              "text": "Welcome"
            },
            "properties": {
              "fill": "4472C4"
            }
          }
        }
      ],
      "transition": {
        "type": "fade",
        "speed": "medium"
      }
    },
    {
      "children": [
        {
          "shape": {
            "x": "2.6cm",
            "y": "4.0cm",
            "width": "13.2cm",
            "height": "2.6cm",
            "textBody": {
              "text": "Content Slide"
            },
            "properties": {
              "fill": "ED7D31"
            }
          }
        }
      ],
      "transition": {
        "type": "push",
        "direction": "right",
        "speed": "slow"
      }
    },
    {
      "children": [
        {
          "shape": {
            "x": "2.6cm",
            "y": "4.0cm",
            "width": "13.2cm",
            "height": "2.6cm",
            "textBody": {
              "text": "Thank You"
            },
            "properties": {
              "fill": "70AD47"
            }
          }
        }
      ],
      "transition": {
        "type": "wipe",
        "direction": "down"
      }
    }
  ]
}

TypeScript

import { generatePresentation } from "@office-open/pptx";

generatePresentation({
  slides: [
    {
      children: [
        {
          shape: {
            x: "2.6cm",
            y: "4.0cm",
            width: "13.2cm",
            height: "2.6cm",
            textBody: { text: "Welcome" },
            properties: {
              fill: "4472C4",
            },
          },
        },
      ],
      transition: { type: "fade", speed: "medium" },
    },
    {
      children: [
        {
          shape: {
            x: "2.6cm",
            y: "4.0cm",
            width: "13.2cm",
            height: "2.6cm",
            textBody: { text: "Content Slide" },
            properties: {
              fill: "ED7D31",
            },
          },
        },
      ],
      transition: { type: "push", direction: "right", speed: "slow" },
    },
    {
      children: [
        {
          shape: {
            x: "2.6cm",
            y: "4.0cm",
            width: "13.2cm",
            height: "2.6cm",
            textBody: { text: "Thank You" },
            properties: {
              fill: "70AD47",
            },
          },
        },
      ],
      transition: { type: "wipe", direction: "down" },
    },
  ],
});