用途:Serega Emotional 用于给短强调文案做一次性弹簧式逐字揭示动画,适合短标题、标签或短语,理想为 2–4 个词、不超过一个短句。多行标题、较长文案或同页多个动画块应改用 Serega Gentle;该效果不循环,逐字模糊渲染开销较大。
主要能力与动作契约:目标为逐字符、从左到右错开。延迟为 60fps 下每字符 1.5 帧,首字符 25ms 后开始,之后每字符再延后 25ms。线性阶段在 180ms 内选择器强度由 100% 到 0%;随后进入频率 1Hz、衰减 10 的弹簧阶段,直到局部时间 680ms。起始状态为 translateY(32px)、scaleY(0.78)、rotate(12deg)、opacity 0、CSS 模糊 10px,结束为自然位置、缩放、旋转、不透明度和无模糊。过冲期间允许选择器强度为负,但仅钳制不透明度与模糊,不钳制位置、缩放、旋转。无退出动画,除非用户要求。
使用方式:把请求的动画库视为强制要求,不得替换。按字素切分文本并保留空格和标点,优先使用 Intl.Segmenter,回退用 Array.from。将字符单元分组为不换行的词包裹器,尾随空白保留在前一个词后,使换行只发生在词间。按正常 DOM 顺序对每个字符应用选择器公式与属性映射。参考源预设见 references/effect.json。使用 Motion 的项目复制 assets/motion/serega-emotional.js;无依赖浏览器代码复制 assets/waapi/serega-emotional.js 和 assets/waapi/serega-emotional.css。
计算:对局部时间 t(秒)与 w = 2π × 频率,选择器强度 p 为:t <= 0 时 p = 1;t < 0.18 时 p = 1 - t / 0.18;t >= 0.18 时 p = (-1 / 0.18) × sin((t - 0.18) × w) / (exp(10 × (t - 0.18)) × w)。映射为 y = 32p、scaleY = 1 - 0.22p、rotation = 12p、opacity = clamp(1 - p, 0, 1)、blur = 10 × max(p, 0)。
性能与无障碍:仅用于短文案,CSS 模糊可能导致逐字重绘。动画只在进入视口时启动,避免多个长 Serega Emotional 块同时运行;prefers-reduced-motion 时渲染静态文本。宿主应用负责排版与呈现;使用不换行的 inline-block 词包裹器和 inline-block 字符单元,white-space: pre,变换原点靠近字形中心。保留完整短语作为宿主可访问标签,并对拆分字符 span 对辅助技术隐藏。重放、停止和拆除期间取消保留的动画。
验证:确认位置、垂直缩放、旋转、不透明度、模糊均被动画;局部 180ms 时字符达到自然状态;约 269ms 时首次过冲约为 -6.2px、104% 垂直缩放、-2.3deg 旋转;680ms 时所有属性精确复位;60fps 下首字符等待 25ms,之后每字符再等 25ms;空格、标点、表情符号和非拉丁字素保持完整;多行文本只在词间换行;除非明确要求,不运行退出动画。