用途:A5-count-up-reveal 是一种动态图形场景原型,核心是让大号数字从 0 滚动到目标值,可选在数字上方或下方加入小标签的弹入效果,属于典型的数据统计揭示节拍。
主要能力:由 count-up 主效果组合而成;可选标签弹入(如数字上方的“Save up to”或下方的“annually”);画布默认 1080x1920(或由 pack 指定);数字区居中,使用 tabular-nums 防止滚动时宽度抖动;标签区与后缀区均为可选,分别锚定在数字上方或下方。
编排:phase_1_label_pop 从第 0 帧开始弹入;phase_2_count_up 从第 6 帧开始,滚动时长为场景时长的 60%,缓动为 bezier(0.16, 1, 0.3, 1);phase_3_hold 在滚动结束后至少保持 30 帧,便于阅读最终数字。
风格包兼容性:支持 SP-A、SP-E,优先用于 SP-A,与 SP-D、SP-F 不兼容。SP-A 下数字使用 Inter Black 大字号(168px+),墨色配交替粉/奶油背景,货币前缀为独立小字号 span;SP-E 下数字为饱和卡片上的同款粗体,滚动开始时对齐音乐节拍,数字两侧有贴纸芯片弹入标签。
时长:2.5 至 4.0 秒,默认 3.0 秒,需保证滚动占 60%、保持占 40%。
质量检查:滚动目标值须在场景结束前达到并至少保留 1 秒;数字元素须使用 font-variant-numeric: tabular-nums;货币前缀($、£、€)须为独立小字号 span;小数位数保持一致。
失败模式:滚动时数字宽度抖动,通常是缺少 tabular-nums,可通过内联样式应用;滚动动画占满整个场景而无保持,应将滚动时长降至场景的 60%;货币前缀随数字缩放,应将前缀包在独立 span 中并设更小字号。
限制:资料未提供具体安装命令、依赖或平台信息。