|
|
@@ -0,0 +1,677 @@
|
|
|
+/**
|
|
|
+ * PPTX / WPS 动画播放引擎
|
|
|
+ *
|
|
|
+ * 背景：
|
|
|
+ * PPTist 原生只支持 animate.css 的固定类名（fadeIn / slideIn 等），
|
|
|
+ * 而 PowerPoint / WPS 的动画体系是「预设 + 参数」：
|
|
|
+ * - 几何擦除类：wipe / blinds / checkerboard / wheel / wedge / box / circle / diamond / plus
|
|
|
+ * - 位移类：floats / rise / fly / credits（由 ppt_x / ppt_y 的位移轨迹决定）
|
|
|
+ * - 组合类：fade + scale = 缩放进入；fade + rotate = 生长旋转
|
|
|
+ * - 属性类：透明度 / 颜色 / 字号 / 加粗
|
|
|
+ * - 动作路径：animMotion 的 SVG path
|
|
|
+ * - 文字构建：按段落 / 按字词 / 按字母逐级播放
|
|
|
+ *
|
|
|
+ * 本引擎用 Web Animations API + 遮罩（mask / clip-path）精确还原这些效果，
|
|
|
+ * 不依赖 animate.css，避免「所有动画都变成淡入」。
|
|
|
+ */
|
|
|
+
|
|
|
+export interface PptxMotion {
|
|
|
+ dx: number
|
|
|
+ dy: number
|
|
|
+}
|
|
|
+
|
|
|
+export interface PptxAnimationRecord {
|
|
|
+ effectName?: string | null
|
|
|
+ direction?: string | null
|
|
|
+ motion?: PptxMotion | null
|
|
|
+ path?: string | null
|
|
|
+ build?: string
|
|
|
+ pRg?: { st: number, end: number } | null
|
|
|
+ properties?: Record<string, any>
|
|
|
+ filter?: string | null
|
|
|
+ type: 'in' | 'out' | 'attention'
|
|
|
+ duration: number
|
|
|
+ delay?: number
|
|
|
+}
|
|
|
+
|
|
|
+interface PlayContext {
|
|
|
+ slideW: number
|
|
|
+ slideH: number
|
|
|
+}
|
|
|
+
|
|
|
+/* =========================================================================
|
|
|
+ * 基础工具
|
|
|
+ * ========================================================================= */
|
|
|
+
|
|
|
+const wait = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms))
|
|
|
+
|
|
|
+/**
|
|
|
+ * 执行一段 WAAPI 动画并等待结束。
|
|
|
+ * 被取消（元素卸载 / 新动画打断）时也安全 resolve，避免流程卡死。
|
|
|
+ */
|
|
|
+function run(node: HTMLElement, keyframes: Keyframe[], options: KeyframeAnimationOptions): Promise<void> {
|
|
|
+ let animation: Animation
|
|
|
+ try {
|
|
|
+ animation = node.animate(keyframes, options)
|
|
|
+ }
|
|
|
+ catch {
|
|
|
+ return Promise.resolve()
|
|
|
+ }
|
|
|
+ return animation.finished
|
|
|
+ .then(() => { /* noop */ })
|
|
|
+ .catch(() => { /* 取消时忽略 */ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 统一的 fill 策略：退场保留终态，入场/强调结束回到常态 */
|
|
|
+function fillOf(type: 'in' | 'out' | 'attention'): FillMode {
|
|
|
+ if (type === 'out') return 'forwards'
|
|
|
+ return 'none'
|
|
|
+}
|
|
|
+
|
|
|
+/* =========================================================================
|
|
|
+ * 文字构建（按段落 / 按字词 / 按字母）
|
|
|
+ * ========================================================================= */
|
|
|
+
|
|
|
+const UNIT_ATTR = 'data-wb-anim-unit'
|
|
|
+
|
|
|
+/** 把文本节点按词/字拆成带标记的 span（只拆一次） */
|
|
|
+function wrapTextUnits(root: HTMLElement, mode: 'word' | 'char') {
|
|
|
+ if (root.querySelector(`[${UNIT_ATTR}]`)) return
|
|
|
+
|
|
|
+ const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
|
|
|
+ acceptNode(node) {
|
|
|
+ if (!node.nodeValue || !node.nodeValue.trim()) return NodeFilter.FILTER_REJECT
|
|
|
+ return NodeFilter.FILTER_ACCEPT
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ const textNodes: Text[] = []
|
|
|
+ let current = walker.nextNode()
|
|
|
+ while (current) {
|
|
|
+ textNodes.push(current as Text)
|
|
|
+ current = walker.nextNode()
|
|
|
+ }
|
|
|
+
|
|
|
+ for (const textNode of textNodes) {
|
|
|
+ const text = textNode.nodeValue || ''
|
|
|
+ const parts = mode === 'char'
|
|
|
+ ? Array.from(text)
|
|
|
+ : text.split(/(\s+)/).filter(part => part !== '')
|
|
|
+
|
|
|
+ const fragment = document.createDocumentFragment()
|
|
|
+ for (const part of parts) {
|
|
|
+ if (!part.trim()) {
|
|
|
+ fragment.appendChild(document.createTextNode(part))
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ const span = document.createElement('span')
|
|
|
+ span.setAttribute(UNIT_ATTR, '1')
|
|
|
+ span.textContent = part
|
|
|
+ fragment.appendChild(span)
|
|
|
+ }
|
|
|
+ textNode.parentNode?.replaceChild(fragment, textNode)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 解析动画的实际作用目标：
|
|
|
+ * - 整元素
|
|
|
+ * - 按段落：逐个 p / li
|
|
|
+ * - 按字词/字母：拆 span 后逐个
|
|
|
+ * pRg（段落区间）用于只播放指定段落。
|
|
|
+ */
|
|
|
+function resolveTargets(el: HTMLElement, anim: PptxAnimationRecord): HTMLElement[] {
|
|
|
+ const build = anim.build || 'all'
|
|
|
+ if (build === 'all' || build === 'whole') return [el]
|
|
|
+
|
|
|
+ const root = el.querySelector('.ProseMirror-static') as HTMLElement | null
|
|
|
+ if (!root) return [el]
|
|
|
+
|
|
|
+ let nodes: HTMLElement[] = []
|
|
|
+
|
|
|
+ if (build === 'p' || build === 'para' || build === 'paragraph') {
|
|
|
+ nodes = Array.from(root.querySelectorAll('p, li')) as HTMLElement[]
|
|
|
+ if (!nodes.length) nodes = [root]
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ const mode = (build === 'c' || build === 'char' || build === 'letter') ? 'char' : 'word'
|
|
|
+ wrapTextUnits(root, mode)
|
|
|
+ nodes = Array.from(root.querySelectorAll(`[${UNIT_ATTR}]`)) as HTMLElement[]
|
|
|
+ if (!nodes.length) nodes = [root]
|
|
|
+ }
|
|
|
+
|
|
|
+ if (anim.pRg && typeof anim.pRg.st === 'number') {
|
|
|
+ const sliced = nodes.slice(anim.pRg.st, anim.pRg.end + 1)
|
|
|
+ if (sliced.length) nodes = sliced
|
|
|
+ }
|
|
|
+
|
|
|
+ return nodes.length ? nodes : [el]
|
|
|
+}
|
|
|
+
|
|
|
+/* =========================================================================
|
|
|
+ * 几何遮罩类动画
|
|
|
+ * ========================================================================= */
|
|
|
+
|
|
|
+/** 擦除：从某个方向推出 */
|
|
|
+function wipeKeyframes(type: 'in' | 'out', direction: string | null): Keyframe[] {
|
|
|
+ const hidden: Record<string, string> = {
|
|
|
+ left: 'inset(0% 100% 0% 0%)',
|
|
|
+ right: 'inset(0% 0% 0% 100%)',
|
|
|
+ top: 'inset(0% 0% 100% 0%)',
|
|
|
+ bottom: 'inset(100% 0% 0% 0%)',
|
|
|
+ }
|
|
|
+ const full = 'inset(0% 0% 0% 0%)'
|
|
|
+ const start = hidden[direction || 'left'] || hidden.left
|
|
|
+ // 入场：从遮挡 -> 全显；退场：全显 -> 遮挡
|
|
|
+ return type === 'in'
|
|
|
+ ? [{ clipPath: start }, { clipPath: full }]
|
|
|
+ : [{ clipPath: full }, { clipPath: start }]
|
|
|
+}
|
|
|
+
|
|
|
+/** 百叶窗 / 条纹：用重复线性渐变做遮罩，遮罩尺寸从 0 长到满 */
|
|
|
+function blindsKeyframes(type: 'in' | 'out', direction: string | null, stripe = 12): Keyframe[] {
|
|
|
+ const vertical = direction === 'vertical'
|
|
|
+ // 竖百叶（竖直条纹）用 to right；横百叶用 to bottom
|
|
|
+ const gradient = vertical
|
|
|
+ ? `repeating-linear-gradient(to right, #000 0, #000 ${stripe}%, transparent ${stripe}%, transparent ${stripe * 2}%)`
|
|
|
+ : `repeating-linear-gradient(to bottom, #000 0, #000 ${stripe}%, transparent ${stripe}%, transparent ${stripe * 2}%)`
|
|
|
+ const empty = vertical ? '0% 100%' : '100% 0%'
|
|
|
+ const full = '100% 100%'
|
|
|
+ const base = { maskImage: gradient, WebkitMaskImage: gradient, maskRepeat: 'no-repeat', WebkitMaskRepeat: 'no-repeat' }
|
|
|
+ return type === 'in'
|
|
|
+ ? [
|
|
|
+ { ...base, maskSize: empty, WebkitMaskSize: empty } as Keyframe,
|
|
|
+ { ...base, maskSize: full, WebkitMaskSize: full } as Keyframe,
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ { ...base, maskSize: full, WebkitMaskSize: full } as Keyframe,
|
|
|
+ { ...base, maskSize: empty, WebkitMaskSize: empty } as Keyframe,
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+/** 棋盘：逐格显现 */
|
|
|
+function checkerboardKeyframes(type: 'in' | 'out'): Keyframe[] {
|
|
|
+ const gradient = 'repeating-conic-gradient(#000 0% 25%, transparent 0% 50%)'
|
|
|
+ const base = { maskImage: gradient, WebkitMaskImage: gradient, maskRepeat: 'no-repeat', WebkitMaskRepeat: 'no-repeat' }
|
|
|
+ const small = '6% 6%'
|
|
|
+ const full = '100% 100%'
|
|
|
+ return type === 'in'
|
|
|
+ ? [
|
|
|
+ { ...base, maskSize: small, WebkitMaskSize: small } as Keyframe,
|
|
|
+ { ...base, maskSize: full, WebkitMaskSize: full } as Keyframe,
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ { ...base, maskSize: full, WebkitMaskSize: full } as Keyframe,
|
|
|
+ { ...base, maskSize: small, WebkitMaskSize: small } as Keyframe,
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+/** 圆形 / 菱形 / 十字 / 楔形：用 clip-path 从中心扩张 */
|
|
|
+function shapeKeyframes(shape: string, type: 'in' | 'out'): Keyframe[] {
|
|
|
+ const startByShape: Record<string, string> = {
|
|
|
+ circle: 'circle(0% at 50% 50%)',
|
|
|
+ iris: 'circle(0% at 50% 50%)',
|
|
|
+ diamond: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',
|
|
|
+ plus: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',
|
|
|
+ wedge: 'polygon(50% 50%, 50% 50%, 50% 50%)',
|
|
|
+ box: 'inset(48% 48% 48% 48%)',
|
|
|
+ barn: 'inset(0% 50% 0% 50%)',
|
|
|
+ }
|
|
|
+ const endByShape: Record<string, string> = {
|
|
|
+ circle: 'circle(75% at 50% 50%)',
|
|
|
+ iris: 'circle(75% at 50% 50%)',
|
|
|
+ diamond: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
|
|
|
+ plus: 'polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%)',
|
|
|
+ wedge: 'polygon(50% 0%, 100% 100%, 0% 100%)',
|
|
|
+ box: 'inset(0% 0% 0% 0%)',
|
|
|
+ barn: 'inset(0% 0% 0% 0%)',
|
|
|
+ }
|
|
|
+ const start = startByShape[shape] || startByShape.circle
|
|
|
+ const end = endByShape[shape] || endByShape.circle
|
|
|
+ return type === 'in'
|
|
|
+ ? [{ clipPath: start }, { clipPath: end }]
|
|
|
+ : [{ clipPath: end }, { clipPath: start }]
|
|
|
+}
|
|
|
+
|
|
|
+/** 轮子：用扇形逐步扫过（8 个关键帧近似） */
|
|
|
+function wheelKeyframes(type: 'in' | 'out'): Keyframe[] {
|
|
|
+ const sector = (angle: number) => {
|
|
|
+ if (angle >= 360) return 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)'
|
|
|
+ const rad = (angle - 90) * Math.PI / 180
|
|
|
+ const points = ['50% 50%']
|
|
|
+ const cx = 50, cy = 50
|
|
|
+ const r = 80
|
|
|
+ points.push(`${cx + r * Math.cos(-Math.PI / 2)},${cy + r * Math.sin(-Math.PI / 2)}`)
|
|
|
+ points.push(`${cx + r * Math.cos(rad)},${cy + r * Math.sin(rad)}`)
|
|
|
+ return `polygon(${points.join(', ')})`
|
|
|
+ }
|
|
|
+ const steps = [0, 45, 90, 135, 180, 225, 270, 315, 360]
|
|
|
+ const frames = steps.map(step => ({ clipPath: sector(step), easing: 'linear' }))
|
|
|
+ return type === 'in' ? frames : [...frames].reverse()
|
|
|
+}
|
|
|
+
|
|
|
+/* =========================================================================
|
|
|
+ * 位移 / 缩放 / 旋转类动画
|
|
|
+ * ========================================================================= */
|
|
|
+
|
|
|
+function px(value: number) {
|
|
|
+ return `${value}px`
|
|
|
+}
|
|
|
+
|
|
|
+/** 淡入淡出 + 位移（浮入 / 升起 / 字幕 / 飞入的近似） */
|
|
|
+function fadeWithMotion(type: 'in' | 'out', motion: PptxMotion | null | undefined, ctx: PlayContext): Keyframe[] {
|
|
|
+ const dx = motion ? motion.dx * ctx.slideW : 0
|
|
|
+ const dy = motion ? motion.dy * ctx.slideH : 0
|
|
|
+ const opacityFrom = type === 'in' ? 0 : 1
|
|
|
+ const opacityTo = type === 'in' ? 1 : 0
|
|
|
+ const transformNone = 'translate(0px, 0px)'
|
|
|
+ const transformOffset = `translate(${px(dx)}, ${px(dy)})`
|
|
|
+ return type === 'in'
|
|
|
+ ? [{ opacity: opacityFrom, transform: transformOffset }, { opacity: opacityTo, transform: transformNone }]
|
|
|
+ : [{ opacity: opacityFrom, transform: transformNone }, { opacity: opacityTo, transform: transformOffset }]
|
|
|
+}
|
|
|
+
|
|
|
+/** 飞入：从画布边缘滑入（无淡入） */
|
|
|
+function flyKeyframes(type: 'in' | 'out', direction: string | null, ctx: PlayContext): Keyframe[] {
|
|
|
+ const map: Record<string, string> = {
|
|
|
+ left: `translate(${px(-ctx.slideW)}, 0px)`,
|
|
|
+ right: `translate(${px(ctx.slideW)}, 0px)`,
|
|
|
+ top: `translate(0px, ${px(-ctx.slideH)})`,
|
|
|
+ bottom: `translate(0px, ${px(ctx.slideH)})`,
|
|
|
+ }
|
|
|
+ const offset = map[direction || 'left'] || map.left
|
|
|
+ const none = 'translate(0px, 0px)'
|
|
|
+ return type === 'in'
|
|
|
+ ? [{ transform: offset }, { transform: none }]
|
|
|
+ : [{ transform: none }, { transform: offset }]
|
|
|
+}
|
|
|
+
|
|
|
+/** 窥视：从元素自身边缘滑入（无淡入） */
|
|
|
+function peekKeyframes(type: 'in' | 'out', direction: string | null): Keyframe[] {
|
|
|
+ const map: Record<string, string> = {
|
|
|
+ left: 'translate(-100%, 0%)',
|
|
|
+ right: 'translate(100%, 0%)',
|
|
|
+ top: 'translate(0%, -100%)',
|
|
|
+ bottom: 'translate(0%, 100%)',
|
|
|
+ }
|
|
|
+ const offset = map[direction || 'left'] || map.left
|
|
|
+ const none = 'translate(0%, 0%)'
|
|
|
+ return type === 'in'
|
|
|
+ ? [{ transform: offset }, { transform: none }]
|
|
|
+ : [{ transform: none }, { transform: offset }]
|
|
|
+}
|
|
|
+
|
|
|
+/** 缩放 / 生长旋转 / 翻转 / 旋转木马 / 展开折叠 / 拉伸 */
|
|
|
+function transformEntrance(type: 'in' | 'out', opts: {
|
|
|
+ fromScale?: number
|
|
|
+ toScale?: number
|
|
|
+ fromRotate?: number
|
|
|
+ axis?: 'x' | 'y' | null
|
|
|
+ stretch?: 'x' | 'y' | null
|
|
|
+}): Keyframe[] {
|
|
|
+ const fromScale = opts.fromScale === undefined ? 0 : opts.fromScale
|
|
|
+ const toScale = opts.toScale === undefined ? 1 : opts.toScale
|
|
|
+ const fromRotate = opts.fromRotate || 0
|
|
|
+
|
|
|
+ let from = `scale(${fromScale})`
|
|
|
+ let to = `scale(${toScale})`
|
|
|
+
|
|
|
+ if (opts.axis === 'y') {
|
|
|
+ from = `perspective(800px) rotateY(${type === 'in' ? -90 : 90}deg)`
|
|
|
+ to = 'perspective(800px) rotateY(0deg)'
|
|
|
+ }
|
|
|
+ else if (opts.axis === 'x') {
|
|
|
+ from = `perspective(800px) rotateX(${type === 'in' ? 90 : -90}deg)`
|
|
|
+ to = 'perspective(800px) rotateX(0deg)'
|
|
|
+ }
|
|
|
+ else if (opts.stretch === 'x') {
|
|
|
+ from = 'scaleX(0)'
|
|
|
+ to = 'scaleX(1)'
|
|
|
+ }
|
|
|
+ else if (opts.stretch === 'y') {
|
|
|
+ from = 'scaleY(0)'
|
|
|
+ to = 'scaleY(1)'
|
|
|
+ }
|
|
|
+ else if (fromRotate) {
|
|
|
+ from = `scale(${fromScale}) rotate(${fromRotate}deg)`
|
|
|
+ to = `scale(${toScale}) rotate(0deg)`
|
|
|
+ }
|
|
|
+
|
|
|
+ return type === 'in' ? [{ transform: from }, { transform: to }] : [{ transform: to }, { transform: from }]
|
|
|
+}
|
|
|
+
|
|
|
+/** 弹跳进入 */
|
|
|
+function bounceKeyframes(type: 'in' | 'out'): Keyframe[] {
|
|
|
+ const frames: Keyframe[] = [
|
|
|
+ { transform: 'scale(0.3)', opacity: 0, offset: 0 },
|
|
|
+ { transform: 'scale(1.05)', opacity: 1, offset: 0.6 },
|
|
|
+ { transform: 'scale(0.95)', opacity: 1, offset: 0.8 },
|
|
|
+ { transform: 'scale(1)', opacity: 1, offset: 1 },
|
|
|
+ ]
|
|
|
+ return type === 'in' ? frames : [...frames].reverse()
|
|
|
+}
|
|
|
+
|
|
|
+/** 光速 / 翻滚 / 螺旋 */
|
|
|
+function fancyEntrance(type: 'in' | 'out', kind: 'lightSpeed' | 'roll' | 'spiral'): Keyframe[] {
|
|
|
+ let from = 'translateX(-100%) skewX(-30deg)'
|
|
|
+ let to = 'translateX(0%) skewX(0deg)'
|
|
|
+ if (kind === 'roll') {
|
|
|
+ from = 'translateX(-100%) rotate(-120deg)'
|
|
|
+ to = 'translateX(0%) rotate(0deg)'
|
|
|
+ }
|
|
|
+ if (kind === 'spiral') {
|
|
|
+ from = 'rotate(-540deg) scale(0.1)'
|
|
|
+ to = 'rotate(0deg) scale(1)'
|
|
|
+ }
|
|
|
+ return type === 'in'
|
|
|
+ ? [{ transform: from, opacity: 0 }, { transform: to, opacity: 1 }]
|
|
|
+ : [{ transform: to, opacity: 1 }, { transform: from, opacity: 0 }]
|
|
|
+}
|
|
|
+
|
|
|
+/* =========================================================================
|
|
|
+ * 动作路径
|
|
|
+ * ========================================================================= */
|
|
|
+
|
|
|
+/** 把 PowerPoint 的 M/L/C 路径（M 0 0 L .2 0 E）采样成位移关键帧 */
|
|
|
+function pathKeyframes(path: string, type: 'in' | 'out', ctx: PlayContext): Keyframe[] {
|
|
|
+ const tokens = path.replace(/([MLCQZmlcqzEe])/g, ' $1 ').trim().split(/\s+/)
|
|
|
+ const points: { x: number, y: number }[] = []
|
|
|
+ let i = 0
|
|
|
+ let current = { x: 0, y: 0 }
|
|
|
+
|
|
|
+ while (i < tokens.length) {
|
|
|
+ const cmd = tokens[i]
|
|
|
+ if (cmd === 'M' || cmd === 'L' || cmd === 'm' || cmd === 'l') {
|
|
|
+ const x = parseFloat(tokens[i + 1])
|
|
|
+ const y = parseFloat(tokens[i + 2])
|
|
|
+ if (!isNaN(x) && !isNaN(y)) {
|
|
|
+ current = { x, y }
|
|
|
+ points.push({ ...current })
|
|
|
+ }
|
|
|
+ i += 3
|
|
|
+ }
|
|
|
+ else if (cmd === 'C' || cmd === 'c') {
|
|
|
+ // 三次贝塞尔：取终点做线性近似（足够还原路径走向）
|
|
|
+ const x = parseFloat(tokens[i + 5])
|
|
|
+ const y = parseFloat(tokens[i + 6])
|
|
|
+ if (!isNaN(x) && !isNaN(y)) {
|
|
|
+ current = { x, y }
|
|
|
+ points.push({ ...current })
|
|
|
+ }
|
|
|
+ i += 7
|
|
|
+ }
|
|
|
+ else if (cmd === 'E' || cmd === 'e' || cmd === 'Z' || cmd === 'z') {
|
|
|
+ break
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ i += 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!points.length) return []
|
|
|
+ const frames = points.map((p, index) => ({
|
|
|
+ transform: `translate(${px(p.x * ctx.slideW)}, ${px(p.y * ctx.slideH)})`,
|
|
|
+ offset: points.length === 1 ? 1 : index / (points.length - 1),
|
|
|
+ easing: 'linear',
|
|
|
+ }))
|
|
|
+ const withEnd = [{ transform: 'translate(0px, 0px)', offset: 0, easing: 'linear' }, ...frames]
|
|
|
+ return type === 'in' ? withEnd : withEnd
|
|
|
+}
|
|
|
+
|
|
|
+/* =========================================================================
|
|
|
+ * 强调类动画
|
|
|
+ * ========================================================================= */
|
|
|
+
|
|
|
+function emphasisKeyframes(name: string, anim: PptxAnimationRecord): Keyframe[] {
|
|
|
+ const props = anim.properties || {}
|
|
|
+ switch (name) {
|
|
|
+ case 'pulse':
|
|
|
+ return [{ transform: 'scale(1)' }, { transform: 'scale(1.12)' }, { transform: 'scale(1)' }]
|
|
|
+ case 'spin': {
|
|
|
+ const by = props.by !== undefined && props.by !== null ? props.by : 360
|
|
|
+ const deg = by > 1000 ? by / 60000 : by
|
|
|
+ return [{ transform: 'rotate(0deg)' }, { transform: `rotate(${deg}deg)` }]
|
|
|
+ }
|
|
|
+ case 'growshrink': {
|
|
|
+ const to = props.to !== undefined && props.to !== null ? props.to : 1.5
|
|
|
+ const scale = to > 10 ? to / 100000 : to
|
|
|
+ if (props.loopBack !== false) {
|
|
|
+ return [{ transform: 'scale(1)' }, { transform: `scale(${scale})` }, { transform: 'scale(1)' }]
|
|
|
+ }
|
|
|
+ return [{ transform: 'scale(1)' }, { transform: `scale(${scale})` }]
|
|
|
+ }
|
|
|
+ case 'transparency': {
|
|
|
+ const from = props.from !== undefined ? props.from : 1
|
|
|
+ const to = props.to !== undefined ? props.to : 0.5
|
|
|
+ return [{ opacity: String(from) }, { opacity: String(to) }]
|
|
|
+ }
|
|
|
+ case 'bold':
|
|
|
+ return [{ fontWeight: '400' }, { fontWeight: '700' }]
|
|
|
+ case 'fontsize': {
|
|
|
+ const to = props.to !== undefined ? props.to : 48
|
|
|
+ return [{ fontSize: '1em' }, { fontSize: `${to / 100}em` }]
|
|
|
+ }
|
|
|
+ case 'flash':
|
|
|
+ return [
|
|
|
+ { opacity: 1, offset: 0 },
|
|
|
+ { opacity: 0, offset: 0.25 },
|
|
|
+ { opacity: 1, offset: 0.5 },
|
|
|
+ { opacity: 0, offset: 0.75 },
|
|
|
+ { opacity: 1, offset: 1 },
|
|
|
+ ]
|
|
|
+ case 'wave':
|
|
|
+ return [
|
|
|
+ { transform: 'rotate(0deg)', offset: 0 },
|
|
|
+ { transform: 'rotate(8deg)', offset: 0.2 },
|
|
|
+ { transform: 'rotate(-8deg)', offset: 0.4 },
|
|
|
+ { transform: 'rotate(8deg)', offset: 0.6 },
|
|
|
+ { transform: 'rotate(-8deg)', offset: 0.8 },
|
|
|
+ { transform: 'rotate(0deg)', offset: 1 },
|
|
|
+ ]
|
|
|
+ case 'teeter':
|
|
|
+ return [
|
|
|
+ { transform: 'rotate(0deg)', offset: 0 },
|
|
|
+ { transform: 'rotate(-12deg)', offset: 0.2 },
|
|
|
+ { transform: 'rotate(10deg)', offset: 0.4 },
|
|
|
+ { transform: 'rotate(-6deg)', offset: 0.6 },
|
|
|
+ { transform: 'rotate(4deg)', offset: 0.8 },
|
|
|
+ { transform: 'rotate(0deg)', offset: 1 },
|
|
|
+ ]
|
|
|
+ case 'shake':
|
|
|
+ return [
|
|
|
+ { transform: 'translateX(0)', offset: 0 },
|
|
|
+ { transform: 'translateX(-8%)', offset: 0.2 },
|
|
|
+ { transform: 'translateX(8%)', offset: 0.4 },
|
|
|
+ { transform: 'translateX(-6%)', offset: 0.6 },
|
|
|
+ { transform: 'translateX(6%)', offset: 0.8 },
|
|
|
+ { transform: 'translateX(0)', offset: 1 },
|
|
|
+ ]
|
|
|
+ default:
|
|
|
+ return [{ opacity: 1 }, { opacity: 1 }]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* =========================================================================
|
|
|
+ * 主入口
|
|
|
+ * ========================================================================= */
|
|
|
+
|
|
|
+/**
|
|
|
+ * 播放单个目标的动画
|
|
|
+ */
|
|
|
+async function playOne(node: HTMLElement, anim: PptxAnimationRecord, ctx: PlayContext, duration: number, delay: number): Promise<void> {
|
|
|
+ const name = (anim.effectName || 'fade').toLowerCase()
|
|
|
+ const type = anim.type
|
|
|
+ const props = anim.properties || {}
|
|
|
+ const direction = anim.direction || null
|
|
|
+ const options: KeyframeAnimationOptions = {
|
|
|
+ duration: Math.max(duration, 1),
|
|
|
+ delay,
|
|
|
+ fill: fillOf(type),
|
|
|
+ easing: 'ease',
|
|
|
+ }
|
|
|
+
|
|
|
+ // 动作路径（可能出现在任意类型中，必须优先于强调分支处理）
|
|
|
+ if (name === 'motion') {
|
|
|
+ const frames = anim.path ? pathKeyframes(anim.path, type, ctx) : []
|
|
|
+ if (frames.length) {
|
|
|
+ await run(node, frames, { ...options, easing: 'linear', fill: type === 'out' ? 'forwards' : 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ await run(node, fadeWithMotion(type, anim.motion, ctx), options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 出现 / 消失：瞬时切换可见性（用 1ms 动画，便于取消时自动还原）
|
|
|
+ if (name === 'appear' || name === 'disappear') {
|
|
|
+ const toOpacity = name === 'appear' ? 1 : 0
|
|
|
+ await run(node, [{ opacity: String(1 - toOpacity) }, { opacity: String(toOpacity) }], {
|
|
|
+ duration: 1,
|
|
|
+ delay,
|
|
|
+ fill: 'forwards',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 强调类
|
|
|
+ if (type === 'attention') {
|
|
|
+ if (name === 'colorchange') {
|
|
|
+ const fromColor = getComputedStyle(node).color
|
|
|
+ const toColor = props.clrTo || props.to || fromColor
|
|
|
+ await run(node, [{ color: fromColor }, { color: toColor }], { ...options, fill: 'forwards' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ await run(node, emphasisKeyframes(name, anim), options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 几何擦除类
|
|
|
+ if (name === 'wipe') {
|
|
|
+ await run(node, wipeKeyframes(type, direction), { ...options, easing: 'linear' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'blinds') {
|
|
|
+ await run(node, blindsKeyframes(type, direction), { ...options, easing: 'ease-in' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'randbars' || name === 'strips') {
|
|
|
+ await run(node, blindsKeyframes(type, direction, 7), { ...options, easing: 'ease-in' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'checkerboard') {
|
|
|
+ await run(node, checkerboardKeyframes(type), { ...options, easing: 'ease-in' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (['circle', 'iris', 'diamond', 'plus', 'wedge', 'box', 'barn'].includes(name)) {
|
|
|
+ await run(node, shapeKeyframes(name, type), { ...options, easing: 'ease-out' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'wheel') {
|
|
|
+ await run(node, wheelKeyframes(type), { ...options, easing: 'linear' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'dissolve') {
|
|
|
+ await run(node, type === 'in'
|
|
|
+ ? [{ opacity: 0, filter: 'blur(2px)' }, { opacity: 1, filter: 'blur(0px)' }]
|
|
|
+ : [{ opacity: 1, filter: 'blur(0px)' }, { opacity: 0, filter: 'blur(2px)' }], options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 位移类
|
|
|
+ if (name === 'fly') {
|
|
|
+ await run(node, flyKeyframes(type, direction, ctx), { ...options, easing: 'ease-out' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'peek') {
|
|
|
+ await run(node, peekKeyframes(type, direction), { ...options, easing: 'ease-out' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'bounce') {
|
|
|
+ await run(node, bounceKeyframes(type), options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'lightspeed' || name === 'roll' || name === 'spiral') {
|
|
|
+ await run(node, fancyEntrance(type, name as any), options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 缩放 / 旋转 / 翻转 / 拉伸 / 组合淡入
|
|
|
+ const hasScale = props.scaleFrom !== undefined || props.scaleTo !== undefined
|
|
|
+ const hasRotate = props.rotateFrom !== undefined
|
|
|
+ if (name === 'zoom' || (name === 'fade' && (hasScale || hasRotate))) {
|
|
|
+ const frames = transformEntrance(type, {
|
|
|
+ fromScale: hasScale ? props.scaleFrom : 0.4,
|
|
|
+ toScale: hasScale ? props.scaleTo : 1,
|
|
|
+ fromRotate: hasRotate ? props.rotateFrom : 0,
|
|
|
+ })
|
|
|
+ if (hasRotate && !hasScale) {
|
|
|
+ const rotateFrames = transformEntrance(type, { fromScale: 1, toScale: 1, fromRotate: props.rotateFrom })
|
|
|
+ await run(node, type === 'in'
|
|
|
+ ? [{ opacity: 0, ...rotateFrames[0] }, { opacity: 1, ...rotateFrames[1] }]
|
|
|
+ : [{ opacity: 1, ...rotateFrames[0] }, { opacity: 0, ...rotateFrames[1] }], options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ await run(node, type === 'in'
|
|
|
+ ? [{ opacity: 0, ...frames[0] }, { opacity: 1, ...frames[1] }]
|
|
|
+ : [{ opacity: 1, ...frames[0] }, { opacity: 0, ...frames[1] }], options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'swivel') {
|
|
|
+ await run(node, [
|
|
|
+ { opacity: 0, transform: 'perspective(800px) rotateY(-90deg)' },
|
|
|
+ { opacity: 1, transform: 'perspective(800px) rotateY(0deg)' },
|
|
|
+ ], options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'flip') {
|
|
|
+ await run(node, [
|
|
|
+ { opacity: 0, transform: 'perspective(800px) rotateX(90deg)' },
|
|
|
+ { opacity: 1, transform: 'perspective(800px) rotateX(0deg)' },
|
|
|
+ ], options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'stretch') {
|
|
|
+ await run(node, transformEntrance(type, { stretch: direction === 'vertical' ? 'y' : 'x' }), options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'expand') {
|
|
|
+ await run(node, transformEntrance(type, { fromScale: 0.1, toScale: 1 }), options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (name === 'collapse') {
|
|
|
+ await run(node, transformEntrance(type, { fromScale: 0, toScale: 1 }), options)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 默认：淡入淡出（带位移时同时位移，即「浮入 / 升起 / 字幕」）
|
|
|
+ await run(node, fadeWithMotion(type, anim.motion, ctx), options)
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 播放入场/退场/强调动画（支持文字分级构建）
|
|
|
+ * @returns Promise，全部播完（或被取消）后 resolve
|
|
|
+ */
|
|
|
+export async function playPptxAnimation(el: HTMLElement, anim: PptxAnimationRecord, ctx: PlayContext): Promise<void> {
|
|
|
+ const targets = resolveTargets(el, anim)
|
|
|
+ const total = Math.max(anim.duration || 500, 1)
|
|
|
+ const baseDelay = anim.delay || 0
|
|
|
+
|
|
|
+ // 按段落/字词构建：整体时长不变，各单元顺序播放
|
|
|
+ const perDuration = targets.length > 1 ? Math.max(total / targets.length, 120) : total
|
|
|
+
|
|
|
+ for (let i = 0; i < targets.length; i++) {
|
|
|
+ // 退场时反向播放（最后一段先消失），与 WPS 表现一致
|
|
|
+ const target = anim.type === 'out' ? targets[targets.length - 1 - i] : targets[i]
|
|
|
+ const delay = i === 0 ? baseDelay : 0
|
|
|
+ await playOne(target, anim, ctx, perDuration, delay)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 清理文字构建产生的临时 span（切换页面时调用） */
|
|
|
+export function cleanupTextBuild(root: ParentNode = document) {
|
|
|
+ root.querySelectorAll(`[${UNIT_ATTR}]`).forEach(span => {
|
|
|
+ const parent = span.parentNode
|
|
|
+ if (!parent) return
|
|
|
+ parent.replaceChild(document.createTextNode(span.textContent || ''), span)
|
|
|
+ parent.normalize()
|
|
|
+ })
|
|
|
+}
|
jack