低代码前端【免费下载链接】webstudioOpen source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.项目地址https://gitcode.com/gh_mirrors/we/webstudio点击查看免费下载导读Text Animation文本动画是 Webstudio 动画引擎中的辅助组件之一它会在幕后自动把标题、段落等文本实例按字符、单词或自定义分隔符拆分让你无需手动为每个字或词包裹一层 Animation Group即可快速搭建逐字、逐词的动态效果。读完本文你将掌握 Text Animation 的拆分方式Split By、滑动窗口Sliding Window、缓动Easing三个核心设置的完整语义理解它与 Animation Group 的父子结构约束并能在 Builder 中组合出类型打字机、波浪式入场等实战动效。Text Animation 在动画引擎中的定位Text Animation 是 Webstudio 动画引擎的一个组成部分。动画引擎的整体概览参见 Animations引擎以Animation Group为控制器container负责定义动画的触发方式进入/退出视口或滚动位置与动画样式Text Animation、Stagger Animation、Video Animation 则是直接挂在 Animation Group 下的辅助组件各自消费父级动画进度并按特定方式分发到子元素。从源码注册元数据可以清楚看到它的定位。在 animate-text.ws.ts 中Text Animation 被注册为分类category: animationscontentModel.category: nonechildren 只允许instance——意味着它本身不产生独立内容模型只是一个纯容器label: Text Animation图标为TextAnimationIcon初始属性[slidingWindow, easing, splitBy]即三个核心设置会优先展示在属性面板中。组件本体在 animate-text.tsx 中是一个非常轻量的div渲染真正的工作拆分文本、按父级动画进度驱动每个片段由动画引擎在运行时完成。这也解释了为什么文档强调Text Animation 只是负责拆分文本动画行为由父级 Animation Group 定义。为什么需要 Text Animation想象一下你要让一个标题逐个字母飞入如果手动实现你需要把每一个字母单独包进一个 Animation Group 实例再为每个字母配置相同的动画工作量大且难以维护。Text Animation 的使命就是消灭这种手工包裹你只需把文本实例如 Heading直接放进 Text AnimationText Animation 在幕后自动将非空文本节点拆分成片段父级 Animation Group 把进度分发给每个片段你只需在父级上定义 opacity、translate、scale 等动画样式。正如 Animation Group 文档 所述Text Animation、Stagger Animation、Video Animation 这些辅助组件之所以必须是 Animation Group 的直接子级是因为它们要消费 group 的进度progress而真正被动画化的 CSS 属性依然定义在 Animation Group 的 keyframes 上。Settings三个核心设置Text Animation 的属性面板提供三个设置对应的 PropMeta 定义在 animate-text.props.ts组件默认值见 animate-text.tsx 的{ slidingWindow 5, easing linear, splitBy char }。Split By如何拆分文本定义文本被拆分成动画片段的方式四个选项完整映射到源码中的split对象animate-text.tsx选项内部值效果说明Characterschar每次动画一个字符默认值适合逐字逐字母的效果Spacesspace每次动画一个单词按空格切词#symbol #在#符号处切分适合配合自定义分隔符控制断点~symbol ~在~符号处切分同左提供第二种自定义分隔符在 animate-text.ws.ts 的元数据描述中组件的能力被概括为split text by char or by word to animate it按字符或按词拆分文本以进行动画与你看到的四个选项一致。拆分粒度直接决定动画的最小单元选char时每个字符独立运动选space时每个词独立运动两个符号选项则让你在文本中嵌入分隔符来精确定义断点。Sliding Window并发动画的窗口大小控制同时处于动画中的文本片段数量默认值为5。源码注释animate-text.tsx给出了三种取值区间的精确语义0—— 片段之间产生瞬间的打字机式切换typewriter effect无过渡动画(0..1]—— 一次只动画一个文本片段形成严格的顺序逐个动画(1..n]即大于 1—— 多个片段同时动画产生重叠波浪式overlapping wave效果。参数说明中的(0..1]表示 0 与 1 之间的取值不含 0含 1例如1就是经典的一字/一词接一字/一词5意味着最多同时有 5 个片段处于动画中片段与片段之间形成平滑的错落波浪。Easing窗口内的缓动控制滑动窗口内部的缓动曲线默认值为linear。支持的取值在源码的easings常量与属性面板的options中一一对应linear、easeIn、easeInCubic、easeInQuart、easeOut、easeOutCubic、easeOutQuart、ease、easeInOutCubic、easeInOutQuart。linear匀速适合机械感、科技感节奏easeIn*系列先慢后快适合入场加速的冲击感easeOut*系列先快后慢适合自然柔和的收尾easeInOutCubic/easeInOutQuart两端缓入缓出适合柔和圆润的波浪。需要区分的是这里的 Easing 作用于滑动窗口内部的片段节奏而父级 Animation Group 自身的 timing 里的 Easing 作用于整组动画的速度曲线参见 Animation Group 文档两者可以搭配使用。组件结构谁是谁的直接父级Text Animation 的结构约束非常严格Animation Group定义 opacity / translate / scale / rotate 等动画样式 └── Text Animation设置 Split By / Sliding Window / Easing └── 文本实例Heading / Paragraph / Text 等关键约束有三条Animation Group 必须是 Text Animation 的直接父级direct parent不能隔着其他组件文本实例放在 Text Animation 内部实际动画样式定义在父级 Animation Group上而不是 Text Animation 自身。在 CLI 的 LLM 参考文档 manual-llm.md 中给出了一段可直接对照的 JSX 结构AnimateChildren即 Animation Group作为直接父级AnimateText作为其直接子级文本实例放在AnimateText内部动画 keyframesParallax In、Opacity In、Scale In 等fill 为backwards全部定义在AnimateChildren的 action 上。例如按词拆分时AnimateChildren action{{ type: view, animations: [ // Parallax In / Opacity In / Scale In 等 keyframes 定义在父级 ], }} AnimateText splitByspace slidingWindow{5} easingeaseOutQuart {/* 文本实例例如 h2Hello World/h2 */} /AnimateText /AnimateChildren文本片段的分发机制Text Animation 与 Stagger Animation 的差异值得留意Stagger Animation 把父级进度分发给自己的直接子级卡片、列表项等独立实例而 Text Animation 分发的是文本节点拆出的片段——包括嵌套实例内的文本。两者共用slidingWindow/easing的语义模型Stagger 默认窗口为1Text Animation 默认窗口为5可对比阅读 Stagger Animation 文档 理解这个统一的滑动窗口概念。Under the hood幕后发生了什么文档给出一个直观的例子如果把输出以下 HTML 的 Heading 组件放进 Text Animation 并按**空格Spaces**拆分h2Hello World/h2幕后会自动变成h2 spanHello/span !-- 空格会被动画自动忽略 -- span /span spanWorld/span /h2拆出的span各自成为动画单元父级 Animation Group 因此可以逐个词地精准驱动。注意空格被单独保留为一个片段但自动忽略这样既能保持文本排版布局不塌陷又不会让空格产生多余的动画行为。从引擎角度理解Text Animation 组件本身只渲染一个透明的div见 animate-text.tsxWebstudio 动画引擎基于 Web Animations API配合轻量 polyfill见 Animations 概览将父级 Animation Group 的进度映射到每个拆分片段上。你不需要关心span的生成时机与动画绑定细节——它们全部由引擎在运行时完成。Usage notes使用注意点汇总结合文档与源码整理出以下实践要点可容纳的内容Text Animation 内部可以放 Heading、Paragraph、Text 或其他包含文本的实例对应组件库中的 Heading、Paragraph 等。拆分范围组件拆分的是非空文本节点包括嵌套实例内部的文本——即文本不必是 Text Animation 的直接子文本节点。动画归属实际的动画样式opacity、translate、scale、rotate 等放在父级 Animation GroupText Animation 只负责拆分与分发。终态与起始态的分工用常规Style Panel定义文本的最终可读状态用Animation Group keyframes定义 in 动画的起始状态或 out 动画的结束状态。这也是 Animation Group 统一的画布即最终 in 态心智模型画布上永远看到的是最终效果动画从 group 的 keyframes 值过渡到画布样式值fill: backwards适合 in 动画fill: forwards适合 out 动画详见 Animation Group 文档。实操建议从简单到进阶逐词淡入入门Split By 选SpacesSliding Window 保持5Easing 保持linear父级 Animation Group 添加一个opacity: 0的 in 动画即可获得单词逐个浮现的波浪效果。逐字打字机进阶Split By 选CharactersSliding Window 设为0得到片段间瞬间切换的类打字机节奏。重叠波浪进阶Split By 按需选择Sliding Window 设为25多个片段同时动画形成平滑的错落波浪需要更柔和时把 Easing 换成easeInOutCubic或easeOutQuart。自定义断点进阶Split By 选#或~在文本中显式插入分隔符控制拆分位置适合需要精确节奏的长句。小结与延伸阅读Text Animation 把逐字/逐词动画从繁琐的手工包裹中解放出来你只需要记住一条核心规则Animation Group 作直接父级负责动画Text Animation 负责拆分Style Panel 定义最终态。在此基础上Stagger Animation 提供了对整组子元素的级联动画方案可与文本动画组合出丰富的入场编排动画引擎的完整概念体系见 Animations组件源码可深入阅读 animate-text.tsx、animate-text.ws.ts 与属性定义 animate-text.props.ts。赞分享低代码前端【免费下载链接】webstudioOpen source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.项目地址https://gitcode.com/gh_mirrors/we/webstudio点击查看免费下载相关推荐如何使用Android Developer Roadmap掌握逐帧动画新手必备完整指南如何使用Android Developer Roadmap掌握逐帧动画新手必备完整指南 Android Developer Roadmap是一个全面的学习路径移动开发教程TiXL 文字碎片动画详解用 PickStringPart 逐词逐字推进以及 AnimRandomString 单节点捷径TiXL 文字碎片动画详解用 PickStringPart 逐词逐字推进以及 AnimRandomString 单节点捷径 本文基于 TiXL开源实时运动音视频图形学桌面应用ViVeTool-GUI社区贡献指南如何参与项目维护与改进ViVeTool GUI社区贡献指南如何参与项目维护与改进 ViVeTool GUI是一个基于ViVeTool的Windows功能控制图形界面工具让用户能够桌面应用上一篇x64dbg 异常断点命令 SetExceptionBPX 详解语法、机会类型与底层捕获机制下一篇DeepSeek Harness TUI 自动终端标题设计用 OSC 0 与一次性模型调用让每个窗格自带会话标签创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考