84 lines
4.2 KiB
Markdown
84 lines
4.2 KiB
Markdown
|
以下是“吃啥盲盒”开盒动效的详细分镜描述，覆盖从点击到展示结果的完整过程，可直接交付UI动效设计师和前端开发。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 开盒动效分镜 · 吃啥盲盒
|
|||
|
|
|
|||
|
|
**整体时长**：约1.8-2.2秒
|
|||
|
|
**触发动作**：用户点击任一模式入口按钮（外卖盒/冰箱盒/附近盒）
|
|||
|
|
**核心情感曲线**：期待→悬念→惊喜→清晰
|
|||
|
|
**实现方式建议**：优先使用Lottie + CSS关键帧动画，兼容低端机型可降级为CSS动画序列
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 第一幕 · 震动蓄力（0ms – 400ms）
|
|||
|
|
**目标**：传达“盒子里有东西在动”，制造期待。
|
|||
|
|
|
|||
|
|
| 时间 | 元素 | 变化描述 | 缓动 |
|
|||
|
|
|------|------|----------|------|
|
|||
|
|
| 0ms | 点击的按钮/卡片 | 轻微缩放：scale 1.0 → 1.05 → 1.0 | ease-out |
|
|||
|
|
| 0ms | 整个盲盒入口 | 出现一圈橙色光晕从中心向外扩散后消失 | ease-out, opacity 1→0 |
|
|||
|
|
| 100ms | 盲盒图标（如🎁） | 开始高频微动：左右摇摆 ±3deg，频率先快后慢 | ease-in-out |
|
|||
|
|
| 0-400ms | 屏幕背景（盲盒大厅） | 逐渐变暗至亮度0.6，其余元素后退感 | 线性 |
|
|||
|
|
|
|||
|
|
**配套反馈**：手机轻微震动（调用`wx.vibrateShort` 15ms）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 第二幕 · 盒盖开启（400ms – 1000ms）
|
|||
|
|
**目标**：视觉上呈现“盒子被打开”的结构变化。
|
|||
|
|
|
|||
|
|
| 时间 | 元素 | 变化描述 | 缓动 |
|
|||
|
|
|------|------|----------|------|
|
|||
|
|
| 400ms | 盲盒容器（方形盒子） | 盒盖部分分离，向上位移动画，Y轴偏移 -60rpx，同时opacity 1→0 | ease-in |
|
|||
|
|
| 450ms | 盒体内部 | 从缝隙中透出金色光芒，逐渐增强 | ease-out |
|
|||
|
|
| 500ms | 盒体本身 | 向下轻微压缩（scaleY 1→0.9→1），模拟受力反弹 | ease-out |
|
|||
|
|
| 600ms | 金色光芒 | 蔓延至整个屏幕，形成短暂的白屏过渡（白色遮罩从中心放射，opacity 0→0.8→0） | ease-in-out，持续400ms |
|
|||
|
|
| 700ms | 结果承载层（卡片/空状态） | 在光芒最亮时完成挂载，但此时仍被白色遮罩覆盖 | - |
|
|||
|
|
|
|||
|
|
**配套反馈**：第二次短震（10ms），强化“打开了”的触感。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 第三幕 · 展示与定型（1000ms – 1800ms）
|
|||
|
|
**目标**：结果内容华丽登场，信息清晰呈现。
|
|||
|
|
|
|||
|
|
| 时间 | 元素 | 变化描述 | 缓动 |
|
|||
|
|
|------|------|----------|------|
|
|||
|
|
| 1000ms | 白色遮罩 | 开始淡出（opacity 0.8→0），持续300ms | ease-in |
|
|||
|
|
| 1000ms | 结果卡片（外卖/菜谱/店铺） | 从缩放0.85、Y轴+30rpx开始弹出 | ease-out-back（弹性动画） |
|
|||
|
|
| 1100ms | 卡片内商家图片 | 单独从模糊（blur 8px）变清晰（0px），持续200ms | ease-out |
|
|||
|
|
| 1200ms | 标题文字（“你抽到的外卖是…”） | 逐字或整行从上方飘入，opacity 0→1，Y -20→0 | ease-out |
|
|||
|
|
| 1300ms | 评分/距离等次要信息 | 阶梯式出现，每组延迟50ms | ease-out |
|
|||
|
|
| 1500ms | 底部操作按钮 | 从下方滑入，Y +40→0，opacity 0→1 | ease-out |
|
|||
|
|
| 1600ms | 彩带动效（可选） | 短暂彩色纸屑从卡片背后喷射，3-5片 | 物理抛物线，随机旋转 |
|
|||
|
|
|
|||
|
|
**配套反馈**：手机长震一次（`wx.vibrateLong`）或播放轻快“叮”音效（需音频资源）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 各模式动效差异点
|
|||
|
|
|
|||
|
|
| 模式 | 第二幕盒内光芒颜色 | 第二幕溅射粒子 | 第四幕彩带 |
|
|||
|
|
|------|-------------------|---------------|-----------|
|
|||
|
|
| 外卖盲盒 | 橙色→暖黄 | 迷你外卖车图标飘出 | 外卖袋emoji纸屑 |
|
|||
|
|
| 冰箱盲盒 | 绿色→浅绿 | 蔬菜粒子（🥬🍅） | 餐具emoji纸屑 |
|
|||
|
|
| 探店盲盒 | 紫色→粉金 | 地图标记气泡冒起 | 星星emoji纸屑 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 降级策略（性能受限时）
|
|||
|
|
- 移除粒子与彩带，仅保留盒盖位移+光芒过渡+卡片弹性动画。
|
|||
|
|
- 所有动画时长缩短至1.2秒，弹性缓动改为普通ease-out。
|
|||
|
|
- 关闭震动序列（通过API判断手机性能或用户设置）。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 开发关键参数
|
|||
|
|
- **Lottie JSON 尺寸**：控制在80KB以内，帧率30fps。
|
|||
|
|
- **CSS 动画**：使用`transform`和`opacity`，开启GPU加速（`will-change`）。
|
|||
|
|
- **遮罩过渡**：使用`page-mask`绝对定位覆盖，z-index分层。
|
|||
|
|
- **依赖资源**：音频文件（.mp3, 5KB以内），震动序列，图片预加载（结果卡片图提前加载）。
|
|||
|
|
|
|||
|
|
---
|