动效系统的智能化：让 AI 根据内容和场景自动推荐动画方案 动效系统的智能化让 AI 根据内容和场景自动推荐动画方案一、所有的删除操作都用了同一个平移动画——无聊而且不准确用户在产品中触发删除操作时无论删除的是一条聊天消息、一个购物车商品、还是一个文件夹——动画策略都是向右滑出 淡出300ms ease-out。聊天消息的删除应该是瞬间消失隐私敏感、不留痕迹购物车商品的删除应该是向购物车图标飞入一个小球 数量减 1 的弹性动画反馈明确、有补偿感文件夹的删除应该是缩小 透明消失 垃圾桶图标微弹确认永久操作、增加仪式感。AI 在动效系统中的作用不是做出更漂亮的动画。它是一个动画语义映射器分析内容类型消息/商品/文档、操作语义删除/新增/移动/更新、用户上下文是主动操作还是被动通知→ 从动画库中推荐最合适的动画方案。二、动效语义映射模型flowchart TD A[UI 事件] -- B[AI 分析操作语义] B -- C{操作类型} C --|创建/新增| C1[入场动画: scalefade in] C --|删除/移除| C2[出场动画: slidefade out] C --|移动/排序| C3[位置补间: FLIP 动画] C --|状态切换| C4[过渡动画: crossfade/缩放] C --|通知/提醒| C5[吸引注意: 弹性光晕] C1 -- D{内容重要度} C2 -- D D --|高重要度| E1[缓慢、仪式感br/弹窗 400-600ms] D --|低重要度| E2[快速、不打断br/toast 150-200ms] E1 -- F{用户偏好} E2 -- F F --|减少动效| G1[缩短 duration 50%br/简化 easing] F --|正常| G2[标准动效方案]三、动效推荐引擎/** * 动效语义推荐引擎 * * 输入事件类型 内容类型 用户偏好 * 输出推荐动画方案属性 duration easing */ type EventType create | delete | move | update | notify; type ContentType message | product | file | setting | notification; type ImportanceLevel high | medium | low; interface AnimationRecommendation { /** 推荐动画类型 */ type: fadeIn | fadeOut | slideIn | slideOut | scaleIn | scaleOut | flip | elastic | crossfade; /** CSS / WAAPI 动画参数 */ duration: number; // 持续时间 (ms) easing: string; // 缓动函数 delay: number; // 延迟 (ms) /** 人类可读的理由 */ reason: string; } /** * 动效推荐规则引擎 * 规则优先级操作语义 内容类型 重要度 用户偏好 */ function recommendAnimation( event: EventType, contentType: ContentType, importance: ImportanceLevel, reducedMotion: boolean false ): AnimationRecommendation { // 如果用户偏好减少动效 → 所有动画都简化为最小方案 if (reducedMotion) { return { type: fadeIn, duration: 100, easing: linear, delay: 0, reason: 用户启用了减少动效偏好所有动画简化为最轻量方案, }; } // 规则表[事件, 内容, 重要度] → [动画类型, duration, easing, delay] const rules: [EventType, ContentType, ImportanceLevel, AnimationRecommendation][] [ // 删除操作不同内容类型用不同动画语义 [delete, message, high, { type: fadeOut, duration: 150, easing: ease-in, delay: 0, reason: 聊天消息删除应瞬间消失隐私敏感无视觉痕迹, }], [delete, product, medium, { type: scaleOut, duration: 300, easing: cubic-bezier(0.4, 0, 0.2, 1), delay: 0, reason: 购物车商品删除带缩小动画给用户补偿感和撤销余地, }], [delete, file, high, { type: scaleOut, duration: 400, easing: cubic-bezier(0.4, 0, 0.2, 1), delay: 50, reason: 文件删除使用缓慢缩小增加仪式感确认永久操作, }], // 创建/新增轻盈入场 [create, message, medium, { type: slideIn, duration: 250, easing: ease-out, delay: 0, reason: 新消息从底部滑入聊天流的自然方向, }], [create, product, low, { type: fadeIn, duration: 200, easing: ease-out, delay: 0, reason: 商品列表新增卡片淡入不抢占用户注意力, }], // 通知 [notify, notification, high, { type: elastic, duration: 500, easing: cubic-bezier(0.68, -0.55, 0.265, 1.55), delay: 0, reason: 重要通知使用弹性动画吸引注意力但不过度打断, }], [notify, notification, low, { type: fadeIn, duration: 300, easing: ease-out, delay: 0, reason: 次要通知仅淡入不打断用户当前操作, }], ]; // 精确匹配 const exactRule rules.find( ([ev, ct, imp]) ev event ct contentType imp importance ); if (exactRule) return exactRule[3]; // 宽松匹配忽略重要度 const lenientRule rules.find(([ev, ct]) ev event ct contentType); if (lenientRule) return lenientRule[3]; // 默认推荐 return { type: fadeIn, duration: 200, easing: ease-out, delay: 0, reason: 无匹配的动画规则使用默认淡入方案, }; } /** * 将推荐方案转为 CSS animation 字符串 */ function recommendationToCSS(rec: AnimationRecommendation, direction?: string): string { const keyframeName rec.type; // 根据是否有 direction 信息拼接动画属性 const dir direction ? from-${direction} : ; return ${keyframeName}${dir} ${rec.duration}ms ${rec.easing} ${rec.delay}ms both; } // 使用示例 // const rec recommendAnimation(delete, product, medium); // el.style.animation recommendationToCSS(rec, right); /** * B端企业级后台vs C端消费者产品的动效力度差异 */ function adjustForProductType( rec: AnimationRecommendation, productType: b2b | b2c ): AnimationRecommendation { if (productType b2b) { return { ...rec, duration: Math.round(rec.duration * 0.6), // B端动画快 40% easing: rec.easing.replace(cubic-bezier, ease-out), // 简化缓动 reason: rec.reason B端产品快速、低调、不打断工作流, }; } return rec; // C端保持完整表现力 } export { recommendAnimation, recommendationToCSS, adjustForProductType }; export type { AnimationRecommendation, EventType, ContentType, ImportanceLevel };四、动效系统智能化的边界不能完全取代设计师的动效判断。规则引擎只能覆盖常见场景 × 常见操作的组合。当设计师有意识地想打破惯例例如一个删除操作被设计为夸张的爆炸消失效果来强化品牌记忆规则引擎不应该用推荐来覆盖创意。AI 推荐应该提供默认选项——设计师在此基础上调整参数。动效的一致性比丰富度更重要。在同一个产品中表单保存成功的反馈动画应该在任何页面中保持一致。AI 推荐引擎如果为不同页面的同一操作推荐了不同的动画会破坏一致性。因此规则引擎的关键不是每个场景给不同动画而是同一语义 同一动画家族——delete操作的所有变体都应该在同一个动画家族内duration/easing 可微调但动画类型保持不变。五、总结动效推荐引擎 事件类型 × 内容类型 × 重要度 → 动画方案type duration easing delay。delete操作的动画语义因内容不同而不同消息瞬间消失、商品缩小可撤销、文件缓慢仪式感。prefers-reduced-motion是硬约束——优先级高于所有规则统一简化为 100ms 淡入。B端产品的动画应比 C端快 40% 且缓动更简单——工具属性 表现力。规则引擎是默认选项——设计师可以覆盖任何推荐但默认值必须一致。同一语义操作必须对应同一个动画家族——一致性优先于多样化的视角冲击。动画的 duration 范围150ms低重要性/删除消息到 500ms弹性通知/文件删除。延迟delay用于创造排队感——删除文件时 50ms delay 让人觉得这个操作在处理中。AI 推荐引擎不是每次生成新动画而是从预定义的动画池中根据操作语义挑选最合适的。终极目标是操作语义 → 自然动画的直接映射——用户不需要注意到动画但操作的结果感觉很自然。