当前位置：首页 > news >正文

动效系统的智能化：让 AI 根据内容和场景自动推荐动画方案

news 2026/7/14 12:51:24

动效系统的智能化：让 AI 根据内容和场景自动推荐动画方案

一、所有的"删除"操作都用了同一个平移动画——无聊，而且不准确

用户在产品中触发"删除"操作时，无论删除的是一条聊天消息、一个购物车商品、还是一个文件夹——动画策略都是"向右滑出 + 淡出，300ms ease-out"。聊天消息的删除应该是"瞬间消失"（隐私敏感、不留痕迹），购物车商品的删除应该是"向购物车图标飞入一个小球 + 数量减 1 的弹性动画"（反馈明确、有补偿感），文件夹的删除应该是"缩小 + 透明消失 + 垃圾桶图标微弹"（确认永久操作、增加仪式感）。

AI 在动效系统中的作用不是"做出更漂亮的动画"。它是一个动画语义映射器：分析内容类型（消息/商品/文档）、操作语义（删除/新增/移动/更新）、用户上下文（是主动操作还是被动通知）→ 从动画库中推荐最合适的动画方案。

二、动效语义映射模型

flowchart TD A["UI 事件"] --> B["AI 分析操作语义"] B --> C{"操作类型"} C -->|"创建/新增"| C1["入场动画: scale+fade in"] C -->|"删除/移除"| C2["出场动画: slide+fade 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 可微调，但动画类型保持不变）。