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
```javascript
// 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视觉语言和流畅的用户体验，同时体现了未来感和科技感。