用途:当用户需要“写动效规范”“创建品牌动效系统”“定义缓动与时长 token”或为团队统一动效语言、补充无障碍/减少动效标准时使用。产出是一份可填入的模板文档,而非代码。
主要能力:一份完整规范包含七部分——动效原则(3-5 条命名信念,每条配一行规则)、时长与缓动 token(命名时长与曲线,是核心,其他内容都引用它)、动效库(入场/退场/过渡模式映射到 token)、标识(logo)动画规则(明确允许与禁止)、反馈与状态动效(加载、成功、错误、悬停、聚焦)、无障碍(减少动效、光敏性、聚焦可见性)、正/反例对照。
核心概念:token 是可实施的关键。时长 token 示例:duration-instant 100ms(微反馈)、duration-fast 150ms(悬停/小状态变化)、duration-base 250ms(默认)、duration-slow 400ms(较大界面)、duration-slower 600ms(品牌时刻)。缓动 token 示例:ease-standard (0.4,0,0.2,1) 默认、ease-decelerate 入场、ease-accelerate 退场、ease-emphasized 品牌时刻、ease-spring 俏皮回弹(慎用)。原则:入场减速、退场加速且更短;线性仅用于循环(加载/进度)。
使用方式:先判断系统规模(单站点/单活动为轻量版;一个产品为完整七部分;跨产品+营销+广播则完整文档加动效个性预设),再为每个动效选择 token——元素越大/位移越长则时长越长。动效库把每个模式映射到具体 token,例如“弹窗打开:duration-slow + ease-emphasized;关闭:duration-base + ease-accelerate”。模板需填入品牌名、版本、负责人及具体数值。
限制与要求:文档须避免只写形容词(如“顺滑”“现代”),每个原则要配数值 token 规则;退场时长应比入场短一档;弹簧/强调缓动仅用于品牌时刻;必须包含无障碍章节(减少动效时用淡入替代位移、每秒闪烁不超过 3 次、状态不以颜色或动效单独表意、聚焦指示不可被动画隐藏);token 命名应按用途(如 duration-base)而非字面值(如 duration-250),便于后续调整数值。附带参考文件:references/full-template.md、references/token-reference.md、references/dos-and-donts.md。