ai-password-manager/docs/figma-ai-animations-spec.md

AI密码管理器 - AI元素与动画效果规范

🤖 AI视觉元素设计

1. AI渐变色系统

主要AI渐变

AI/Primary: 
- 角度：135度
- 起始色：#667eea (蓝紫色)
- 结束色：#764ba2 (深紫色)
- 用途：主要AI功能、按钮、卡片背景

AI/Secondary:
- 角度：135度  
- 起始色：#f093fb (粉紫色)
- 结束色：#f5576c (珊瑚红)
- 用途：次要AI功能、强调元素

AI/Accent:
- 角度：135度
- 起始色：#4facfe (天蓝色)
- 结束色：#00f2fe (青色)
- 用途：AI状态指示、进度条、特殊效果

渐变应用场景

• AI助手卡片背景：使用AI/Primary渐变
• AI功能按钮：使用AI/Primary渐变 + 发光效果
• 智能搜索栏AI图标：使用AI/Primary渐变
• AI建议徽章：使用AI/Secondary渐变
• AI处理进度条：使用AI/Accent渐变

2. AI发光效果系统

基础发光效果

AI/Glow/Subtle (微妙发光):
- 类型：外发光 (Drop Shadow)
- 颜色：#667eea
- X偏移：0px
- Y偏移：0px
- 模糊：6px
- 扩散：1px
- 透明度：25%

AI/Glow/Medium (中等发光):
- 类型：外发光
- 颜色：#667eea
- X偏移：0px
- Y偏移：0px
- 模糊：12px
- 扩散：2px
- 透明度：35%

AI/Glow/Strong (强发光):
- 类型：外发光
- 颜色：#667eea
- X偏移：0px
- Y偏移：0px
- 模糊：20px
- 扩散：4px
- 透明度：45%

发光应用规则

• AI按钮默认状态：使用Subtle发光
• AI按钮悬停状态：使用Medium发光
• AI功能激活状态：使用Strong发光
• AI徽章：使用Subtle发光
• AI处理中状态：使用Medium发光 + 脉冲动画

3. AI图标系统

AI机器人图标

设计规范：
- 基础尺寸：24×24px
- 线条粗细：2px
- 圆角：2px
- 颜色：AI渐变填充或单色

图标元素：
- 头部：圆角矩形
- 眼睛：两个小圆点
- 嘴部：小横线
- 身体：矩形
- 天线：顶部两个小点

状态变化：
- 默认：静态AI渐变
- 思考中：眼睛闪烁动画
- 处理中：整体脉冲动画
- 完成：短暂的发光效果

AI徽章设计

尺寸：32×16px
背景：AI/Primary渐变
圆角：8px
文字："AI"
字体：10px, Bold
颜色：白色
效果：AI/Glow/Subtle

变体：
- 小尺寸：24×12px，8px字体
- 大尺寸：40×20px，12px字体
- 圆形：16×16px圆形，"AI"居中

4. 智能状态指示器

AI处理状态

等待状态：
- AI图标：静态，AI/Primary渐变
- 文字："AI准备就绪"
- 颜色：Gray/500

思考状态：
- AI图标：缓慢脉冲动画
- 文字："AI正在分析..."
- 颜色：AI/Primary
- 动画：1.5s循环，透明度60%-100%

处理状态：
- AI图标：快速脉冲 + 旋转
- 文字："AI正在处理..."
- 颜色：AI/Accent
- 动画：0.8s循环，多重效果

完成状态：
- AI图标：短暂强发光
- 文字："AI分析完成"
- 颜色：Security/High
- 动画：一次性发光效果

🎬 动画效果系统

1. 基础动画参数

时长标准

微交互 (Micro): 150ms
- 按钮点击反馈
- 开关切换
- 小图标变化

快速 (Fast): 200ms
- 卡片悬停效果
- 颜色变化
- 小组件状态切换

标准 (Normal): 300ms
- 页面转场
- 模态框出现/消失
- 大组件状态变化

慢速 (Slow): 500ms
- 复杂动画
- 多步骤动画
- 强调性动画

缓动函数

