免费获取学习方案
ARTICLE DETAIL

资讯详情

深耕编程基础知识与建站技术分享的一线实战洞察。

用 OfficeCLI morph-ppt 复刻「Liquid Flow」流动光效:dark--liquid-flow 样式的构建脚本与 Morph 编排深度解析

用 OfficeCLI morph-ppt 复刻「Liquid Flow」流动光效:dark--liquid-flow 样式的构建脚本与 Morph 编排深度解析 用 OfficeCLI morph-ppt 复刻「Liquid Flow」流动光效dark--liquid-flow 样式的构建脚本与 Morph 编排深度解析【免费下载链接】OfficeCLIOfficeCLI 是首款也是最佳的专为 AI 代理设计的命令行工具可用于读取、编辑和自动化处理 Word、Excel 和 PowerPoint 文件。它免费、开源仅包含一个二进制文件无需安装 Office 套件。项目地址: https://gitcode.com/iOfficeAI/OfficeCLIOfficeCLI 的morph-ppt技能内置了一套 52 种视觉风格的参考库其中dark--liquid-flow是专为品牌视觉升级、创意发布会与高端产品展示设计的暗色流动光效风格。本文以该样式的style.md与配套build.sh为骨架逐行拆解其 9 色配色体系、流体光斑blob与小液滴drop的几何参数、跨页 Morph 编排逻辑并结合morph-ppt技能的命名绑定、Ghost 纪律与交付门禁等底层规则说明如何理解这套风格的设计逻辑并将其迁移到自己的演示文稿中。读完本文你将能读懂并复现一个完整的 6 页液体流动 Morph 演示文稿并掌握从样式库取经而非照抄坐标的正确姿势。一、样式总览深紫夜色中的多色流体光斑style.md对该风格的定义可以浓缩为一句话深紫色背景上以低透明度的彩色大椭圆相互重叠营造出液体流动的光效。整套视觉的核心元件只有两类——「大光斑」和「小液滴」全部由ellipse预设形状构成。维度取值适用场景Scene品牌视觉升级、创意发布会、时尚展示、高端产品情绪Mood流动、梦幻、高端、前卫Flowing, dreamy, premium, avant-garde色调Tone暗色调、多色渐变光效在设计心理上这套风格刻意回避了「几何色块 投影」的常见科技感模板改用无边框、低不透明度、带旋转角度的椭圆群来制造非结构化、有机的流动感——非常适合需要传达「升级、焕新、未来」语义的品牌叙事。在reference/styles/INDEX.md的目录索引中它的定位是dark--liquid-flow/ Liquid Light / 主色#0F0F2D / #6C63FF / #48E5C2/ 适合品牌升级、创意发布、时尚展示 / 情绪Fluid, dreamy, avant-garde同时INDEX.md的 Quick Lookup 表也将dark--liquid-flow推荐给Keynotes / Launch Events / Galas主题演讲、发布活动、盛典场景——这印证了它「梦幻、前卫」的舞台感定位。二、配色体系9 色三层结构style.md给出了完整的 9 色调色板。这套配色的关键是三层视觉深度背景是最弱的深紫中间层是低透明度的彩色光斑最上层是白/蓝系的文字——这与pptx-design.md中「Background fill → Scene actors → Content」的三层颜色层级规则完全吻合。名称Hex用途Deep Purple Night 深紫夜#0F0F2D页面背景Violet 紫罗兰#6C63FF主光斑Mint Green 薄荷绿#48E5C2辅助光斑Coral Pink 珊瑚粉#FF6B8A辅助光斑Electric Blue 电光蓝#3D5AFE辅助光斑Amber 琥珀金#F5AF19小液滴Title White 标题白#F5F5FF标题文字Body Blue 正文蓝#C8C8FF正文文字Auxiliary Gray 辅助灰#8888CC辅助文字从build.sh第 12–20 行可以看到这些颜色在脚本中被定义为 shell 变量供后续所有--prop fill/--prop color引用BG0F0F2D VIOLET6C63FF MINT48E5C2 CORALFF6B8A EBLUE3D5AFE AMBERF5AF19 TITLEF5F5FF BODYC8C8FF MUTED8888CC配色使用上遵循几条可迁移的原则背景亮度极低#0F0F2D的亮度远低于 30%因此所有文字必须使用高亮度色。标题#F5F5FF、正文#C8C8FF、辅助#8888CC的亮度依次递减但正文与辅助文字仍保持足够的明度差来保证投影环境下的可读性——这正是pptx-design.md「对比度优先暗背景正文亮度 ≥ 80%」规则的实践。四种光斑色均为高饱和度彩色紫、绿、粉、蓝在深紫背景上以低透明度叠加不会与文字抢视觉权重。琥珀金#F5AF19作为点缀色只分配给小液滴与 KPI 数字承担「少量高亮」的 accent 职能符合「accent 色少量、一次一击」的色彩纪律。三、设计技法光斑几何、透明度与旋转的定量参数style.md的 Design Techniques 部分给出了这套流动效果的可量化配方这也是从该风格取经时最值得抄走的部分而非坐标流体光斑Fluid light spots4 个大椭圆12–14cm 3 个小液滴3–4cm不同颜色、不同透明度0.28–0.55且带旋转角度。液体流动效果Liquid flow effect椭圆相互重叠颜色混合形成景深。Morph 编排Morph choreography光斑在相邻页面间显著位移10–15cm 旋转变化营造流动感。特征Characteristics不规则流体光斑 多色分层形成液体流动效果。这些数值在build.sh中全部有对应实现。以 Slide 1Hero的 4 个主光斑为例第 33–63 行officecli add $OUTPUT /slide[1] --type shape \ --prop name!!blob-1 \ --prop presetellipse \ --prop fill$VIOLET \ --prop opacity0.35 \ --prop rotation15 \ --prop x2cm --prop y3cm --prop width12cm --prop height8cm四个 blob 的参数汇总如下来自build.shSlide 1形状颜色opacityrotation位置 (x, y)尺寸 (w × h)!!blob-1Violet0.3515°2, 3cm12 × 8cm!!blob-2Mint0.2825°20, 2cm10 × 14cm!!blob-3Coral0.3218°8, 10cm13 × 9cm!!blob-4Electric Blue0.3822°24, 11cm9 × 11cm三个小液滴第 74–96 行则更小、透明度更高0.52–0.58旋转角度更大12°–35°起到「飞溅」的点缀作用形状颜色opacityrotation尺寸!!drop-1Amber0.5512°3.5 × 2.8cm!!drop-2Mint0.5828°4 × 3.2cm!!drop-3Violet0.5235°2.8 × 3.8cm值得注意的设计细节所有椭圆都不是正圆width ≠ height配合旋转角避免了呆板的几何感透明度全部落在 0.28–0.55 区间符合pptx-design.md对 scene actor 的透明度分层要求——≤ 0.12是纯装饰、0.3–0.6适合做数据底衬这里的光斑正好处于「装饰」与「内容」之间的模糊带靠低透明度保证不干扰前景文字。四、构建脚本全解从officecli create到 6 页 Morph 演示文稿style.md指出「完整构建脚本见build.sh」并推荐重点阅读Slide 1hero看光斑布局与分层和Slide 3pillars看光斑如何衬托内容卡片。build.sh是一个 707 行、可直接bash build.sh运行的完整脚本它构建了一份 6 页的品牌视觉升级演示文稿LUXE 主题完整覆盖了 Morph 技能的核心工作流。4.1 脚本骨架与固定变量#!/bin/bash set -e SCRIPT_DIR$(cd $(dirname ${BASH_SOURCE[0]}) pwd) OUTPUT$SCRIPT_DIR/dark__liquid_flow.pptx echo Building: dark--liquid-flow (LUXE Brand Visual Upgrade) rm -f $OUTPUT officecli create $OUTPUT脚本使用set -e保证任一步失败即中止输出文件固定为dark__liquid_flow.pptx与reference/styles/dark--liquid-flow/目录下已提交的成品对应。同时定义了一个贯穿全脚本的 Ghost 常量# Off-canvas position OFFSCREEN36cm36cm是 morph-ppt 技能约定的幽灵位ghost position——画布标准宽度为 33.87cmx36cm即右边缘之外的不可见区域。Morph 技能的核心纪律是绝不删除!!前缀形状而是把它移到画布外让退出动画仍然播放详见 skills/morph-ppt/SKILL.md。4.2 命名系统三个前缀的职责分工整个脚本中所有光斑都使用!!blob-N/!!drop-N命名文字使用#sN-*命名这是 morph-ppt 技能的三前缀命名系统SKILL.md§What is Morph前缀角色生命周期本脚本中的实例!!scene-*背景/装饰全 deck 持续存在设置一次跨页调整位置制造运动几乎不 ghost!!blob-1..5、!!drop-1..3!!actor-*内容/前景跨 section 演化某页引入、后续页演化、退出页 ghost 到x36cm—本脚本未使用#sN-*每页内容标题、正文、说明第 N 页新建第 N1 页 ghost 到x36cm#s1-title、#s3-p1-title、#s5-metric1-num等脚本中!!blob-N承担的是 scene actor 的职责它们跨 6 页以完全相同的名字重复出现仅改变位置、尺寸、旋转与透明度从而让 PowerPoint 的 Morph 引擎能按名字配对并插值出流动动画。这也是本风格「液体流动感」的真正来源——不是靠逐帧动画而是靠跨页的连续运动。4.3 六页幻灯片的叙事与编排脚本构建了一个完整的hero → statement → pillars → showcase → evidence → cta品牌叙事这一结构也正是reference/decision-rules.md中 problem_solution 叙事的推荐页序。各页的 Morph 编排摘要如下页面类型内容编排要点Slide 1heroLUXE 大标题 副标题「品牌视觉升级 2025」4 blob 3 drop 全登场blob-5Amber隐藏于画布外Slide 2statement「从经典到未来 / 流动不止」4 blob 全部旋转45°–58°并大幅位移transitionmorph开启Slide 3pillars三大升级维度色彩体系 / 字体系统 / 动态标识blob-5 首次可见opacity0.32drop-3 退场 ghostSlide 4showcase产品应用展示包装 / 数字界面 / 空间体验blob 旋转到 92°–110°3 drop 全部回归Slide 5evidence市场成果45% 品牌认知 / 120% 社交互动blob 旋转到 118°–142°blob-5 再次可见opacity0.40drop-3 退场Slide 6cta开启品牌新纪元blob 回归中心148°–172°整体趋于平静收束每页的transitionmorph均通过officecli set $OUTPUT /slide[N] --prop transitionmorph设置第 126、221、367、483、611 行。这是 Morph 生效的必要条件——SKILL.md明确指出只有第 N1 页携带transitionmorphMorph 才会运行缺失该属性的页会静默退化为普通切换。4.4 核心命令模式解析build.sh的核心命令模式只有三种全部可复制到自己的脚本中① 新建幻灯片并设置背景officecli add $OUTPUT / --type slide --prop layoutblank --prop background$BGlayoutblank表示空白版式不继承占位符background直接接受十六进制色值——这里是全脚本统一的深紫#0F0F2D。② 添加光斑/液滴形状scene actorofficecli add $OUTPUT /slide[1] --type shape \ --prop name!!blob-1 \ --prop presetellipse \ --prop fill$VIOLET \ --prop opacity0.35 \ --prop rotation15 \ --prop x2cm --prop y3cm --prop width12cm --prop height8cm参数含义name是 Morph 配对的唯一标识必须用单引号包裹防止 bash 历史展开吃掉!!presetellipse指定椭圆形状fill为填充色opacity为透明度0–1rotation为旋转角度x/y/width/height为画布坐标单位 cm画布为 33.87 × 19.05cm。③ 添加文字内容每页内容officecli add $OUTPUT /slide[1] --type shape \ --prop name#s1-title \ --prop textLUXE \ --prop fontArial --prop size72 --prop boldtrue \ --prop color$TITLE --prop aligncenter \ --prop fillnone \ --prop x3cm --prop y6cm --prop width28cm --prop height3cm注意fillnone表示文字形状无填充透明底字号 72pt 的 hero 标题与 42pt 的副标题、56pt 的章节标题与 18–24pt 的正文严格遵循 morph-stage 的字号阶梯pptx-design.mdhero 标题 54–72pt、章节标题 28–40pt、正文 18–24pt。4.5 blob-5 的进出编排一个「客串演员」的完整生命周期脚本中最精细的编排是第 5 个光斑!!blob-5琥珀色。它并不像其他 blob 那样全程在场而是按叙事需要「登场—退场—再登场」Slide 1第 66–71 行以opacity0.01、x36cm创建——位于画布外、透明度近乎为 0即视觉上不可见但名字已注册Slide 2第 161–166 行继续隐藏同样参数Slide 3第 256–263 行首次登场opacity0.32、rotation72、x3cm y14cm配合三大维度内容卡片Slide 4第 402–408 行再次退场隐藏opacity0.01、x36cmSlide 5第 518–525 行二次登场opacity0.40、rotation130、x20cm y1cmSlide 6第 646–652 行最终退场隐藏。这种「用幽灵位透明度 0.01 隐藏、需要时再拉回可见区域」的手法正是 morph-ppt 技能中enter淡入/ exit滑出行为的实现方式同名形状在两页间从x36cm移入可见区域即为「登场动画」从可见区域移回x36cm即为「滑出动画」。它比删除形状更优——删除会破坏 Morph 配对导致形状无动画地直接消失见SKILL.md§Common Morph Pitfalls。4.6 收尾验证脚本末尾第 704–707 行执行了两条验证命令这是 morph-ppt 技能交付门禁的一部分officecli validate $OUTPUT officecli view $OUTPUT outline echo ✅ Build complete: $OUTPUTofficecli validate对应 Delivery Gate 1schema 校验officecli view outline用于核对页序与标题Gate 3 的 order sanity 检查。morph-ppt 技能在此基础上还要求 HTML 预览Gate 5b与四条 morph 专项检查!!actor-*泄漏、相邻页空间构成差异、Morph 配对名称一致、#sN-*幽灵泄漏。五、源码级原理这套样式为什么能动起来要真正理解dark--liquid-flow的「流动」效果需要回到 Morph 技能的底层机制见 skills/morph-ppt/SKILL.md §What is MorphPowerPoint 的 Morph 过渡通过「相同的形状名称」在相邻幻灯片之间配对并对形状属性进行插值。即Slide 1: shape name!!blob-1 x2cm width12cm fill6C63FF opacity0.35 Slide 2: shape name!!blob-1 x4cm width15cm fill6C63FF opacity0.40 ↓ slide 2 设置 transitionmorph 结果: blob-1 在约 1 秒内平滑移动、变大并略微加深由此可以推导出dark--liquid-flow能产生流动感的三个必要条件同名配对!!blob-1必须在每页以字节级相同的名字存在。脚本第 33–63、129–159、224–254、370–400、486–516、614–644 行逐页重复定义了 4 个同名 blob这正是为 Morph 提供配对。空间多样性SKILL.md的空间变化规则要求相邻页位移 ≥ 5cm 或旋转 ≥ 15° 或尺寸变化 ≥ 30%至少 3 个配对形状。脚本中 blob 的 rotation 从 Slide 1 的 15°/25°/18°/22°逐页推进到 Slide 6 的 155°/165°/148°/172°每页间的旋转增量都在 25°–53° 之间远超市值位移如 blob-2 从(20,2)到(18,8)到(10,1)再到(2,2)也普遍超过 5cm——这保证了 Morph 引擎有足够大的插值空间观众能「看见」运动。transitionmorph开关只有目标页携带该属性配对与插值才会执行。脚本在 Slide 2–6 每页都显式设置Slide 1 作为起始页不需要。另外值得注意的是SKILL.md记录的一个 CLI 行为设置transitionmorph后该页所有形状的名字会被自动加上!!前缀如#s1-title读回为!!#s1-title。不过name路径选择器仍然能解析到形状匹配是前缀/后缀宽容的所以脚本中直接使用/slide[N]位置路径 逐页新建形状的策略不受影响。六、从样式库取经如何把 liquid-flow 迁移到自己的项目reference/styles/INDEX.md第 5–11 行有一个明确的重要提示这些风格中的 build.sh 脚本仅作为设计技法参考配色、形状、Morph 编排部分脚本存在文字重叠、布局错位等排版问题——不要逐字照搬坐标和尺寸生成时必须遵循pptx-design.md的设计原则文字可读性、间距、对齐等学思路不要抄代码。SKILL.md§Style library lookup workflow 也强调了同样的观点52 个build.sh的坐标都是针对各自 demo 内容手工调校的直接复制到内容长度不同的 deck 中必然产生重叠与错位。正确用法是四步浏览 INDEX用reference/styles/INDEX.md的 Quick Lookup 表按主题与情绪选风格dark--liquid-flow的 hex 三元组是#0F0F2D / #6C63FF / #48E5C2读哲学打开style.md理解设计意图本样式 深紫底 多色低透明度光斑 跨页位移旋转看技法打开build.sh只看技法签名形状、调色板 hex、编排思路不抄坐标在自己的画布上应用用 pptx v2 的 12 列网格数学与视觉底线重建只借用调色板与签名动作。具体到 liquid-flow可迁移的设计资产包括调色板9 色全部可直接复用背景#0F0F2D 4 个光斑色 琥珀点缀 3 级文字色签名动作4 大光斑 3 小液滴的「非对称、非正圆、低透明度、带旋转」形态以及跨页 10–15cm 位移 15° 以上旋转的编排节奏分层手法光斑 opacity 控制在 0.28–0.55文字层全部无填充fillnone置于光斑之上靠透明度差保证可读性。而需要自己重新计算的是坐标例如在 33.87 × 19.05cm 画布上摆放 3 张 pillars 卡片时应使用公式col (33.87 − 2·margin − (N−1)·gap) / N计算列宽与 x 坐标并保证边缘留白 ≥ 1.27cm、卡片间距 ≥ 0.76cm、每页负空间 ≥ 20%这些硬规则来自 skills/officecli-pptx/SKILL.md §Design Principles。七、实操检查清单交付前的验证闭环将 liquid-flow 风格应用到自己的 morph deck 时建议按以下清单闭环验证对应SKILL.md§Delivery GateSchema 校验officecli validate $FILE无错误过渡校验每个需要动画的 Slide N1 都有transitionmorph可通过officecli get $FILE /slide[N] --json检查 transition 字段配对校验用officecli get $FILE /slide[N] --depth 1 --json对比相邻页确认至少 2 个!!前缀名字完全一致对应 Gate 5b-morph-3空间变化校验确认相邻页至少 3 个不同!!形状在 {x, y, width, height, rotation, font-size} 中各有变化对应 Gate 5b-morph-2位移 ≥ 5cm 或旋转 ≥ 15°幽灵泄漏校验逐页检查#s(N-1)-*内容与已退场 actor 是否都位于x ≥ 33.87cm对应 Gate 5b-morph-1/4对 5 页的连续弧线可直接使用 skills/morph-ppt/reference/morph-helpers.py 的clone/ghost/verify/final-check命令自动完成大部分检查渲染器提示Morph 是运行时特性需在 PowerPoint 365 / Keynote / WPS 中播放才能看到流动效果LibreOffice 与网页查看器只会显示静态或普通淡入淡出——这属于渲染器限制而非样式缺陷。结语dark--liquid-flow用一套极简的形状语言4 个椭圆 3 个液滴 9 个颜色加上严格的跨页 Morph 编排就构建出了「深紫夜色中彩色液体流动」的高级品牌感。它的价值不在于build.sh里的坐标本身而在于三个可复用的设计决策低透明度多层叠加制造景深、非对称旋转椭圆打破几何呆板、跨页大位移 大旋转让 Morph 引擎真正「动起来」。理解了这三条逻辑再结合 skills/morph-ppt/SKILL.md 的命名与 Ghost 纪律你就能在自己的演示文稿中安全地复刻这种流动美学——先取配色与编排再按自己的内容重新计算坐标。【免费下载链接】OfficeCLIOfficeCLI 是首款也是最佳的专为 AI 代理设计的命令行工具可用于读取、编辑和自动化处理 Word、Excel 和 PowerPoint 文件。它免费、开源仅包含一个二进制文件无需安装 Office 套件。项目地址: https://gitcode.com/iOfficeAI/OfficeCLI创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表