文本转 Lottie 的章节化设计与转场语法(Chapterization Transition Grammar)实战指南

发布时间:2026/10/12 1:41:21
文本转 Lottie 的章节化设计与转场语法(Chapterization  Transition Grammar)实战指南 AI 技能媒体生成【免费下载链接】lottieGenerate production-ready Lottie animations with Claude Code or Codex项目地址https://gitcode.com/gh_mirrors/lottie1/lottie点击查看免费下载多段落长文案、功能列表、数据快闪、产品走读这类天然多段的提示词最忌讳被硬塞进一个单镜头里——信息还没读完动画就已经结束了。本篇指南以仓库中 skills/text-to-lottie/references/chapterization-transition-grammar.md 为核心系统讲解「何时拆章、每章干什么、章与章之间怎么接缝」并对照 motion-taste.md 的缓动锚点、SKILL.md 的工作流与 player-contract.md 的验证手段讲清从「创作前规划」到「逐帧验收」的完整闭环。读完你将能判断提示词该拆成几幕、为每道接缝选择正确的转场类型、在关键帧落笔前写出一份可执行的 Seam Plan并在官方 Skottie 播放器中用?frameN逐帧验证接缝两侧的边界帧。一句话定位这套语法解决什么问题当提示词信息密集、天然多段时本文档chapterization-transition-grammar负责三件事的决策是否拆分成章节chapters每个章节承担什么可读职责章节之间如何过渡transition grammar。需要特别澄清的是缓动锚点Easing Anchors详见 motion-taste.md 的 Easing Anchors 一节在这里是支撑工具它们服务于转场但不是转场本身。一个转场的成立依赖章节角色 时机 方向 切点 遮罩 缓动六要素缓动只是其中之一——这一点在接缝机制一节还会反复强调。在 SKILL.md 的路由表中本章节文档被明确指定给这些意图加载长文本、多概念、列表/特性/步骤、时间线、前后对比、问题/方案、引语证据、recap/故事、产品走读、多语言变体、多幕多拍序列、跳切/硬切与转场语法。换言之它是多拍序列类任务的主参考通常与 motion-taste.md 一起读取。何时拆章When To Chapter当提示词携带不止一个想法时就应该拆成章节。文档列举的典型触发场景包括长文本long text多个论断multiple claims功能列表feature list多个统计数据multiple stats时间线timeline前后对比before/after问题/方案problem/solution引语 证据quoteproof铺垫/回报setup/payoff产品走读product walkthroughrecap/社交故事recap/social story多语言或重复内容变体multi-language / repeating content variations。拆章的唯一标准是一个章节只承载一个可读的想法one readable idea per chapter。这与 motion-taste.md 的 Gate 规则完全一致——如果提示词承载多个想法就把它们拆成章节而不是硬塞进一个场景cramming one scene。何时不拆章When Not To Chapter反过来单一意图的场景必须保持一个节拍one beat并让它落定单一 Logo 定版single logo lockup单一 CTA单一图标动画单一简洁数据卡one simple stat card单个 UI 微交互法律条款等必须逐字阅读的文本块legal/read-critical block平静的 hero 时刻其最终落定本身就是回报。这些场景的收尾settle就是高潮拆章反而会削弱它。这一点在 motion-taste.md 中同样有镜像表述单用途节拍logo lockup、一个 CTA、一个数字、法律文本、必须落定的平静 hero保持一个节拍并落地lands。章节角色Chapter Roles每个章节只承担一个可读职责。文档给出的角色清单hook钩子setup铺垫claim主张proof证据contrast对比detail细节payoff回报CTA / final lockup行动号召 / 最终定版loop bridge循环桥接角色决定章内做什么也为后续选择转场提供依据——例如 proof 章倾向于克制、payoff 章适合落定式收尾。它与 motion-taste.md 中的 Reveal Grammarbuild → settle → hold配合使用每章给主要信息一个 coast/hold 窗口再接缝。按意义切分而非按长度Split By Meaning, Not Length文档明确禁止两种偷懒做法一次性整段铺上画面never place a paragraph at once把长段落机械剁成小段do not just chop it into smaller paragraph blocks。正确姿势是把长文本重写为简短、作者意图明确的节拍authored beats或渐进揭示reveal it progressively保证一个章节一个想法。这意味着拆章工作在文案层面就要发生删冗余、提炼每章的核心句而不是把原文原封不动地分配到多个镜头里。两种结构模式Structure Modes拆章之后用哪种结构组织这些章节文档给出两种模式重复骨架Repeated armature保持相同版式与运动路径只替换内容。最适合列表、统计数据、多语言、recap、supercut 等同一模板反复出现的场景。这类结构天然自带节奏重复rhythm因此也最容易支撑 jump cut / hard cut 类转场见接缝机制中关于重复节奏的讨论。演进式故事版式Evolving story layout对象/文字持续进入新位置构图随章节演化。最适合产品走读、解释说明、流程展示、setup/payoff 和叙事性运动。模式选择要在动笔前定因为它直接影响后续每道接缝的类型选择重复骨架适合节拍对节拍的硬接演进式版式适合 carry / masked swap 这类连续性转场。可读窗口Readable Window**每一章的主信息在接缝之前都要有一段 coast、hold 或稳定时刻。**快速转场没有问题但绝不能以牺牲可读性为代价Fast transitions are fine, but never at the cost of the read。这与 motion-taste.md 的 Reveal Grammar 一脉相承使用 build, settle, hold 作为默认揭示主轴hold 是信息或品牌被观众记住的地方。可读窗口的存在是剪在运动中cut-on-action的前提——见下文接缝机制中任何快速退出前必须先有可读的 coast/hold。转场语法Transition Grammar七种接缝每个接缝选择一种转场类型pick one per seam。文档定义的七种转场hard cut on action运动中硬切焦点运动仍在进行时切入。jump cut跳切跨接缝匹配方向/速度的硬切。motion-masked swap运动遮罩置换出场运动本身变成下一拍的揭示/遮罩。continuous carry连续携带同一对象/文字跨章节旅行到下一位置。occlusion wipe遮挡扫除大型形状盖满画面再揭开下一章。hold/settle cut落定切仅在节拍必须首先清晰落定时使用。loop reset循环复位节奏有意重复时使用。七种转场完整对照表文档给出的这张表是这套语法的核心资产逐列拆解了为什么成立出画末帧入画首帧缓动锚点何时切换必须逐格理解methodwhy the seam worksoutgoing last frameincoming first frameanchorsswitch whenhard cut on action眼睛正处于运动中运动连续性掩盖了内容跳变焦点元素仍在运动速度活跃常为上升朝向窗口外/画外的终点切点帧并未到达其最终创作目标新内容已在运动中方向兼容无静态停留出exit-accelerate/travel-cut入entrance-sharp节拍必须静止阅读 → 改用 hold/settle cutjump cut同硬切但跨接缝的匹配更强化连续性朝向窗口外终点运动速度活跃常为上升记录方向与感知速度切点帧未到达最终目标以相似速度同方向进入位置可重置出exit-accelerate/travel-cut入travel-balanced/entrance-sharp单拍 / 无节奏 → 看起来破碎改用 hold/settle 或 carrymotion-masked swap出场运动或其留下的形状成为揭示下一拍的遮罩——无可见切点内容更换完全发生在遮罩隐藏期间运动元素完全覆盖置换区域 / 遮罩填满下一内容已在遮罩下完成构图随遮罩清除而揭示揭示用entrance-sharp出travel-balanced没有可共享遮罩的东西 → 硬切或 occlusion wipecontinuous carry一个持续元素跨章节旅行身份连续性通常无切点被携带元素在前往下一位置的途中同一元素或明显相关元素从匹配的位置/速度或保留的运动逻辑继续不是全新无关的入场周边环境可变化travel-balanced若落定用settle-soft章节间无可共享元素 / 需要干净重置 → 硬切或 occlusion wipeocclusion wipe大型形状盖满画面隐藏置换随后揭开新章覆盖形状完全遮蔽画面或置换区域新章已在覆盖物退出前于其后方完整构图随形状离开而揭示盖入揭示用entrance-sharp扫动用travel-balanced想要能量/连续性而非全遮 → 硬切或 carryhold/settle cut节拍完全落定并被读完然后才变化——清晰优先于速度与 cut-on-motion 相反运动完成并保持后才接缝运动已落定信息可读且静止保持 N 帧下一拍干净起笔一次入场而非运动中落定用settle-soft起拍用entrance-sharp节奏/能量比落定更重要 → 改用运动中硬切loop reset末帧与首帧匹配位置、颜色、速度使回环不可见或一次刻意的可见复位节拍状态等于首帧状态无缝或刻意的退出以实现可见复位与循环起点相同感知速度连续匹配进出速度通常travel-balanced/线性可见复位用exit-accelerate切一次性、非循环 → 正常收尾settle缓动锚点的配套用法表内出现的锚点来自 motion-taste.md 的 Easing Anchors 表全部为 cubic-bezierx1,y1,x2,y2描述的是运动行为而非图层类型anchor行为cubic-bezier感觉entrance-sharp进入、遮罩擦拭减速.20,.75,.34,.94快进、软落settle-soft落定、计数落位、logo 定版.00,.65,.51,.99深缓出、无弹跳kinetic-ui表达性小状态位移开关、强调.85,.46,.14,.53灵动——并非每次 UI 位移都用expressive-pop活跃动态词、品牌装饰.94,.75,.34,.94快出 软落可选过冲travel-balanced对象旅行、镜头、状态间移动1.00,.49,.00,.55S 曲线缓入缓出exit-accelerate退出、硬切伴生1.00,.02,.54,.42慢起快收travel-cut仅用于被打断/遮罩/落定前切断.15,.85,.95,.05快-慢-快永不落定chapterization-transition-grammar.md 强调缓动锚点是支撑工具不是转场本身motion-taste.md 则从另一侧印证硬切/跳切/章节转场出画用exit-accelerate长距离旅行用travel-cut在它落定前切断需要连续性时配合 motion-masked swap。在 Lottie JSON 中一个 cubic-bezier 会按 lottie-spec-map.md 的规则拆到两个关键帧上起点关键帧的o:{x:[x1],y:[y1]}作为出向手柄终点关键帧的i:{x:[x2],y:[y2]}作为入向手柄。例如exit-accelerate1.00,.02,.54,.42落成关键帧就是{ a: 1, k: [ { t: 0, s: [0], o: { x: [1.0], y: [0.02] } }, { t: 40, s: [100], i: { x: [0.54], y: [0.42] } } ] }依据信息与基调选择转场message tone文档给出了内容 → 转场的映射规则选型时先看信息再定调动感列表 / supercut / recap→ 重复骨架 运动中的 hard cut / jump cut叙事 / 产品走读→ continuous carry 或 motion-masked swap对比或调色板/世界切换→ occlusion wipe 或 hard cut高级感 / 数据 / 证据→ 克制的遮罩或 hold/settle cut必须读清楚的内容→ 保持更久绝不在被理解之前切断每道接缝都需要一个理由保持连续性、制造对比、重置节奏、或落定一个观点。不要随机变换转场类型Do not vary transition types randomly。这条每道接缝必须有理由的约束在 motion-taste.md 中同样出现根据接缝目的——保持连续性、制造对比、重置节奏或落定一个观点——来选择每种转场而不是随机选择。接缝机制Seam Mechanics一个转场不是缓动文档给出的接缝公式是转场 章节角色 时机 方向 切点 遮罩 缓动——不止是缓动锚点只是支撑。并给出四条机制铁律剪在运动中cut-on-action必须在运动进行中切入——绝不能在落定之后切jump cut 必须匹配方向与感知速度任何快速退出前必须先有一个可读的 coast/hold被打断的运动只有在重复节奏下才读作有意为之约 3–4 拍的骨架单次出现会被看作失误。核心技法把出画运动剪在终点之前文档强调要创作剪在运动中的出画让自然终点活在可见切点之外可见章节是更长运动弧线的一个窗口——例如章节在 100 帧结束但运动本会在约 120–140 帧才收束接缝在速度仍活跃often rising时打断运动而非在运动落定后核心规则是主动延续active continuation不一定是加速速度可以是上升的kinetic exit、稳定的匀速平移 pan、或已经高而稳定快速物体掠过——关键在于它尚未落定若章节被延长运动会继续。落到验证上这意味着如果在接缝帧上物体已经到达它的最终创作目标那这就是 settle cut而不是 cut-on-motion。创作前的接缝规划Seam Plan文档要求在打关键帧之前对每道接缝逐项决策chapter role——这一拍做什么readable window——信息在哪里 coast/holdoutgoing motion——结尾什么在动方向 速度transition type——从语法表里选incoming motion——开头什么在动easing anchor——支撑曲线cut/hold frame——精确接缝帧运动中 vs 静止reason for the seam——连续性 / 对比 / 节奏重置 / 落定观点。这八项可以整理成一份可直接执行的创作检查单例如Seam 1hook → claim - role: hook 引出话题claim 抛出主张 - readable window: frame 60–72 给 hook 落定 - outgoing: 标题从左向右 pan速度中等上升 - transition: hard cut on action - incoming: claim 元素以同方向速度入场 - easing: 出 exit-accelerate入 entrance-sharp - seam frame: 72运动中切断 - reason: 保持连续性 推进节奏SKILL.md 的工作流同样强调创作前决策路由任务 → 解析目标场景 → 先定背景策略 → 再写lottie.json。Seam Plan 正是这套先想后写原则在多层叙事场景中的具体化。接缝验证Seam Verification逐帧检查两个边界帧文档要求对每道接缝检查其两侧的边界帧并给出了按转场类型区分的验收标准cut-on-action / jump cut出画末帧仍在运动未落定入画首帧方向 感知速度匹配。检查出画运动在章节延长时是否会继续——若物体在接缝处到达最终目标则它是 settle cut 而非 cut-on-motionmasked swap / occlusion wipe不存在两个章节都未构图的间隙帧遮罩/遮挡物在置换处完全遮蔽continuous carry被携带元素在跨接缝处位置 速度匹配或运动逻辑肉眼可见地连续相关元素/变换也可接受hold/settle cut切前信息可读且静止loop reset首末帧匹配位置、颜色、速度除非复位是刻意的。在 lottie 仓库中这套验证可以落到真实工具链上逐帧定格官方播放器支持?frameN定格到任意帧。在 src/context/canvas.tsx 中路由查询参数frame会被解析并驱动anim.seekFrame(currentFrame())见 src/context/canvas.tsx加载即暂停在指定帧。因此接缝两侧边界帧的检查就是http://localhost:port/project/scene?frameN两次导航。新建场景至少检查frame 0、中点和op - 1player-contract.md Frame PinningJSON 校验op是排他的、ip是包含的ip: 0, op: 90, fr: 60渲染帧0..89见 lottie-spec-map.md因此op - 1才是最后一帧。写入后用 SKILL.md 给出的命令校验node -e JSON.parse(require(fs).readFileSync(public/projects/project/scene-N/lottie.json,utf8))确认场景已被官方播放器加载curl -s http://localhost:port/__context返回项目树、活动场景、帧数、fps 与最后修改时间实现见 vite-plugins/scenes.ts。该端点也是 Agent 侧场景是否在线的观测入口补全运动审查只检查首末帧不够。evals/output-rubric.md 明确要求拖拽播放scrub playback并检查关键节拍帧帧 0、早期揭示、中点、落定或接近末帧、op - 1、循环接缝如循环、以及语义节拍数字解析、词语落定、logo 定版、图表画完、CTA 出现、镜头运动落定——这与 Seam Verification 的边界帧 运动中检查正好互补。护栏Guardrails文档最后给出三条不可逾越的护栏jump/hard cut 需要重复节奏或明确的编辑理由一个孤立的被打断运动会看起来像失误cut-on-motion 通常应跨切点匹配方向/速度为平静的奢侈/机构化基调、最终 logo 定版、法律文本、以及任何必须落定才能被理解的内容避免高能章节切。这三条护栏与选择转场一节的基调映射互为表里能量越高的转场适用语境越窄越需要读清楚的内容越要 hold 到位。当场景属于必须落定的类型但又被硬切打断时evals/output-rubric.md 的 Design Judgment Blockers 会直接判失败——产出能渲染但缺乏清晰焦点最终帧像偶然停点都属于完成阻塞项。落地路径从规则到成品把整套语法接入 lottie 仓库的实际工作流路由按 SKILL.md 的意图表识别多段 / 多拍 / 章节类提示词加载本章节文档与 motion-taste.md并始终先读 player-contract.md规划按Seam Plan八项在关键帧前完成每道接缝的决策包括可读窗口的精确帧号创作写入public/projects/project/scene-N/lottie.json场景文件约定与目标解析规则见 player-contract.md 与 SKILL.md 的 Scene Rules当前仓库的示例场景位于 public/projects/main-project/scene-1/lottie.json验证JSON 校验 → 官方 Skottie 播放器通过npm run dev启动端口以 Vite 打印为准→?frameN逐帧检查每道接缝的两个边界帧与关键节拍帧 → 用 output-rubric.md 的节奏、层级、可读性标准收尾。整套体系的最终目标与 SKILL.md 的定位一致产出在官方 Skottie 播放器中**干净渲染、观感有意为之feels intentional**的场景——对多拍序列而言有意为之恰恰体现在该拆的章拆开、每章一个职责、每道接缝都有理由。赞分享AI 技能媒体生成【免费下载链接】lottieGenerate production-ready Lottie animations with Claude Code or Codex项目地址https://gitcode.com/gh_mirrors/lottie1/lottie点击查看免费下载相关推荐读透《You Dont Know JSTypes Grammar》——JS 类型、值、强制类型转换与语法的全景实战指南读透《You Dont Know JSTypes Grammar》——JS 类型、值、强制类型转换与语法的全景实战指南 本篇指南以 You Dont K文档教程WhisperPlus项目语音转文本与文本转语音的完整实践指南WhisperPlus项目语音转文本与文本转语音的完整实践指南 项目概述 WhisperPlus是一个功能强大的语音处理工具包基于先进的深度学习技术提供了Android 转场动画之 Content Transition 深度解析非共享元素的进出场机制与 Transition Group 实战Android 转场动画之 Content Transition 深度解析非共享元素的进出场机制与 Transition Group 实战 导读 本文聚焦于教程技术博客文档上一篇PowerJob定时任务漂移终极解决方案基于NTP的时间同步完全指南下一篇FastAPI Contrib分页解决方案Limit-Offset Pagination依赖注入的完整实现创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询