Ease Out: 快速开始，缓慢结束
- 用途：元素进入、按钮反馈
- 贝塞尔：cubic-bezier(0.25, 0.46, 0.45, 0.94)

Ease In: 缓慢开始，快速结束  
- 用途：元素退出、消失动画
- 贝塞尔：cubic-bezier(0.55, 0.055, 0.675, 0.19)

Ease In Out: 两端缓慢，中间快速
- 用途：状态切换、循环动画
- 贝塞尔：cubic-bezier(0.645, 0.045, 0.355, 1)

AI Bounce: AI特有的弹性效果
- 用途：AI功能激活、完成反馈
- 贝塞尔：cubic-bezier(0.68, -0.55, 0.265, 1.55)

2. 页面转场动画

推入转场 (Push Transition)

动画类型：Smart Animate
时长：300ms
缓动：Ease Out

效果：
- 新页面从右侧滑入
- 当前页面向左滑出
- 同时进行，无重叠

适用场景：
- 主要页面导航
- 详情页面进入
- 设置页面导航

模态转场 (Modal Transition)

动画类型：Dissolve + Move In
时长：250ms
缓动：Ease Out

效果：
- 背景遮罩淡入 (透明度0→40%)
- 模态框从底部滑入
- 轻微的缩放效果 (95%→100%)

适用场景：
- 底部抽屉
- 确认对话框
- 操作菜单

3. AI特效动画

脉冲呼吸动画 (AI Pulse)

动画类型：Scale + Opacity
时长：1.5s
循环：无限
缓动：Ease In Out

关键帧：
0%: Scale 1.0, Opacity 1.0
50%: Scale 1.05, Opacity 0.7
100%: Scale 1.0, Opacity 1.0

应用场景：
- AI思考状态
- 等待AI响应
- AI功能激活提示

渐变流动动画 (Gradient Flow)

动画类型：Background Position
时长：3s
循环：无限
缓动：Linear

效果：
- 渐变背景位置移动
- 创造流动光效
- 角度保持135度不变

实现方式：
- 创建更大的渐变背景
- 通过遮罩控制可见区域
- 背景位置循环移动

应用场景：
- AI卡片背景
- AI按钮激活状态
- AI处理进度指示

粒子扫描动画 (Particle Scan)

动画类型：Position + Opacity + Scale
时长：2s
循环：无限
缓动：Ease In Out

粒子属性：
- 数量：8-12个
- 尺寸：2-4px圆点
- 颜色：AI/Accent渐变
- 轨迹：弧形或直线

运动模式：
- 从左到右扫过
- 透明度渐变
- 轻微的缩放变化

应用场景：
- 安全扫描过程
- AI分析进度
- 数据处理状态

4. 交互反馈动画

按钮点击反馈

AI Button 点击：
1. 按下：Scale 0.98 (150ms, Ease Out)
2. 释放：Scale 1.0 + 发光增强 (200ms, AI Bounce)
3. 完成：发光恢复正常 (300ms, Ease Out)

Primary Button 点击：
1. 按下：Scale 0.98 + 颜色加深 (150ms, Ease Out)
2. 释放：Scale 1.0 + 颜色恢复 (200ms, Ease Out)

Secondary Button 点击：
1. 按下：背景色出现 (150ms, Ease Out)
2. 释放：背景色消失 (200ms, Ease Out)

卡片交互反馈

悬停效果：
- 阴影：Shadow/MD → Shadow/LG (200ms, Ease Out)
- 位移：Y轴向上2px (200ms, Ease Out)

点击效果：
- 缩放：Scale 0.98 (150ms, Ease Out)
- 阴影：Shadow/LG → Shadow/SM (150ms, Ease Out)

AI卡片特殊效果：
- 悬停：发光效果增强 (200ms, Ease Out)
- 点击：短暂的渐变流动加速

开关切换动画

滑块移动：
- 距离：24px (开关宽度 - 滑块宽度)
- 时长：200ms
- 缓动：Ease In Out

轨道颜色变化：
- 同步进行
- Gray/300 ↔ Primary/500
- 时长：200ms

