SuperAPI AI 工具集

serega-gentle

设计与创作

查看项目

更新于 10-16 06:48

技能介绍

用途:为文字添加平静的一次性逐字符揭示动效,适用于句子、多行标题、较长文本,以及页面上可能同时运行多个揭示效果的场景。短促强调文案(约2–4词、不超过一句)才考虑 Serega Emotional;不确定时选 Serega Gentle。

主要能力:按字素拆分文本并保留空格与标点,优先使用 Intl.Segmenter,回退用 Array.from;将字符单元分组为不换行的词包装器,尾随空白跟随前一个词,保证只在词间换行。动效契约:逐字符从左到右错开,入场 opacity 0→1、translate Y 15px→0、时长 500ms、错开 15ms、缓动 cubic-bezier(0.2, 0.8, 0.2, 1);短语切换出场 opacity 1→0、translate Y 0→-13.92px、时长 302ms、错开 10ms、缓动 cubic-bezier(0.7, 0, 0.84, 0)。绝不动画模糊,清晰字形是本效果的核心特征;一次性揭示不加出场。

使用方式:先判断用户要一次性揭示还是循环短语切换;若指定了动画库则必须使用该库。需要原始 Pixel Point 配方或非 WAAPI 适配器时读取 references/effect.json;无依赖浏览器代码可复制 assets/waapi/serega-gentle.js 与 assets/waapi/serega-gentle.css。短语切换:首句入场一次后保持 550ms,完全出场后替换,下一句入场一次后等待 320ms,再从出场步骤重复;同一短语不重复入场,仅保留一个活动短语层,出场完成后才替换内容,等待动画完成而非额外计时,销毁时取消动画与计时器。

宿主与无障碍:排版与呈现由宿主应用负责;使用 inline-block 宿主、不换行的 inline-block 词包装器和 white-space: pre 的 inline-block 字符单元;完整短语作为宿主可访问标签,拆分字符 span 对辅助技术隐藏;尊重 prefers-reduced-motion 渲染静态文本;页面存在多个动画时,仅在进入视口后开始。

限制与验证:除非用户要求,否则保留原有文案、排版、颜色、间距与布局。验证文案未变、任何帧都无模糊、每句仅入场一次且替换前已出场、空格标点 emoji 与非拉丁字素完整、多行只在词间换行、仅导入并调用所要求的库。