SuperAPI AI 工具集

gsap-text

编程与开发

查看项目

更新于 10-15 22:38

技能介绍

用途:该技能提供 GSAP 文本动画的生产级实现配方,专门处理文字拆分与乱码解码动效,与官方 gsap-plugins 技能互为配套——后者负责 SplitText/ScrambleText 的 API 参考,本技能只覆盖文本动画的具体做法。流程位于 gsap-setup → gsap-animate → gsap-text → gsap-optimise → gsap-test 之中,依赖 greensock/gsap-skills。

主要能力:涵盖 SplitText 设置、遮罩式逐词上滑(生产常用标题揭示模式,已用于 25+ 组件)、ScrambleText 解码、useReveal 组合式函数(init、hero、scroll、split 四个方法,自动处理字体等待、懒加载与清理),以及 references 目录中的进阶模式:clip+scramble 组合、动态字符拆分、弹性字体组装、滚动文字(3D 老虎机)、水平文字(containerAnimation)、遮罩行揭示、autoSplit 配合 ScrollTrigger。

使用方式:优先使用 useReveal;在 onMounted 中调用 init(() => scroll()),above-fold 用 hero 立即揭示,below-fold 用 scroll 逐元素触发 ScrollTrigger。手动模式下从 useNuxtApp 取出 $gsap、$lazyLoadSplitText、$lazyLoadScramble,先 await document.fonts.ready,再在 gsap.context 内创建 SplitText 并设置遮罩与初始状态,组件卸载时 revert 所有实例。

限制与注意:资料未提供收费或平台信息。需注意的坑包括:SplitText.create() 前必须等待字体加载;autoSplit: true 仅用于 lines,且须搭配 onSplit();父级 autoAlpha 与子级 mask 冲突时要改用 visibility;乱码动效前不可清空 textContent;同位置逐词补间需设 overwrite: false;SplitText 保留 span,渐变样式需用 :deep(div);.reveal 与 .text-reveal 预隐藏类可避免 FOUC。