实战：动画丰富的演示文稿

本章把第 3 周的动画能力组合成一份完整演示，题材为"缓存策略演进"。通过动画层层揭示，演示节奏与讲解语言完全同步。

一、全局动画基调

slides.md 全局配置过渡方向与节奏：

---
theme: seriph
title: 缓存策略演进
transition: slide-left
backwardTransition: slide-right
---

# 缓存策略演进

::v-motion{initial="{opacity: 0, y: 20}" enter="{opacity: 1, y: 0}"}

技术分享系列

::

• 全局：前进向左滑、后退向右滑，方向感一致
• 开场标题用 Motion 上滑淡入

二、页内点击节奏：v-click 与时机

讲解页用 v-click 与绝对时机控制揭示顺序：

## 缓存的核心问题

::v-click{at=1}

**读多写少**，热点数据访问集中。

::

::v-click{at=2}

方案演进：
1. 本地缓存
2. 分布式缓存
3. 多级缓存

::

::v-click{at=3}

**目标**：命中率 95% 以上，延迟小于 10ms。

::

三次点击逐层揭示"问题 → 方案 → 目标"，节奏可控。

三、批量列表动画：v-clicks

对比页用批量动画逐条展开：

## 三种缓存方案对比

::v-clicks

- **本地缓存**：快，但不共享、易脏读
- **分布式缓存**：共享，但有网络开销
- **多级缓存**：兼顾，但一致性复杂

::

::v-after

**结论**：多级缓存 + 失效策略是主流。

::

• 三条方案逐条点击出现
• 结论用 v-after 跟随最后一条自动出现

四、元素过渡与 Motion 动效

方案卡片用 Motion 悬停放大 + 入场动效：

---
layout: center
---

## 方案总览

::v-motion
  initial="{opacity: 0, scale: 0.9}"
  enter="{opacity: 1, scale: 1}"
  hovered="{scale: 1.05, rotate: 2}"
::

**多级缓存架构**

- L1：本地内存
- L2：Redis 集群
- L3：数据库

::

::v-motion{initial="{opacity: 0, x: -40}" enter="{opacity: 1, x: 0}"}

（点击后，补充说明从左侧滑入）

::

五、流程演示：v-click.hide 互动

"先展示再隐藏"的互动页：

## 命中率自测

- 直接读库命中率约 60%
- v-click.hide 点击后隐藏：只读缓存命中率 80%
- v-click 点击后出现：多级缓存命中率 95%+

::v-click

**多级缓存的 95% 命中率**，就是我们的目标。

::

先展示三个数字，点击隐藏中间值、揭示结论，形成对比冲击。

六、关键帧强调：CSS 动画

结论页用 CSS 关键帧持续强调：

<style scoped>
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}
</style>

## 核心结论

::v-click{class="pulse"}

**多级缓存 + 主动失效，命中率从 60% 提升到 95%。**

::

点击后结论持续脉冲放大，牢牢抓住观众注意力。

七、章节过渡与自定义过渡

章节分隔页使用强调型过渡：

---
transition: fade-out
backwardTransition: fade
---

# 第一部分：为什么需要缓存

---

# 第二部分：怎么做多级缓存

需要更突出的转折时，自定义一个缩放过渡：

<style>
.slidev-transition-zoom-in {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.slidev-transition-zoom-in-enter {
  transform: scale(0.92);
  opacity: 0;
}
</style>

---
transition: zoom-in
---

# 实战要点总结

八、完整动画清单

能力	使用位置	效果
全局过渡	全局配置	前进左滑、后退右滑
v-click 时机	讲解页	问题→方案→目标逐层揭示
v-clicks	对比页	三条方案逐条展开
v-after	对比页	结论自动跟随
v-click.hide	自测页	中间数字点击隐藏
Motion 入场	标题、卡片	上滑/缩放淡入
Motion 悬停	方案卡片	悬停放大旋转
CSS 关键帧	结论页	持续脉冲强调
自定义过渡	总结页	缩放切换

九、验证与发布

逐页检查：点击次数是否与预期一致、动画是否流畅、前进后退方向是否正确、View Transition 是否需要降级。确认后：

pnpm build

这份演示覆盖了第 3 周全部动画能力：页内点击节奏、元素过渡、Motion 状态动效、翻页过渡与自定义过渡。动画服务于讲解逻辑，每一帧都有明确的表达意图。