状态指示：
- 开启：轻微的发光效果
- 关闭：发光消失

5. 加载动画

旋转加载器 (Spinner)

基础版本：
- 圆环：2px线宽，Primary/500颜色
- 旋转：360度，1s，Linear，无限循环
- 尺寸：24×24px或32×32px

AI版本：
- 圆环：AI/Primary渐变
- 旋转：360度，1.2s，Ease In Out，无限循环
- 发光：AI/Glow/Subtle
- 脉冲：配合旋转的透明度变化

骨架屏动画 (Skeleton)

基础效果：
- 背景：Gray/200
- 动画：从左到右的光泽扫过
- 时长：1.5s，无限循环

光泽效果：
- 宽度：100px
- 颜色：白色渐变 (透明→50%→透明)
- 移动：从-100px到容器宽度+100px
- 缓动：Ease In Out

进度条动画

线性进度：
- 宽度变化：0% → 目标百分比
- 时长：根据进度值计算 (最长2s)
- 缓动：Ease Out

AI进度条：
- 基础进度：AI/Accent渐变
- 流动效果：渐变位置移动
- 脉冲效果：轻微的高度变化

6. 状态转换动画

密码强度变化

圆点填充动画：
- 每个圆点依次填充
- 间隔：100ms
- 颜色渐变：Gray/300 → 目标颜色
- 缩放：轻微的放大效果 (1.0 → 1.1 → 1.0)

强度提升特效：
- 新填充的圆点：短暂发光
- 颜色变化：平滑过渡
- 完成时：整体轻微脉冲

安全评分变化

圆形进度条：
- 进度弧度：平滑增长
- 时长：1.5s
- 缓动：Ease Out

数字计数：
- 从当前值到目标值
- 时长：1s
- 缓动：Ease Out
- 数字跳动效果

评分提升庆祝：
- 完成时：短暂的发光效果
- 粒子效果：小星星从中心散开
- 颜色变化：根据新评分调整

7. AI功能专用动画

语音识别动画

麦克风图标：
- 基础：静态状态
- 激活：脉冲动画 + 发光
- 识别中：音波扩散效果
- 完成：短暂的成功发光

音波效果：
- 3个同心圆
- 依次扩散
- 透明度：100% → 0%
- 时长：1s，无限循环

AI分析动画

分析过程：
1. 数据收集：粒子向中心聚集
2. 处理中：中心旋转 + 脉冲
3. 结果生成：粒子向外扩散
4. 完成：结果卡片滑入

时长分配：
- 收集：1s
- 处理：2-3s (根据实际处理时间)
- 生成：0.5s
- 完成：0.3s

智能建议出现

建议卡片动画：
1. 从底部滑入 (300ms, Ease Out)
2. 轻微的弹性效果 (AI Bounce)
3. 发光效果渐现 (200ms)
4. 内容文字依次显示 (每行间隔100ms)

特殊效果：
- 背景渐变流动
- 边框发光脉冲
- AI图标旋转

🎯 动画实施指南

Figma中的动画设置

Smart Animate设置

1. 创建组件的多个状态
2. 确保图层命名一致
3. 设置Prototype连接
4. 选择Smart Animate
5. 调整时长和缓动

复杂动画实现

1. 使用多个中间帧
2. 创建动画序列
3. 利用延迟设置
4. 组合多种动画类型

开发实现建议

React Native Reanimated

// AI脉冲动画示例
const pulseAnimation = useSharedValue(1);

useEffect(() => {
  pulseAnimation.value = withRepeat(
    withTiming(1.05, { duration: 750 }),
    -1,
    true
  );
}, []);

const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ scale: pulseAnimation.value }],
  opacity: interpolate(pulseAnimation.value, [1, 1.05], [1, 0.7])
}));

性能优化

• 使用原生动画驱动
• 避免在主线程执行动画
• 合理控制同时运行的动画数量
• 使用shouldRasterizeIOS优化复杂动画

这个AI元素和动画规范确保了整个密码管理器界面具有一致的AI视觉语言和流畅的用户体验，同时体现了未来感和科技感。