用途:为网页文字实现动画与特效,包括字符、单词、行的拆分动画、文字逐字揭示、打字机、波浪、故障(glitch)、乱码解码等效果。
主要能力:SplitText 可将文本按 chars、words、lines 拆分并分别动画,支持 stagger 从 center、edges、random 或 grid 模式依次触发;ScrambleTextPlugin 提供乱码渐显、文字替换与解码效果,可自定义字符集、速度与 revealDelay;TextPlugin 可改变文本内容、递增数字与数组文本轮换。三者可与 ScrollTrigger 配合,实现滚动触发的文字揭示与高亮。
用法:需先安装 gsap(npm install gsap),并通过 import 引入对应插件后注册,如 gsap.registerPlugin(SplitText)。典型流程为创建 new SplitText(target, { type: 'chars' }) 后对 split.chars 等数组做 gsap.from/gsap.to 动画,动画结束调用 split.revert() 还原原始 HTML。
限制与注意:长文本按字符拆分可能带来性能负担,应只拆分所需类型;必须 revert 以避免内存泄漏;响应式场景建议使用 gsap.matchMedia 控制拆分条件并返回清理函数;Scramble 速度需保持可读;需考虑文本可访问性。